在页面上使用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. [转载] Android逃逸技术汇编

    本文转载自: http://blogs.360.cn/360mobile/2016/10/24/android_escape/ 摘    要 传统逃逸技术涉及网络攻防和病毒分析两大领域,网络攻防领域涉 ...

  2. 退役？OR 继续

    今天突然想了好多.上次CB那么决绝的退役,还有其他的一些东西.觉得大家说的都挺对的.看待问题的方式不同,然后或多或少就变了.预备役的事情就是想能不能不让大家因为上不了场退役. 想起以前的自己那么坚决的 ...

  3. AFNetwork 作用和用法详解

    转自:http://www.cnblogs.com/mkai/p/5729685.html AFNetworking是一个轻量级的iOS网络通信类库.它建立在NSURLConnection和NSOpe ...

  4. linux中压缩与解压缩命令

    .tar 解包:tar xvf FileName.tar 打包:tar cvf FileName.tar DirName (注:tar是打包,不是压缩!) ——————————————— .gz 解压 ...

  5. AjaxControlToolkit MaskedEdit Unspecified error 未指定错误

    使用AjaxControlToolkit 里面的 MaskedEditValidator控件,IE里面在如下的js中出现未指定(Unspecified error)错误, if (document.a ...

  6. poj练习题的方法

    poj1010--邮票问题 DFSpoj1011--Sticks dfs + 剪枝poj1020--拼蛋糕poj1054--The Troublesome Frogpoj1062--昂贵的聘礼poj1 ...

  7. PoEdu - C++阶段班- Lesson02_C to C++

    1  原生bool类型 c++里面的bool类型才是真正原生的true和faul,比如常见的大写的"BOOL",它就不是原生的. 原生的与非原生的bool,它们的区别: 详细说下原 ...

  8. SQLServer 脚本测试

    最近在做大数据同步的工作.很少数据需要特殊清洗算法,每次测试,都测试全部数据,浪费时间,可以只测试那些特殊数据即可(切记).

  9. FMDB基本应用

    1.打开数据库 #import "ViewController.h" #import "FMDB.h" @interface ViewController () ...

  10. String 与 byte[]相互转换

    1. 从byte[]转换成string string result = System.Text.Encoding.UTF8.GetString(byteArray); 2.从string 转换成byt ...