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中filter(),not(),split()使用方法
Jul 06 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 Javascript
Google 地图API Map()构造器详解
Aug 06 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
Jul 03 Javascript
vue-router 源码之实现一个简单的 vue-router
Jul 02 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 Javascript
简单了解JavaScript作用域
Jul 31 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
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
PHP实现的函数重载功能示例
2018/08/03 PHP
PHP实现计算器小功能
2020/08/28 PHP
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
nodejs入门详解(多篇文章结合)
2012/03/07 NodeJs
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
jQuery插件简单学习实例教程
2016/07/01 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
深入浅出es6模板字符串
2017/08/26 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
浅谈pytorch和Numpy的区别以及相互转换方法
2018/07/26 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
介绍一下Linux中的链接
2016/05/28 面试题
实习生自我鉴定
2013/12/12 职场文书
文明生主要事迹
2014/05/25 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
小学教师个人总结
2015/02/05 职场文书
2015年团支部年度工作总结
2015/05/27 职场文书
主婚人致辞精选
2015/07/28 职场文书
煤矿安全生产工作总结
2015/08/13 职场文书
python开发实时可视化仪表盘的示例
2021/05/07 Python
一篇带你入门Java垃圾回收器
2021/06/16 Java/Android