兼容firefox的iframe高度自适应代码

最新推荐文章于 2021-03-12 18:11:20 发布

转载最新推荐文章于 2021-03-12 18:11:20 发布 · 52 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/good10000/p/4720570.html

本文提供了一段实用的JavaScript代码，用于实现iframe的高度自适应功能，确保页面加载时iframe区域能正确调整大小，避免显示不全或溢出的问题。关键点包括：通过检查iframe内的内容高度或滚动条高度来设置iframe自身的高度，确保跨页面元素能够完美融合。

网上关于iframe高度自适应的代码有很多，但比较杂乱，本文根据实用性整理了以下代码：

JavaScript部分：

折叠JavaScript Code复制内容到剪贴板

<script type="text/javascript"> 
function SetCwinHeight(iframeObj){ 
if (document.getElementById){ 
if (iframeObj){ 
if (iframeObj.contentDocument && iframeObj.contentDocument.body.offsetHeight){ 
iframeObj.height = iframeObj.contentDocument.body.offsetHeight; 
} else if (document.frames[iframeObj.name].document && document.frames[iframeObj.name].document.body.scrollHeight){ iframeObj.height = document.frames[iframeObj.name].document.body.scrollHeight;   
} 
} 
} 
} 
</script>

html部分：

折叠XML/HTML Code复制内容到剪贴板

<iframe name="frameContent" src="*" frameborder="0" width="100%" onload="SetCwinHeight(this)"></iframe>

标记*号的地方填入iframe页面的地址。需要注意的是，src地址必须是在同一网站下，否则会出现“权限被禁止”的错误。

转载于:https://www.cnblogs.com/good10000/p/4720570.html