做网页的单页面应用时，需要在一个HTML的Div元素中加载另一个HTML页面，以前有一种方法就是用iframe，举例如下：
1 <div class="main-container" id="main" style="99%"> 2 <iframe src="diagrambuilder/dashboard/diagrambuilder/default.html" width="100%" height="800" frameborder="0"> 3 您的浏览器不支持iframe，请升级 4 </iframe> 5 </div>
但是说有点重量级。那么还有没有另外的方法呢？
1 <script> 2 function load_home() { 3 4 document.getElementById("main").innerHTML = '<object type="text/html" data="diagrambuilder/dashboard/diagrambuilder/default.html" width="100%" height="600px"></object>'; 5 } 6 </script>
1 <a class="sub-link" href="javascript:load_home();">load html</a>
可以用此方法进行页面加载。
另外还有一种就是用jquery的load方法，但是测试后发现页面不能正常布局：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jQuery Load (js和css有问题？)</title> 6 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 7 <script type="text/javascript"> 8 jQuery(function(){ 9 jQuery('#loadPage').click(function(){ 10 jQuery('#pagecontainer').load('app/diagrambuilder/dashboard/diagrambuilder/default.html', 11 function(){alert('Content Successfully Loaded.')} 12 ); 13 }); 14 }) 15 </script> 16 </head> 17 <body> 18 <a href="javascript:void(0)" id="loadPage">Click To Load Web Page</a><br/> 19 <div id="pagecontainer"></div> 20 </body> 21 </html>