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-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 Javascript
基于datagrid框架的查询
Apr 08 Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
微信小程序如何获取手机验证码
Nov 04 Javascript
vue实现带复选框的树形菜单
May 27 Javascript
微信小程序npm引入vant-weapp的踩坑记录
Aug 01 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
Oct 24 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
Nov 06 Javascript
javascript实现留言板功能
Feb 08 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
第十二节 类的自动加载 [12]
2006/10/09 PHP
用php的ob_start来生成静态页面的方法分析
2011/03/09 PHP
php进行支付宝开发中return_url和notify_url的区别分析
2014/12/22 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
Add a Table to a Word Document
2007/06/15 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
python中模块查找的原理与方法详解
2017/08/11 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
大学生创业计划书的用途
2014/01/08 职场文书
小学开学典礼主持词
2014/03/19 职场文书
中国梦演讲稿3分钟
2014/08/19 职场文书
十佳好少年事迹材料
2014/08/21 职场文书
离婚协议书范本
2015/01/26 职场文书
护士求职自荐信范文
2015/03/04 职场文书
机器人瓦力观后感
2015/06/12 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书
初中地理教学反思
2016/02/19 职场文书
编写python程序的90条建议
2021/04/14 Python
JavaScript 实现页面滚动动画
2021/04/24 Javascript
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫