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中遭遇级联表达式陷阱
Mar 08 Javascript
jquery判断checkbox(复选框)是否被选中的代码
Oct 20 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
浅析AngularJs HTTP响应拦截器
Dec 28 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
在Vue 中使用Typescript的示例代码
Sep 10 Javascript
QRCode.js二维码生成并能长按识别
Oct 16 Javascript
深入理解Puppeteer的入门教程和实践
Mar 05 Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 Javascript
JS 事件机制完整示例分析
Jan 15 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
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_init函数用法
2014/01/31 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
Yii 2.0如何使用页面缓存方法示例
2017/05/23 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
js字符编码函数区别分析
2008/06/05 Javascript
基于jquery的让页面控件不可用的实现代码
2010/04/27 Javascript
javascript设计模式 封装和信息隐藏(上)
2012/07/24 Javascript
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
javascript 数组操作详解
2015/01/29 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
购买大码女装:Lane Bryant
2016/09/07 全球购物
求职信结尾怎么写
2014/05/26 职场文书
运动会演讲稿100字
2014/08/25 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
单位综合评价意见
2015/06/05 职场文书
入党宣誓大会后的感想
2015/08/10 职场文书
导游词之安徽醉翁亭
2020/01/10 职场文书
JS数组去重详情
2021/11/07 Javascript
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs