黄锦诚的个人博客--有志者是锦诚!

iframe同域跨域高度自适应的实现

  页面嵌套iframe,相信很多人都会遇到这个问题,本人不喜欢iframe,但项目中遇到了必段要用到,那也没办法,只能折腾,这个是最近项目中用到的解决的个办法,其中的原理是定义一个相同的域名变量,本来只是为实现跨域的iframe高度自适应的,但经试验,该方法可以实现同域或不同域。具体可以自测。

  本效果的实现需要父页面和子页面都需要作相应的设置
  以下是具体的设置及代码

一、父层页面的设置

  1、是父层的iframe引入

  1. <iframe frameborder="0" scrolling="no" width="100%" src="iframe.html" id="paopaowang"></iframe>

  2、父层要设计一个域名的变量 domain

  1. <script type="text/javascript">
  2.     document.domain = "aqy106.com";
  3. </script>

二、包含的iframe的设置

  在这个页面里,你需要给你的body或用一个容器将iframe中的所有元素包裹,然后添加一个个id

  1. id="bodybox"

  然后再添加以下的脚本代码,其中要注意的是 document.domain = “aqy106.com”; 这里的域名要设置成和父层一样的域名

  1. <script type="text/javascript">
  2.     document.domain = "aqy106.com";
  3.     function reSetHeight(h, scl) {
  4.         if (!top.document.getElementById("paopaowang")) return;
  5.         with (top.document.getElementById("paopaowang")) {
  6.             if (offsetHeight != h) {
  7.                 style.height = h + 'px';
  8.             }
  9.         }
  10.         top.document.body.style.height = top.document.body.scrollHeight;
  11.         if (!scl) {
  12.             if (top.document.documentElement.scrollTop) top.document.documentElement.scrollTop = 0;
  13.             if (top.document.body.scrollTop) top.document.body.scrollTop = 0;
  14.         }
  15.         h=document.getElementById("bodybox").offsetHeight;
  16.         with (top.document.getElementById("paopaowang")) {
  17.             if (offsetHeight != h) {
  18.                 style.height = h + 'px';
  19.             }
  20.         }
  21.     }
  22.     window.onload=function(){
  23.         reSetHeight(document.getElementById("bodybox").offsetHeight);
  24.     }
  25. </script>

  具体效果请查看DEMO,点击打开

  至此已全部完成,具体代码已很简单明了,可以自行修改和分析,各位具体可以尝试将代码放到同域或不同域中尝试。

  但该脚本也有不完美的地方,就是如果iframe页面中有脚本进行操作,改变了iframe页面的高度,父层的页面的iframe的高度无法自动适应,也就只能实现浏览器初次载入能成功获取iframe的高度和加载高度,但在firame中的操作时父层无法实时的适应高度,所以还是有改进的地方的,以后将继续完善。

  之前看到过地址栏传参和页面中转的办法也是可行的,所以应该还有其他的办法可以实现,具体日后有空再一并整理上来,如果你还有更好的办法,欢迎赐教。

  小弟JS也只是刚学,很多的不懂,发上此帖,只为备忘日后需要使用,感谢你的阅读。





发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

黄锦诚 腾讯微博
黄锦诚,专注前端、分享生活、记录工作、关于一切,这里有不一样的惊喜!

分类

Wopus主机优惠码

无觅相关文章插件,快速提升流量