如何设置iframe高度自适应，在跨域的情况下能做到吗？
在页面上使用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高度自适应，在跨域的情况下能做到吗？的更多相关文章
- iframe高度自适应（同域）
今天解决了iframe高度自适应的问题,不过这只是同域下的页面嵌入,以下是代码: function SetCwinHeight(){ var iframeid = document.getElemen ...
- 设置iframe高度自适应屏幕高度
写在前面: 最近在搭建项目前台页面框子的时候,把iframe设置成了固定的高度,导致不同的电脑尺寸访问的时候,高度差异较大,故查了下,将iframe设置成自动适应屏幕高度的方式,这里记录下. 还是直接 ...
- [转载]跨域iframe高度自适应
场景: 经常会有这样的需求,跟外部合作伙伴合作,要嵌入别人的页面,这时候就需要高度自适应了,在这种跨域的情况下如何解决呢? 解决: 在iframe(合作伙伴的页面,称为P页面)中创建一个隐藏的ifra ...
- iframe中子父页面跨域通讯
目录 #跨域发送信息 #跨域接收信息 #示例Demo 在非跨域的情况下,iframe中的子父页面可以很方便的通讯,但是在跨域的情况下,只能通过window.postMessage()方法来向其他页面发 ...
- 完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】
Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应,这一点让很多 ...
- 跨域iframe高度自适应(兼容IE/FF/OP/Chrome)
采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...
- 跨域iframe高度自适应（兼容IE/FF/OP/Chrome）
采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...
- CSS完美实现iframe高度自适应（支持跨域）
Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的"BUG"就是iframe的高度无法自 ...
- Iframe高度自适应（兼容IEFirefox、同域跨域）
在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...
随机推荐
- 使用 archetype插件创建maven目录结构
步骤一: 步骤二: 等待下载插件
- 通过反射向将EF的实体映射配置加入到实体模型中
public AdminDbContext() : base("MemberDbContext") { //不使用代理创建导航属性,避免WCF序列化错误 Configuration ...
- C# XML读写实例
一.使用System.Xml 实例:完成如下格式配置文件的读写操作: <?xml version="1.0" encoding="UTF-8"?> ...
- python-函数中定义可变参数
可变参数 在Python函数中,还可以定义可变参数.顾名思义,可变参数就是传入的参数个数是可变的,可以是1个.2个到任意个,还可以是0个. 我们以数学题为例子,给定一组数字a,b,c……,请计算a2 ...
- 【BZOJ2595】游览计划（状压DP，斯坦纳树）
题意:见题面(我发现自己真是越来越懒了) 有N*M的矩阵,每个格子有一个值a[i,j] 现要求将其中的K个点(称为关键点)用格子连接起来,取(i,j)的费用就是a[i,j] 求K点全部连通的最小花费以 ...
- /etc/hosts文件设置不对导致Jboss启动失败
Caused by: javax.management.MBeanRegistrationException: preRegister() failed: [ObjectName='jboss.rem ...
- 获取DataGridView中的的选中行
1. 获取DataGridView中的的选中行:http://blog.csdn.net/yiqijinbu/article/details/7734593 2.winform datagridvie ...
- sql语句 关于日期时间、类型转换的东西
(一) 1, select update_date, CONVERT(VARCHAR(30),update_date,111) jj ,CONVERT(VARCHAR(30),update_date, ...
- 【html/css】html/css命名规范
无论做什么,规则总是最重要的.无规矩不成方圆,有了规矩,我们才能有规可循,有则可依,人与人之间才能正常的交流交往. 人人都有自己的命名习惯,不过,代码是需要交流的,当有些命名习惯仅只自己能看懂,甚至自 ...
- Response、Request、QueryString，repeater添加，修改，删除数据
内置对象: Response对象:响应请求,Response对象用于动态响应客户端请示,控制发送给用户的信息,并将动态生成响应.Response.Write("<script>a ...