daily日常所遇 - 页面A嵌套页面B

Posted 2020-08-29 淡丶无欲

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了daily日常所遇 - 页面A嵌套页面B相关的知识，希望对你有一定的参考价值。

因为懒，所以直接在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>

HTML <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;width:100%;height:200px\'></div>

</body>
</html>

以上是关于daily日常所遇 - 页面A嵌套页面B的主要内容，如果未能解决你的问题，请参考以下文章

用iframe嵌套的页面会自动跳转覆盖父页面，请问如何解决？