您的位置:首页 > Web前端 > JQuery

jQuery js iframe 自适应高度

2012-01-04 12:47 337 查看
方法一、jQuery

<script type="text/javascript">
<!--
$(function(){
$("#workArea").load(function(){
var height = $(this).contents().find("#box").height() + 40;
//这样给以一个最小高度
$(this).height( height < 400 ? 400 : height );
});

});
-->
</script>


方法二:js

function dyniframesize(iframename) {
var pTar = null;
if (document.getElementById){
pTar = document.getElementById(iframename);
}
else{
eval('pTar = ' + iframename + ';');
}
if (pTar && !window.opera){
pTar.style.display="block";
if (pTar.Document  && pTar.Document.body.scrollHeight){
pTar.height = pTar.Document.body.scrollHeight;
}
}
}
//window.onload =dyniframesize("leftFrame");


另转——————————————————————未验证

发表于
2011 年 04 月 22 日 由
前端开发-武方博

在网上找了很多的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
iframe
Height = Math.min(iframe.contentWindow.window.document.documentElement.scrollHeight, iframe.contentWindow.window.document.body.scrollHeight);

$(iframe).height(iframeHeight);

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: