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 判断字符串是否为数字的简单方法
Jul 25 Javascript
解析window.open的使用方法总结
Jun 19 Javascript
javascript验证上传文件的类型限制必须为某些格式
Nov 14 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
浅谈javascript中字符串String与数组Array
Dec 31 Javascript
Yarn的安装与使用详细介绍
Oct 25 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
web前端vue之CSS过渡效果示例
Jan 10 Javascript
Vue导出页面为PDF格式的实现思路
Jul 31 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 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调用Google translate_tts api实现代码
2013/08/07 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
javascript一些实用技巧小结
2011/03/18 Javascript
jQuery动态添加的元素绑定事件处理函数代码
2011/08/02 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
使用js实现数据格式化
2014/12/03 Javascript
jQuery滚动条插件nanoscroller使用指南
2015/04/21 Javascript
基于jquery实现瀑布流布局
2020/06/28 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
js实现鼠标点击页面弹出自定义文字效果
2019/12/24 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
[01:32]完美世界DOTA2联赛10月29日精彩集锦
2020/10/30 DOTA
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
python实现批量转换图片为黑白
2020/06/16 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
招商业务员岗位职责
2013/12/16 职场文书
规范化管理年活动总结
2014/08/29 职场文书
股东出资证明书范例
2014/10/04 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
南湾猴岛导游词
2015/02/09 职场文书
2016教师节问候语
2015/11/10 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书