做網頁的單頁面應用時，需要在一個HTML的Div元素中加載另一個HTML頁面，以前有一種方法就是用iframe，舉例如下：
1 <div class="main-container" id="main" style="width: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>