iframe自适应宽度、高度 ie6 7 8，firefox 3.86下测试通过

iframe自适应宽度、高度 ie6 7 8，firefox 3.86下测试通过_javascript技巧

php中文网

发布： 2016-05-16 18:22:21

原创

1601人浏览过

废话不多说，贴上代码，也算是自己的一个代码存储。

爱改写

AI写作和改写润色工具

查看详情

复制代码代码如下:

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,然后再前台页面中调用：
------------------------------------------------------------------------

------------------------------------------------------------------------
或者去掉脚本中最后的 return false，前台：
------------------------------------------------------------------------

------------------------------------------------------------------------
*/

嘿嘿，其中，最后设置自适应宽高的，其实可以提出来成为一个函数来调用。
这个我没去那么做，有看到文章的朋友，可自行封装。

其中，还有一些不太方便的，比如我每次建立的iframe必须不同的名字和id，即时删除原来已经创建的也不行……
还是希望大家多多指教吧。