iframe自适应宽度与高度(兼容多个浏览器)

发布时间:2020-08-27编辑:脚本学堂
本文介绍下,iframe自适应宽度与高度的一段代码,可以兼容多浏览器,有需要的朋友参考下吧。

代码如下:

复制代码 代码示例:
<script language="javascript">
/**
 * iframe自适应宽度与高度
 * edit www.jb200.com
*/
var temp_iframe
var content = document.getElementById('right'); //id为 right的DOM容器中,进行创建iframe和宽高自适应
var c = 0;
function append(filename)
{
var the_iframe = "helpfile" + c;
temp_iframe = document.createElement("iframe");
temp_iframe.src = filename;
temp_iframe.scrolling = "no";
temp_iframe.setAttribute("frameborder", "0");
temp_iframe.id = the_iframe;
temp_iframe.name = the_iframe;
scroll(0, 0);
content.innerHTML = "";
content.appendChild(temp_iframe);
if (document.all)
{
temp_iframe.attachEvent('onload', function()
{
temp_iframe.setAttribute("width", window.frames[the_iframe].document.body.scrollWidth); //自适应宽
temp_iframe.setAttribute("height", window.frames[the_iframe].document.body.scrollHeight); //自适应高
});
}
else
{
temp_iframe.addEventListener('load', function()
{
temp_iframe.setAttribute("width", window.frames[the_iframe].document.body.scrollWidth);
temp_iframe.setAttribute("height", window.frames[the_iframe].document.body.scrollHeight);
}, false);
}
c++;
return false;
}
/*调用方法
把此脚本另存为脚本文件:iframe.js,然后再前台页面中调用:
<a href="index.html" onclick="return append('xxxx.html')" class="li1">
<div id="right"></div>
<script type="text/javascript" src="iframe.js"></script>
或去掉脚本中最后的 return false,前台:
<a href="javascript:append('favorite/Favorites.html')" class="li1">
<div id="right"></div>
<script type="text/javascript" src="iframe.js"></script>
*/
</script>

可能会有些不足,欢迎大家纠正与补充。实现iframe高度自适应的方法,不止此一法,欢迎大家分享与交流。