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

 更新时间:2010年07月29日 12:57:04   作者:  
近期需要一个iframe自适应高度的东西,在网上找了很多,都不能用……一看大体的日期都是大概 2008年前后的其他近期的基本都是以前的转载,所以只好自己动手了。
废话不多说,贴上代码,也算是自己的一个代码存储。
复制代码 代码如下:

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>
------------------------------------------------------------------------
*/

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

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

相关文章

  • js实现股票实时刷新数据案例

    js实现股票实时刷新数据案例

    下面小编就为大家带来一篇js实现股票实时刷新数据案例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • JavaScript使用Promise实现并发请求数限制

    JavaScript使用Promise实现并发请求数限制

    本文主要介绍了JavaScript使用Promise实现并发请求数限制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • 使用egg.js实现手机、验证码注册的项目实践

    使用egg.js实现手机、验证码注册的项目实践

    本文主要介绍了使用egg.js实现手机、验证码注册的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • js实现的Easy Tabs选项卡用法实例

    js实现的Easy Tabs选项卡用法实例

    这篇文章主要介绍了js实现的Easy Tabs选项卡用法,以完整实例形式较为详细的分析了JavaScript鼠标事件动态操作页面元素样式的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • JavaScript导出Excel实例详解

    JavaScript导出Excel实例详解

    这篇文章主要介绍了JavaScript导出Excel的方法,以实例形式详细分析了javascript将WEB页面导出为EXCEL文档的方法及相关的技巧说明,对于深入了解javascript编程原理有一定的借鉴价值,需要的朋友可以参考下
    2014-11-11
  • Bootstrap源码解读标签、徽章、缩略图和警示框(8)

    Bootstrap源码解读标签、徽章、缩略图和警示框(8)

    这篇文章主要源码解读了标签、徽章、缩略图和警示框,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • javascript:void(0)点击登录没反应怎么解决

    javascript:void(0)点击登录没反应怎么解决

    这篇文章给大家介绍javascript:void(0)点击登录没反应怎么解决,解决办法是巧用批处理解决IE不支持JavaScript等问题,需要的朋友参考下
    2015-11-11
  • 原生的html元素选择器类似jquery选择器

    原生的html元素选择器类似jquery选择器

    做前端,需要选择元素,下面是实现代码,一个原生的html元素选择器类似jquery选择器,很棒,很实用
    2014-10-10
  • 浅谈javascript中执行环境(作用域)与作用域链

    浅谈javascript中执行环境(作用域)与作用域链

    本文主要介绍了javascript中执行环境(作用域)与作用域链,并在文章结尾处做出了总结,感兴趣的朋友可以看下
    2016-12-12
  • 在localStorage中存储对象数组并读取的方法

    在localStorage中存储对象数组并读取的方法

    频繁ajax请求导致页面响应变慢,所以考虑将数据存储在window.storage中,这样只需请求一次ajax,接下来通过本文给大家介绍了在localStorage中存储对象数组并读取的方法,需要的朋友可以参考下
    2016-09-09

最新评论