在页面上使用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. [转][MSSQL]SQL Server 2008 记住密码功能

    本文转自:http://zhidao.baidu.com/link?url=V_laNOvutMin0kU3DUaMhLSFAYfgtz2IoEAjh8grNVPOZLpd8Pudb4iqZl88Tn ...

  2. Sum All Odd Fibonacci Numbers

    function sumFibs(num) { //return num; var arr = [1,1]; var add = 2; while(true){ var item = arr[0] + ...

  3. 如何在spark中读写cassandra数据 ---- 分布式计算框架spark学习之六

    由于预处理的数据都存储在cassandra里面,所以想要用spark进行数据分析的话,需要读取cassandra数据,并把分析结果也一并存回到cassandra:因此需要研究一下spark如何读写ca ...

  4. js获取文件大小

    var file = urlBox.doc.activeElement.files[0]||urlBox.files[0] ; if (file) { var fileSize = 0; if (fi ...

  5. 深入浅出Symfony2 - 如何提高网站响应速度 [转]

    简介 Symfony2是一个基于PHP语言的Web开发框架,有着开发速度快.性能高等特点.但Symfony2的学习曲线也比较陡峭,没有经验的初学者往往需要一些练习才能掌握其特性.相对其他框架,Symf ...

  6. Base64编码通过URL传值的问题

    base64 编码中使用了 +号,+号通过URL传递时会变成空格,因为编码的方式的问题前台使用:Ext.encode(title_text.getValue().replace(/\+/g, '%2B ...

  7. nginx 从vagant挂载目录中加载nginx.conf配置进行开机启动

    nginx从vagrant挂载目录中读取配置启动,将nginx加入开机启动项!开机启动的时候nginx会因为加载不了配置导致启动失败! 原因是开机启动nginx服务在vagrant挂载之前,导致无法正 ...

  8. 使用Notepad++编码编译时报错(已解决?)

    使用Notepad++编码编译时报错(已解决?) 使用Notepad++编码,编译的时候经常会报错,说什么GBK编码啥啥啥~~~但同样的编码用ECLIPSE就没有问题.再有,用记事本把他保存成ANSI ...

  9. springmvc controller junit 测试

    第一次搭建SSM框架,整合SpringMVC完成后进行Controller测试,找资料并解决问题. 下图是我的完整目录: 1 建立UserController类 代码清单 1-1:UserContro ...

  10. mono for android代码记录1 WebClient Post数据到Nopcommerce(post数据到MVC5)

    WebClient Post数据到Nopcommerce(post数据到MVC5) 注意事项 1.把[ValidateAntiForgeryToken]注释掉,以后再处理CSRF攻击.现在学习先不理 ...