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创建div 实现代码
Apr 27 Javascript
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
由Javascript实现的页面日历
Nov 04 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
Js注册协议倒计时的小例子
Jun 24 Javascript
jquery设置控件位置的方法
Aug 21 Javascript
JS应用正则表达式转换大小写示例
Sep 18 Javascript
jQuery插件简单实现方法
Jul 18 Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 Javascript
vue.js+Echarts开发图表放大缩小功能实例
Jun 09 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
Postman参数化实现过程及原理解析
Aug 13 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类中Static方法效率测试代码
2010/10/17 PHP
PHP两种快速排序算法实例
2015/02/15 PHP
PHP中使用array函数新建一个数组
2015/11/19 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
php的命名空间与自动加载实现方法
2019/08/25 PHP
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
2010/11/16 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
深入探秘jquery瀑布流的实现
2016/01/30 Javascript
基于JS实现数字+字母+中文的混合排序方法
2016/06/06 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
2016/07/14 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
基于vue1和vue2获取dom元素的方法
2018/03/17 Javascript
es6函数中的作用域实例分析
2020/04/18 Javascript
Python实现中一次读取多个值的方法
2018/04/22 Python
Python使用OpenCV进行标定
2018/05/08 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
Python3爬虫中pyspider的安装步骤
2020/07/29 Python
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
联想中国官方商城:Lenovo China
2017/10/18 全球购物
Vrbo英国:预订度假屋
2020/08/19 全球购物
new修饰符是起什么作用
2015/06/28 面试题
2014年上半年工作自我评价
2014/01/18 职场文书
模范教师事迹材料
2014/12/16 职场文书
五年级学生期末评语
2014/12/26 职场文书
财务出纳岗位职责
2015/03/31 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
现货白银电话营销话术
2015/05/29 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server
Android开发实现极为简单的QQ登录页面
2022/04/24 Java/Android