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 学习笔记 选择器之一
Jul 23 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
jQuery的live()方法对hover事件的处理示例
Feb 27 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
Feb 28 Javascript
APP中javascript+css3实现下拉刷新效果
Jan 27 Javascript
详解Javascript继承的实现
Mar 25 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
Jun 15 Javascript
JS原型链 详解及示例代码
Sep 06 Javascript
Javascript 实现匿名递归的实例代码
May 25 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 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
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
老生常谈PHP 文件写入和读取(必看篇)
2017/05/22 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
使用CSS3实现字体颜色渐变的实现
2021/03/09 HTML / CSS
把字符串按照特定的字母顺序进行排序的js代码
2014/01/28 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
Python设计模式之观察者模式实例
2014/04/26 Python
Python转换HTML到Text纯文本的方法
2015/01/15 Python
用Python进行基础的函数式编程的教程
2015/03/31 Python
Python脚本实现格式化css文件
2015/04/08 Python
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
一步步教你用Python实现2048小游戏
2017/01/19 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
解决pyPdf和pyPdf2在合并pdf时出现异常的问题
2020/04/03 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
应届生会计电算化求职信
2013/10/03 职场文书
优秀广告词大全
2014/03/19 职场文书
幼儿园新年寄语
2014/04/03 职场文书
图书馆志愿者活动总结
2014/06/27 职场文书
班级体育活动总结
2014/07/05 职场文书
讲党性心得体会
2014/09/03 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
限期整改通知书
2015/04/22 职场文书
小学生读书笔记
2015/07/01 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL