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 相关文章推荐
文字幻灯片
Jun 26 Javascript
用prototype实现的简单小巧的多级联动菜单
Mar 24 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
详解JavaScript的内置对象
Dec 07 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
Node.js自定义实现文件路由功能
Sep 22 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
浅谈Vue-cli 命令行工具分析
Nov 22 Javascript
微信小程序解析富文本过程详解
Jul 13 Javascript
原生JS实现留言板
Mar 26 Javascript
js中延迟加载和预加载的具体使用
Jan 14 Javascript
手写Spirit防抖函数underscore和节流函数lodash
Mar 22 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
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
Smarty环境配置与使用入门教程
2016/05/11 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
PHP 传输会话curl函数的实例详解
2017/09/12 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
Aster vs KG BO3 第三场2.18
2021/03/10 DOTA
Prototype使用指南之range.js
2007/01/10 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
Cordova(ionic)项目实现双击返回键退出应用
2019/09/17 Javascript
JS XMLHttpRequest原理与使用方法深入详解
2020/04/30 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
Python flask路由间传递变量实例详解
2020/06/03 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
农场厂长岗位职责
2013/12/28 职场文书
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
我的动漫时代的创业计划书范文
2014/01/27 职场文书
汽车维修工岗位职责
2014/02/12 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
幼儿园植树节活动总结
2014/07/04 职场文书
研讨会通知
2015/04/27 职场文书
教师素质教育心得体会
2016/01/19 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书
用python画城市轮播地图
2021/05/28 Python
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android