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 获取url参数和script标签中获取url参数函数代码
Jan 22 Javascript
js获取元素在浏览器中的绝对位置
Jul 24 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
May 04 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
Dec 05 Javascript
Javascript模拟加速运动与减速运动代码分享
Dec 11 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 Javascript
JQUERY表单暂存功能插件分享
Feb 23 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 Javascript
es6数据变更同步到视图层的方法
Mar 04 Javascript
Vue的生命周期操作示例
Sep 17 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
vue 组件基础知识总结
Jan 26 Vue.js
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 异常处理实现代码
2009/03/10 PHP
在yii中新增一个用户验证的方法详解
2013/06/20 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
网页自动跳转代码收集
2009/09/27 Javascript
asp.net下利用js实现返回上一页的实现方法小集
2009/11/24 Javascript
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
使用JavaScript进行表单校验功能
2017/08/01 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
用pickle存储Python的原生对象方法
2017/04/28 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
Django框架验证码用法实例分析
2019/05/10 Python
Python数学形态学实例分析
2019/09/06 Python
python函数装饰器之带参数的函数和带参数的装饰器用法示例
2019/11/06 Python
python实现UDP协议下的文件传输
2020/03/20 Python
Selenium向iframe富文本框输入内容过程图解
2020/04/10 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
HTML5的新特性(1)
2016/03/03 HTML / CSS
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
节能环保标语
2014/06/12 职场文书
九九重阳节标语
2014/10/07 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
股东协议书范本2016
2016/03/21 职场文书
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android