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 相关文章推荐
jquery ready函数源代码研究
Dec 06 Javascript
JS中toFixed()方法引起的问题如何解决
Nov 20 Javascript
js jquery验证银行卡号信息正则学习
Jan 21 Javascript
JavaScript编程的10个实用小技巧
Apr 18 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
AngularJS 异步解决实现方法
Jun 12 Javascript
图片加载完成再执行事件的实例
Nov 16 Javascript
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
vue.js实现二级菜单效果
Oct 19 Javascript
详解vue beforeEach 死循环问题解决方法
Feb 25 Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 Javascript
js实现点击按钮随机生成背景颜色
Sep 05 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学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
2014/03/13 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
2014/10/16 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
jQuery的bind()方法使用详解
2015/07/15 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
vue移动端使用canvas签名的实现
2020/01/15 Javascript
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
windows 下python+numpy安装实用教程
2017/12/23 Python
查看python下OpenCV版本的方法
2018/08/03 Python
python与字符编码问题
2019/05/24 Python
python并发编程多进程 互斥锁原理解析
2019/08/20 Python
在vscode中配置python环境过程解析
2019/09/28 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
tensorflow 自定义损失函数示例代码
2020/02/05 Python
python时间日期操作方法实例小结
2020/02/06 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
Pycharm制作搞怪弹窗的实现代码
2021/02/19 Python
MySQL面试题
2014/01/12 面试题
高分子材料与工程专业个人求职信
2013/12/15 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
公务员年度考核登记表个人总结
2015/02/12 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书
springboot如何初始化执行sql语句
2021/06/22 Java/Android