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 相关文章推荐
预加载css或javascript的js代码
Apr 23 Javascript
也说JavaScript中String类的replace函数
Sep 22 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
JS实现让访问者自助选择网页文字颜色的方法
Feb 24 Javascript
JavaScript判断数组是否包含指定元素的方法
Jul 01 Javascript
JavaScript对数组进行随机重排的方法
Jul 22 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
React复制到剪贴板的示例代码
Aug 22 Javascript
JS获取当前地理位置的方法
Oct 25 Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
Vue基于iview table展示图片实现点击放大
Aug 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
我的群发邮件程序
2006/10/09 PHP
php仿discuz分页效果代码
2008/10/02 PHP
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
ThinkPHP数据操作方法总结
2015/09/28 PHP
php 实现Hash表功能实例详解
2016/11/29 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
nodejs简单实现中英文翻译
2015/05/04 NodeJs
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
JS实现六边形3D拖拽翻转效果的方法
2016/09/11 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
2019/05/10 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
Python 实现某个功能每隔一段时间被执行一次的功能方法
2018/10/14 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
Python整数对象实现原理详解
2019/07/01 Python
Python autoescape标签用法解析
2020/01/17 Python
python实现坦克大战
2020/04/24 Python
Pytest如何使用skip跳过执行测试
2020/08/13 Python
python3判断IP地址的方法
2021/03/04 Python
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
幼儿园庆六一游园活动方案
2014/01/29 职场文书
三好生演讲稿
2014/09/12 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
2015年安全生产月工作总结
2015/07/27 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
电力培训学习心得体会
2016/01/11 职场文书