在网上找了很多的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,如果嵌套页面不存在选项卡切换,或隐藏与显示内容,则不需要定义,注意在触发事件处,调用函数
分享到:
相关推荐
用jquery实现iframe高度自适应实例代码完美兼容多数浏览器
很高兴,终于使用jquery实现了点击外部链接,更改iframe内容时,iframe的高度自适应问题。
jquery实现区块或链接横向无缝循环滚动,自适应宽度,可随意设置外容器的宽度。高度自适应,兼容IE,FF,CHROME.rar
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
jquery对iframe自适应高度插件是国外下载下来的。插件使用只要引用js文件就行,不用做任何别的操作完全自动化。
jquery----TextArea高度自适应
本插件支持一个页面多次使用,自动播放切换图片列表,具备图片预加载功能,重置图片宽度,可以自动适应图片的宽和高以适应指定的宽高,可以指定图片列表,指定切换... 飞飞图片宽高自适应的slide幻灯片切换jQuery插件
jQuery图片全屏滚动自适应浏览器分辨率宽度焦点图片滚动
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
网上查了好多用着都不行,自己搞定了:在包含iframe的页面中加入以下脚本,基本思想是在iframe加载内容后重新设置高度,下面代码尽在IE6中用过,没在其他浏览器中测试。
jQuery响应式与自适应代码案例,电脑端、平板端、手机端
jquery 100%自适应左右切换焦点图,兼容IE 6789及其它主流浏览器
jQuery仿新浪微博高度自适应滚动代码是一款调用方式很简单的自适应无缓动滚动代码。
jQuery自动适应高度布局代码是一款设置height页面自动适应高度布局效果代码。
jquery全屏图片切换自适应网页宽度的焦点图代码 jquery全屏图片切换自适应网页宽度的焦点图代码 jquery全屏图片切换自适应网页宽度的焦点图代码 jquery全屏图片切换自适应网页宽度的焦点图代码
jQuery.autoTextarea.js是基于jQuery实现的文本框插件,可以实现文本框内容输入的高度自适应功能,出品方:css88.com,学习jquery的童鞋来学习一下吧。
javascript原生和jquery库实现iframe自适应内容高度和宽度—推荐使用jQuery的代码! <iframe src=index....