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


Posted in Javascript onJuly 29, 2010

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

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,即时删除原来已经创建的也不行……
还是希望大家多多指教吧。

Javascript 相关文章推荐
JavaScript中this关键字使用方法详解
Mar 08 Javascript
dojo学习第一天 Tab选项卡 实现
Aug 28 Javascript
JavaScript代码复用模式实例分析
Dec 02 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
Jan 25 Javascript
微信小程序 触控事件详细介绍
Oct 17 Javascript
微信小程序开发教程-手势解锁实例
Jan 06 Javascript
原生js实现吸顶效果
Mar 13 Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 Javascript
ionic2中使用自动生成器的方法
Mar 04 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
微信小程序文字显示换行问题
Jul 28 Javascript
jquery中对表单的基本操作代码
Jul 29 #Javascript
jquery下利用jsonp跨域访问实现方法
Jul 29 #Javascript
jquery-easyui关闭tab自动切换到前一个tab
Jul 29 #Javascript
jquery 图片轮换效果
Jul 29 #Javascript
jQuery的写法不同导致的兼容性问题的解决方法
Jul 29 #Javascript
基于jQuery制作迷你背词汇工具
Jul 27 #Javascript
IE之动态添加DOM节点触发window.resize事件
Jul 27 #Javascript
You might like
PHP下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
zf框架的校验器使用使用示例(自定义校验器和校验器链)
2014/03/13 PHP
php的4种常见运行方式
2015/03/20 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
不一样的文字闪烁 轮番闪烁
2009/11/11 Javascript
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
分享十三个最佳JavaScript数据网格库
2017/04/07 Javascript
Vuejs实现购物车功能
2017/11/05 Javascript
jQuery实现页码跳转式动态数据分页
2017/12/31 jQuery
Vue如何实现响应式系统
2018/07/11 Javascript
详解Vue结合后台的列表增删改案例
2018/08/21 Javascript
微信小程序实现简单评论功能
2018/11/28 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
解决c++调用python中文乱码问题
2020/07/29 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
纽约海:Sea New York
2018/11/04 全球购物
银行职员自我鉴定
2014/04/20 职场文书
环保标语口号
2014/06/13 职场文书
四十九个javascript小知识实用技巧
2021/11/20 Javascript
浅谈如何保证Mysql主从一致
2022/03/13 MySQL