iframe 自适应高度[在IE6 IE7 FF下测试通过]
更新时间：2009年04月13日 10:41:45 作者：
有时候我们需要让我们的iframe自动适应高度，但多浏览器兼容性不好，大家不妨试下这个。
第一种方法:
<script type="text/javascript" language="javascript">
<!--
//调整 PageContent 的高度
function TuneHeight() {
var frm = document.getElementById("content01");
var subWeb = document.frames ? document.frames["content01"].document : frm.contentDocument;
if(frm != null && subWeb != null) {
frm.height = subWeb.body.scrollHeight;
}
}
//-->
</script>
<iframe id="content01" name="content01" frameBorder=0 scrolling=no src="main.html" width="100%"onLoad="TuneHeight()" ></iframe>
第二种方法:
js code:
//iframe自适应高度[在IE6 IE7下测试通过]
function reSetIframe(){
var iframe = document.getElementById("iframeId");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
}catch (ex){}
}
html:
<iframe src="" id="weather" name="weather" width="278" onload="reSetIframe()" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" border="0" framespacing="0"> </iframe>
复制代码 代码如下:
<script type="text/javascript" language="javascript">
<!--
//调整 PageContent 的高度
function TuneHeight() {
var frm = document.getElementById("content01");
var subWeb = document.frames ? document.frames["content01"].document : frm.contentDocument;
if(frm != null && subWeb != null) {
frm.height = subWeb.body.scrollHeight;
}
}
//-->
</script>
<iframe id="content01" name="content01" frameBorder=0 scrolling=no src="main.html" width="100%"onLoad="TuneHeight()" ></iframe>
第二种方法:
js code:
复制代码 代码如下:
//iframe自适应高度[在IE6 IE7下测试通过]
function reSetIframe(){
var iframe = document.getElementById("iframeId");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
}catch (ex){}
}
html:
复制代码 代码如下:
<iframe src="" id="weather" name="weather" width="278" onload="reSetIframe()" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" border="0" framespacing="0"> </iframe>
相关文章
本文通过代码片段详细介绍了JavaScript中的拖拽功能和观察者模式（发布-订阅模式）的实现及其应用场景,拖拽功能允许用户通过鼠标移动元素,而观察者模式则定义了一种一对多的依赖关系,使得对象能够自动更新,感兴趣的朋友跟随小编一起看看吧2025-01-01
在javascript中申明变量使用的关键字都是var，这点与其他的编程语言不尽相同，但是javascript亦含有五种基本的数据类型（也可以说是简单数据类型），它们分别是：Undefined，Null，Boolean，Number和String。还含有一种复杂数据类型—Object。这里我们不谈复杂数据类型2015-08-08
主要是有些网站的图片调用是防盗链的但一般只是判断referer是不是自己网站，如果referer为空也会显示图片，所以有了下面的代码。2011-05-05
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
这篇文章介绍了JavaScript操作table,可以新增行和列并且隔一行换背景色代码，有需要的朋友可以参考一下2013-07-07
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型,下面这篇文章主要给大家介绍了如何通过一篇文章教你写出干净的JavaScript代码,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了Typescript3.9 常用新特性一览，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要给大家简单介绍了JavaScript声明变量名的语法规则，非常有助于大家学习javascript，有需要的小伙伴可以参考下。2015-07-07
最近在做项目的时候，遇到要保留小数点后N位的问题，经过一番思索，最终完成了，这里记录一下，下次需要直接就能拉出来用了2014-11-11
这篇文章主要给大家介绍了关于ECharts两种动画效果的相关资料,在做项目时当我们用到echarts图表时,大部分产品经理都会要求我们给图表加上一些动画效果,让页面看起来更加炫酷,需要的朋友可以参考下2023-07-07
JavaScript 使用Ckeditor+Ckfinder文件上传案例详解
这篇文章主要介绍了JavaScript 使用Ckeditor+Ckfinder文件上传案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-08-08
最新评论