您的位置：首页 > 运维架构

iFrame自适应高度（兼容IE、谷歌、火狐、搜狗、opera、safari）

2013-03-06 11:27 267 查看

直接上代码了：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>iframe自适应高度</title>

<scripttype="text/javascript">
var Sys = {};
var ua =navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie([\d.]+)/)) ? Sys.ie = s[1] :
(s =ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s =ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s =ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s =ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] :0;

if (Sys.opera || Sys.safari)
{
window.setInterval("reinitIframe()", 200);
}
function reinitIframe() //针对opera safari
{
var iframe = document.getElementByIdx_x_x_x("PandL");
try{
var bHeight =iframe.contentWindow.document.body.scrollHeight;
var dHeight =iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height =  height;
}catch (ex){}
}

function iframeAutoFit(iframeObj)
{
setTimeout(function()
{
if(!iframeObj)
return;
iframeObj.height=(iframeObj.Document?iframeObj.Document.body.scrollHeight:iframeObj.contentDocument.body.offsetHeight)+30;//这里+30是有目的的，比如ie下会少那么一些像素
},200)
}
</script>
</head>
<body>
<div>
<iframe src="index.html" width="100%"height="300" frameborder="0" scrolling="no"
name="PandL" id="PandL"onLoad="javascript:iframeAutoFit(this);"></iframe>
</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航