如何设置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 相关文章推荐
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
jquery插件开发方法(初学者)
Feb 03 Javascript
JavaScript设计模式之抽象工厂模式介绍
Dec 28 Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 Javascript
jquery自定义右键菜单、全选、不连续选择
Mar 01 Javascript
微信JSAPI支付操作需要注意的细节
Jan 10 Javascript
vue-resourse将json数据输出实例
Mar 08 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
如何使用puppet替换文件中的string
Dec 06 Javascript
koa-router路由参数和前端路由的结合详解
May 19 Javascript
JS实现简单省市二级联动
Nov 27 Javascript
原生JavaScript实现简单五子棋游戏
Jun 28 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基础知识:类与对象(5) static
2006/12/13 PHP
php设计模式 Factory(工厂模式)
2011/06/26 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
php7性能提升的原因详解
2019/10/13 PHP
JavaScript实际应用:innerHTMl和确认提示的使用
2006/06/22 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
express的中间件cookieParser详解
2014/12/04 Javascript
浅谈JavaScript中的作用域和闭包问题
2015/07/07 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
javascript for循环性能测试示例
2019/08/07 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
ant design vue中表格指定格式渲染方式
2020/10/28 Javascript
Python写的贪吃蛇游戏例子
2014/06/16 Python
Python入门篇之条件、循环
2014/10/17 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
关于Tensorflow中的tf.train.batch函数的使用
2018/04/24 Python
对python判断是否回文数的实例详解
2019/02/08 Python
详解python的argpare和click模块小结
2019/03/31 Python
Django和Flask框架优缺点对比
2019/10/24 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
科技开发中心办公室主任岗位责任制
2014/02/10 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
读书笔记怎么写
2015/07/01 职场文书
2019公司管理制度
2019/04/19 职场文书