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 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
jquery.post用法示例代码
Jan 03 Javascript
jquery插件validation实现验证身份证号等
Jun 04 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
less简单入门(CSS 预处理语言)
Mar 08 Javascript
Vue如何实现组件的源码解析
Jun 08 Javascript
微信小程序手机号码验证功能的实例代码
Aug 28 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
详解JavaScript中的函数、对象
Apr 01 Javascript
Javascript Dom元素获取和添加详解
Sep 24 Javascript
JavaScript实现拖动对话框效果的实现代码
Oct 12 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 转义使用详解
2013/07/15 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
PHP删除数组中指定值的元素常用方法实例分析【4种方法】
2018/08/21 PHP
PHP读取目录树的实现方法分析
2019/03/22 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
javascript 原型继承介绍
2011/08/30 Javascript
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
uploadify 3.0 详细使用说明
2012/06/18 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
理解javascript封装
2016/02/23 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
Angular2 之 路由与导航详细介绍
2017/05/26 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
JS身份证信息验证正则表达式
2017/06/12 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
vue-simple-uploader上传成功之后的response获取代码
2020/09/07 Javascript
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
2020/03/10 HTML / CSS
电子信息科学专业自荐信
2014/01/30 职场文书
2014年客房部工作总结
2014/11/22 职场文书
课程设计感想范文
2015/08/11 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
vue+iview实现手机号分段输入框
2022/03/25 Vue.js
使用Ajax实现进度条的绘制
2022/04/07 Javascript