如何设置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 相关文章推荐
Windows Live的@live.com域名注册漏洞 利用代码
Dec 27 Javascript
使用jquery实现div的tab切换实例代码
May 27 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 Javascript
javascript实现实时输出当前的时间
Apr 27 Javascript
javascript实现根据3原色制作颜色选择器的方法
Jul 17 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
Feb 19 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 Javascript
js使用Promise实现简单的Ajax缓存
Nov 14 Javascript
vue form check 表单验证的实现代码
Dec 09 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 Javascript
koa-router路由参数和前端路由的结合详解
May 19 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
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
php ajax异步读取rss文档数据
2016/03/29 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
简单JS代码压缩器
2006/10/12 Javascript
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
HTML颜色选择器实现代码
2010/11/23 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
2011/08/23 Javascript
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
js仿淘宝和百度文库的评分功能
2016/05/15 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
jQuery版AJAX简易封装代码
2016/09/14 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
2017/03/01 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
2018/12/07 Javascript
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
python实现DES加密解密方法实例详解
2015/06/30 Python
代码分析Python地图坐标转换
2018/02/08 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
在Python中增加和插入元素的示例
2018/11/01 Python
python实现远程控制电脑
2019/05/23 Python
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
2016/04/26 HTML / CSS
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
海滩咖啡馆:Beach Cafe
2018/02/02 全球购物
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
介绍一下Linux文件的记录形式
2012/04/18 面试题
心得体会怎么写
2013/12/30 职场文书
办公自动化专业大学生职业规划书
2014/03/06 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
人力资源求职信
2014/05/25 职场文书
鲁迅故里导游词
2015/02/05 职场文书
物业保洁员岗位职责
2015/02/13 职场文书