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变量函数浅析
Sep 02 Javascript
javascript延时加载之defer测试
Dec 28 Javascript
php与js的区别是什么
Aug 05 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
使用VS开发 Node.js指南
Jan 06 Javascript
jQuery解决input超多的表单提交
Aug 10 Javascript
解析Vue2.0双向绑定实现原理
Feb 23 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 Javascript
Angular2 自定义表单验证器的实现方法
Dec 14 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
Node.js 中如何收集和解析命令行参数
Jan 08 Javascript
JavaScript中时间格式化新思路toLocaleString()
Nov 07 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
用PHP4访问Oracle815
2006/10/09 PHP
聊天室php&amp;mysql(一)
2006/10/09 PHP
用PHP生成html分页列表的代码
2007/03/18 PHP
在php MYSQL中插入当前时间
2008/04/06 PHP
利用phpExcel实现Excel数据的导入导出(全步骤详细解析)
2013/11/26 PHP
php 类自动载入的方法
2015/06/03 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
今天是星期几的4种JS代码写法
2013/09/17 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
2015/10/24 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
vue+element UI实现树形表格带复选框的示例代码
2019/04/16 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
vue实现下载文件流完整前后端代码
2020/11/17 Vue.js
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
Python实现处理管道的方法
2015/06/04 Python
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
学术会议欢迎词
2014/01/09 职场文书
党员公开承诺书内容
2014/05/20 职场文书
环境科学专业教师求职信
2014/07/12 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
服务整改报告
2014/11/06 职场文书
2014年绩效考核工作总结
2014/12/11 职场文书
个人思想政治总结
2015/03/05 职场文书
法律进社区活动总结
2015/05/07 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
宾馆客房管理制度
2015/08/06 职场文书
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python