div 加载 html页面的方法
做网页的单页面应用时,需要在一个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>
水平有限,望各位园友不吝赐教!如果觉得不错,请点击推荐和关注!
出处:http://www.cnblogs.com/isaboy/
声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
出处:http://www.cnblogs.com/isaboy/
声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。