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.post用法示例代码
Jan 03 Javascript
javascript实现获取浏览器版本、操作系统类型
Jan 29 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
jQuery事件绑定用法详解
Sep 08 Javascript
javascript九宫格图片随机打乱位置的实现方法
Mar 15 Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 Javascript
Vue实现导航栏点击当前标签变色功能
Aug 19 Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 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
11个PHP 分页脚本推荐
2011/08/15 PHP
php中fgetcsv()函数用法实例
2014/11/28 PHP
PHP中new static()与new self()的比较
2016/08/19 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
JS input 数字验证代码
2009/07/30 Javascript
javascript 年月日联动实现核心代码
2009/12/21 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
详细解密jsonp跨域请求
2015/04/15 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
2018/11/19 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
js验证账户名是否重复
2020/05/26 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
Python的lambda匿名函数的简单介绍
2013/04/25 Python
TensorFlow实现模型评估
2018/09/07 Python
django2.0扩展用户字段示例
2019/02/13 Python
Python3+Appium安装使用教程
2019/07/05 Python
django和vue实现数据交互的方法
2019/08/21 Python
python中enumerate() 与zip()函数的使用比较实例分析
2019/09/03 Python
python将logging模块封装成单独模块并实现动态切换Level方式
2020/05/12 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
你懂得怎么写自荐信吗?
2013/12/27 职场文书
爱护公共设施标语
2014/06/24 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
2014年平安夜寄语
2014/12/08 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书