在页面上使用iframe来动态加载页面内容是网页开发中比较常见的方法。在父页面中给定一个不带滚动条的iframe，然后对属性src指定一个可加载的页面，这样当父页面被访问的时候，子页面可以被自动加载。iframe的高度需要根据子页面的实际高度来进行调整。如果iframe的高度小于子页面的实际高度，超出的部分无法显示；相反，如果iframe的高度过高，则页面上会出现大量的空白区域。我们可以通过属性或者CSS来设置iframe的高度，当不确定子页面内容的高度时，也可以通过脚本来进行动态指定。但是如果子页面不在同一域中怎么办？这时候脚本没有办法获取到子页面的高度，存在JavaScript跨域的问题！

　　如题所述，本文在介绍可用方法的同时，也向大家询问除下文列出来的方法之外是否还有其它方法可寻？

　　通过属性或CSS来设置iframe的高度这里就不再具体介绍了。首先来看看如何通过脚本进行设置。

function ChangeFrameHeight(id) {

    var count = 1;

    (function() {

    var frm = document.getElementById(id);

    var subWeb = document.frames ? document.frames[id].document : frm.contentDocument;

        if (subWeb != null) {

            var height = Math.max(subWeb.body.scrollHeight, subWeb.documentElement.scrollHeight);

            frm.height = height;

        }

        if (count < 3) {

            count = count + 1;

            window.setTimeout(arguments.callee, 2000);

        }

    })();

}

　　假设iframe子页面和父页面都在同一域内，通过该脚本可以对给定id的iframe高度进行动态调整。为了防止父页面在子页面之前加载完成，该函数会每隔2秒重新执行一次，一共执行3次。极端情况下子页面的加载速度会慢于父页面，可适当对执行次数和时间做调整。

<iframe frameborder="0" width="450"  marginheight="0" marginwidth="0" scrolling="no" id="frm1" name="frm1" src="abc.html" onload="ChangeFrameHeight('frm1')"></iframe>

　　如果遇到子页面跨域的问题，可通过HTML5的postMessage来实现，但前提是子页面需要主动向父页面发送信息。下面是子页面部分：

<!DOCTYPE html>

<head>

</head>

<body onload="parent.postMessage(document.body.scrollHeight, 'http://target.domain.com');">

  <h3>Got post?</h3>

  <p>Lots of stuff here which will be inside the iframe.</p>

</body>

</html>

　　在父页面中获取到子页面传递过来的信息，然后对iframe的高度进行调整。

<script type="text/javascript">

  function resizeCrossDomainIframe(id, other_domain) {

    var iframe = document.getElementById(id);

    window.addEventListener('message', function(event) {

      if (event.origin !== other_domain) return; // only accept messages from the specified domain

      if (isNaN(event.data)) return; // only accept something which can be parsed as a number

      var height = parseInt(event.data) + 32; // add some extra height to avoid scrollbar

      iframe.height = height + "px";

    }, false);

  }

</script>

<iframe src='abc.html' id="frm1" onload="resizeCrossDomainIframe('frm1', 'http://example.com');">

</iframe>

　　有关如何使用HTML5的postMessage()方法可以查看这篇文章http://dev.w3.org/html5/postmsg/#web-messaging

　　但是在大多数情况下，iframe中所引用的子页面除了和父页面不在同一域之外，我们可能根本无法对子页面进行任何操作，或者说子页面根本没有提供Corss-document messaging功能。在这种情况下，通过postMessage()方法也无法获取到子页面的任何信息。由于无法和子页面进行任何交互，也就没有办法得知子页面的document对象，从未无法根据子页面的实际高度来调整父页面iframe的height属性了。

　　目前没有其它实际有效的方法来处理上面遇到的问题。默认情况下可以给iframe指定一个比较大的高度，这样假设所引用的子页面内容不会超出范围，除了在页面上会留下部分空白区域外，内容显示基本不会有问题。

　　那是否还存在其它比较有效的解决方法呢？期待！

如何设置iframe高度自适应，在跨域的情况下能做到吗？的更多相关文章

  1. iframe高度自适应（同域）

    今天解决了iframe高度自适应的问题,不过这只是同域下的页面嵌入,以下是代码: function SetCwinHeight(){ var iframeid = document.getElemen ...

  2. 设置iframe高度自适应屏幕高度

    写在前面: 最近在搭建项目前台页面框子的时候,把iframe设置成了固定的高度,导致不同的电脑尺寸访问的时候,高度差异较大,故查了下,将iframe设置成自动适应屏幕高度的方式,这里记录下. 还是直接 ...

  3. [转载]跨域iframe高度自适应

    场景: 经常会有这样的需求,跟外部合作伙伴合作,要嵌入别人的页面,这时候就需要高度自适应了,在这种跨域的情况下如何解决呢? 解决: 在iframe(合作伙伴的页面,称为P页面)中创建一个隐藏的ifra ...

  4. iframe中子父页面跨域通讯

    目录 #跨域发送信息 #跨域接收信息 #示例Demo 在非跨域的情况下,iframe中的子父页面可以很方便的通讯,但是在跨域的情况下,只能通过window.postMessage()方法来向其他页面发 ...

  5. 完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】

    Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应,这一点让很多 ...

  6. 跨域iframe高度自适应(兼容IE/FF/OP/Chrome)

    采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...

  7. 跨域iframe高度自适应（兼容IE/FF/OP/Chrome）

    采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...

  8. CSS完美实现iframe高度自适应（支持跨域）

    Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的"BUG"就是iframe的高度无法自 ...

  9. Iframe高度自适应（兼容IEFirefox、同域跨域）

    在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...

随机推荐

  1. jQuery触发<a>标签的点击事件无效

    <a id="workFrame" href="pages/work.html" target="FrameBox">首页< ...

  2. html--第一章 基础知识总结

    1--<body bgcolor="red">背景颜色 2--<body backgroud＝"back-ground.gif">  背 ...

  3. POJ1201 区间

    题目大意: 给定n个整数区间[ai,bi]和n个整数ci,求一个最小集合Z,满足|Z∩[ai,bi]|>=ci(Z里边在闭区间[ai,bi]的个数不小于ci). 多组数据: n(1<=n& ...

  4. dojo 加载Json数据

    1.今天研究了dojo datagrid加载WebService后台传上来的数据.研究来研究去发现他不是很难.用谷歌多调试一下就好了. 2.看很多例子,这个例子能够更好的帮我解决问题:https:// ...

  5. Oracle相关账户几个语句

    Oracle安装完成后,在“开始”里找到SQL Plus运行,要求输入帐号和密码,用system/密码连接. 1.Oracle里有一个默认的scott账户密码tiger,用该账户连接: CONN 用户 ...

  6. 修改navigationbar右侧按钮离屏幕边缘位置

    先上代码 UIButton *settingBtn = [Utils creatCustomButtonWithFrame:CGRectMake(, , , ) btnTitle: titleColo ...

  7. mfc控件——list control的使用

    [前话] 编译原理的第一个实验——词法分析器验收时,老师要求最后的结果用GUI的形式表现出来.想想确实,黑白的控制台应用程序界面在用户操作时的确不如GUI 友好.GUI界面也算是大势所趋.我现在掌握三 ...

  8. 如何将windows server 2008R2打造成桌面系统

    >在工作中有没有遇到这样的情况,因某些应用需要使用到服务器版系统,为了方便就将自己的机器安装成服务器版,这样一来客户版系统的易用性和更好的体验就不能用了,有木有--呵呵,下面以windows s ...

  9. AIX 开机启动网络服务配置

    aix7 administrator An administrator notices that the ntp group subsystem is not starting up at boot ...

  10. 解Tom大叔出的Javascript题目

    原文参考,http://www.cnblogs.com/TomXu/archive/2012/02/10/2342098.html Tom大叔的博客深入理解Javascript系列真是我们学习Java ...