`
齐晓威_518
  • 浏览: 606027 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

JQuery IFrame框架高度自适应(支持嵌套–兼容IE,ff,safafi,chrome)

 
阅读更多
在网上找了很多的iframe自适应高度的脚本,对浏览的的兼容性都不好。所以就想利用jquery强大的兼容性,写一个iframe自适应高度的脚本。
jquery很强大,代码很简单:
$("#iPersonalInfo").load(function() {
$(this).height($(this).contents().height());
})
有一点需要注意的,我也在调试的时候才发现的,耽误了不少时间。就是绑定事件必须在iframe加载完毕之前绑定,否则不会执行。
以下是jQuery,load事件的概述
在每一个匹配元素的load事件中绑定一个处理函数。
如果绑定给window对象,则会在所有内容加载后触发,包括窗口,框架,对象和图像。如果绑定在元素上,则当元素的内容加载完毕后触发。
注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件,因为jQuery会在所有DOM加载完成后再绑定load事件。

另外一种方法实现自适应iframe高度自适应
function adjustIFramesHeightOnLoad(iframe) {
var iframeHeight = Math.min(iframe.contentWindow.window.document.documentElement.scrollHeight, iframe.contentWindow.window.document.body.scrollHeight);
$(iframe).height(iframeHeight);
}


本人采用的是第二种方法,并根据嵌套的级数
如果嵌套子页面中具有选项卡,或动态切换信息,即初始化处于隐藏状态时,
需要根据当前子页面所处的嵌套级数,写一个JS函数,动态的获取最外层iframe计算高度函数
//仅用于二级嵌套IFRAME
if(null!=parent.document.getElementById(iframeName)  && "undefined"!=typeof(parent.document.getElementById(iframeName))){      window.parent.adjustIFramesHeightOnLoad();
}

//仅用于三级嵌套IFRAME
if(null!=parent.parent.document.getElementById("iframeName")  && "undefined"!=typeof(parent.parent.document.getElementById("iframeName"))){
window.parent.parent.adjustIFramesHeightOnLoad();
}
注意,嵌套的IFRAME有几级,就写几个函数,并加上parent,如果嵌套页面不存在选项卡切换,或隐藏与显示内容,则不需要定义,注意在触发事件处,调用函数
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics