在页面上使用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. JS常见问题

    语法错误 由于编程语言中的语法比自然语言的语法要严格得多,因此在编写脚本时对细节应倍加关注.例如,如果您本意是将字符串作为某个参数,但是在键入时忘了使用引号引起来,就会产生问题. 脚本解释顺序 对 J ...

  2. python第十二天-----RabbitMQ

    有一位小伙伴说让我去A站写博客可能会有很多人喜欢,真是搞不懂,北方哪里有卖萌?北方默认状态就是这么萌的!再者说了,这明明就是很专注于技术的博客嘛,能不能严肃点!知不知道什么叫帧? 学习到了数据库的相关 ...

  3. lr_convert_string_encoding（）转码函数

    例子:

  4. 《CSS3秘籍》（第三版）-读书笔记

    第3章 选择器:明确设置哪些样式 每个样式(或者规则)由两个主要部分组成:选择器是告诉浏览器要格式化什么内容:声明块则列出浏览器用来给选择器定义样式的格式化指令. 1.标签选择器:整体控制 标签选择器 ...

  5. Spring 4 官方文档学习（十二）View技术

    关键词:view technology.template.template engine.markup.内容较多,按需查用即可. 介绍 Thymeleaf Groovy Markup Template ...

  6. CardView的简单介绍

    CardView是Android5.0中的一个全新控件,本质上而言,CardView是一个增加了圆角和阴影效果的FrameLayout,没错它就是一个FrameLayout,一个布局.CardView ...

  7. RecycleView在eclipse的初体验

    在sdk中找到v7包 \sdk\extras\android\support\v7\recyclerview 导入工程 Import\Android\Existing Android Code Int ...

  8. java常用类

    String 字符串类 System 可得到系统信息 Runtime类 StringBuilder(StringBuffer)类 Thread 线程类 Math 与数学有关的工具类 Date 日期类( ...

  9. .net web获取自己的ip地址

    using System;using System.Text;using System.Web;using System.Text.RegularExpressions; namespace MxWe ...

  10. PHP中想过获取系统内置的所有常量吗？

    print_r(get_defined_constants(true)); OK!这样就可以了,赶紧去试试吧