如何设置iframe高度自适应在跨域情况下的可用方法


Posted in Javascript onSeptember 06, 2013

在页面上使用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指定一个比较大的高度,这样假设所引用的子页面内容不会超出范围,除了在页面上会留下部分空白区域外,内容显示基本不会有问题。

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

Javascript 相关文章推荐
js中的window.open返回object的错误的解决方法
Aug 15 Javascript
JQuery 在线引用及测试引用是否成功
Jun 24 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
Apr 03 Javascript
深入理解JavaScript中Ajax
Aug 02 Javascript
Webpack执行命令参数详解
Jun 17 Javascript
详解node.js 下载图片的 2 种方式
Mar 02 Javascript
js Array.slice的8种不同用法示例
Jul 10 Javascript
layui 上传图片 返回图片地址的方法
Sep 26 Javascript
Vue父子之间值传递的实例教程
Jul 02 Javascript
JS PHP字符串截取函数实现原理解析
Aug 29 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 Javascript
JQuery对id中含有特殊字符的转义处理示例
Sep 06 #Javascript
关于jQuery中.attr()和.prop()的问题探讨
Sep 06 #Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 #Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
Sep 06 #Javascript
jquery实现metro效果示例代码
Sep 06 #Javascript
JS去除数组重复值的五种不同方法
Sep 06 #Javascript
JavaScript判断密码强度(自写代码)
Sep 06 #Javascript
You might like
初次接触php抽象工厂模式(Elgg)
2010/03/21 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
php实现简单文件下载的方法
2015/01/30 PHP
PHP提高编程效率的20个要点
2015/09/23 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
如何实现动态删除javascript函数
2007/05/27 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
jQuery中toggle()函数的使用实例
2015/04/17 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
2017/01/15 Javascript
bootstrap组件之按钮式下拉菜单小结
2017/01/19 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
2019/04/10 Javascript
微信小程序实现音乐播放器
2019/11/20 Javascript
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
numpy中矩阵合并的实例
2018/06/15 Python
python入门:这篇文章带你直接学会python
2018/09/14 Python
利用Python将数值型特征进行离散化操作的方法
2018/11/06 Python
Python实现的调用C语言函数功能简单实例
2019/03/13 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
2019/08/20 HTML / CSS
会计毕业生自我鉴定
2013/11/04 职场文书
逃课上网检讨书
2014/02/20 职场文书
生日寄语大全
2014/04/08 职场文书
国企干部对照检查材料
2014/08/22 职场文书
2015年除四害工作总结
2015/07/23 职场文书