如何设置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实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 Javascript
浅谈jQuery.easyui的datebox格式化时间
Jun 25 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
Dec 28 Javascript
jQuery ajax应用总结
Jun 02 Javascript
关于Javascript回调函数的一个妙用
Aug 29 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
浅谈node中的cluster集群
Jun 02 Javascript
react中实现搜索结果中关键词高亮显示
Jul 31 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
Sep 14 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
网络资源
2006/10/09 PHP
php学习笔记(三)操作符与控制结构
2011/08/06 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
PhpStorm+xdebug+postman调试技巧分享
2020/09/15 PHP
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
js取模(求余数)隔行变色
2014/05/15 Javascript
js对象基础实例分析
2015/01/13 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
2016/06/01 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
React路由鉴权的实现方法
2019/09/05 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
Python JSON编解码方式原理详解
2020/01/20 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
Selenium基于PIL实现拼接滚动截图
2020/04/10 Python
解决Jupyter Notebook开始菜单栏Anaconda下消失的问题
2020/04/13 Python
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
教育局长自荐信范文
2013/12/22 职场文书
安全月活动总结
2014/05/05 职场文书
Django分页器的用法你都了解吗
2021/05/26 Python
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python