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 当前日期转化为中文的实现代码
May 13 Javascript
JavaScript随机排序(随即出牌)
Sep 17 Javascript
JavaScript代码复用模式实例分析
Dec 02 Javascript
图片img的src不变让浏览器重新加载实现方法
Mar 29 Javascript
jQuery下的动画处理总结
Oct 10 Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
学习使用bootstrap3栅格系统
Apr 12 Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 Javascript
Angularjs自定义指令实现分页插件(DEMO)
Sep 16 Javascript
JS+canvas画一个圆锥实例代码
Dec 13 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
JavaScript实现移动端带transition动画的轮播效果
Mar 24 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
神族 PROTOSS 概述
2020/03/14 星际争霸
require(),include(),require_once()和include_once()区别
2008/03/27 PHP
php 变量定义方法
2009/06/14 PHP
php MessagePack介绍
2013/10/06 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
Zend Framework教程之配置文件application.ini解析
2016/03/10 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
用Javascript实现UTF8编码转换成gb2312编码
2006/12/22 Javascript
javascript中的startWith和endWith的几种实现方法
2013/05/07 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
vue页面加载时的进度条功能(实例代码)
2020/01/13 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
python基础知识小结之集合
2015/11/25 Python
Python遍历numpy数组的实例
2018/04/04 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
Django配置跨域并开发测试接口
2020/11/04 Python
CSS3的颜色渐变效果的示例代码
2017/09/29 HTML / CSS
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
中专生自荐信
2013/10/12 职场文书
挂牌仪式主持词
2014/03/20 职场文书
委托证明书
2014/09/17 职场文书
酒店管理专业毕业生自我鉴定
2014/09/29 职场文书
写给医院的感谢信
2015/01/22 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
win10此电脑打不开怎么办 win10双击此电脑无响应的解决办法
2022/07/23 数码科技