因为懒,所以直接在http://www.runoob.com写demo测试了。
(1)iframe嵌套
虽然可能到现在这中方式都很常用,但是你baidu/google一下会发现。很多人都并不提倡用iframe。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <iframe src="http://www.cnblogs.com/" width="100%" height="400px"> <p>您的浏览器不支持 iframe 标签。</p> </iframe> </body> </html>
(2)div + <Object>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="http://cdn.static.runoob.com/libs/jquery/2.0.0/jquery.min.js"> </script> <script> $(function(){ var strObj = '<object type="text/html"' +'data="http://www.cnblogs.com/"' +'width="100%" height="400px"></object>'; $('#loadPage').click(function(){ $("#pagecontainer").append(strObj); }) }) </script> </head> <body> <a href="javascript:void(0);" id="loadPage">加载html</a><br/> <div id="pagecontainer"></div> </body> </html>
(3)Jquery.load(…) 传说比较推荐的,但有人说布局会出现异样
Jquery.load(url [, data ] [, complete ]) 详解
(别问我为什么不load(http://www.cnblogs.com))
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="http://cdn.static.runoob.com/libs/jquery/2.0.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#divv").load("http://www.runoob.com/"); }); </script> </head> <body> <div id='divv'style='border:2px solid red;100%;height:200px'></div> </body> </html>