脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → iframe 自适应高度

兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)

 更新时间：2009年11月04日 23:54:46   作者：  
iframe在ie8 、谷歌浏览器4.0和 firefox3.5.3均成功自适应高度.
小项目龙里中学多媒体教室管理系统中后台管理用到了iframe.由于要动态载入内容,所以需要iframe自适应内容页的高度.用谷歌搜索到很多答案,其中成功的是这段代码
复制代码 代码如下:

<script type="text/javascript">
function SetCwinHeight() {
var iframeid = document.getElementById("maincontent1"); //iframe id
if (document.getElementById) {
if (iframeid && !window.opera) {
if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight) {
iframeid.height = iframeid.contentDocument.body.offsetHeight;
} else if (iframeid.Document && iframeid.Document.body.scrollHeight) {
iframeid.height = iframeid.Document.body.scrollHeight;
}
}
}
}
</script>

iframe代码:
复制代码 代码如下:

<iframe style="z-index: 1; visibility: inherit; width: 100%;" name="maincontent1"
onload="Javascript:SetCwinHeight()" height="1" id="maincontent1" src="<%=ResolveClientUrl("~/message")%>"
marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe>

在IE8下成功实现自适应高度,但在谷歌浏览器高度只会增加,不会减少,也就是说,长高后就缩不回来.
那么各个浏览器的表现不太相同，单取哪个值都不对。但可以找到了一条规律，那就是取两个值得最大值可以兼容各浏览器。所以我们的主页面代码就要改造成这样了：
复制代码 代码如下:

function reinitIframe(){var iframe = document.getElementById("frame_content");
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){}
}
window.setInterval("reinitIframe()", 200);

这样子，基本解决了兼容性问题。顺便说下，不光绝对定位的层会影响到值，float也会导致两个值的差异。
如果你演示Demo后，会发现，除了IE，其他浏览器中，当层展开后再隐藏，取到的高度值还是维持在展开的高度303，而非隐藏回去的真正值184，就是说长高了之后缩不回去了。这个现象在不同被包含页面之间做切换也会发生，当从高的页面切换到矮页面的时候，取到的高度还是那个高的值。
可以归纳为，当iframe窗体高度高于文档实际高度的时候，高度取的是窗体高度，而当窗体高度低于实际文档高度时，取的是文档实际高度。因此，要想办法在同步高度之前把高度设置到一个比实际文档低的值。所以，在iframe的添加 onload=”this.height=100″，让页面加载的时候先缩到足够矮，然后再同步到一样的高度。
这个值，在实际应用中决定，足够矮但又不能太矮，否则在FF等浏览器里会有很明显的闪烁。DOM操作的时候主页面无法监听到，只能DOM操作完了之后把高度变小了。
在我的一个实际项目中，在成本和收益之间权衡，我并没有做这个事情，因为每个DOM函数中都要插入这个代码，代价太高，其实层缩回去不缩掉也不是那么致命。包括Demo里，也没有去做这个事情。如果读者有更好的方法，请告诉我。
/**********************************原文引用结束***************************** /
请注意红色的这句.读到这里,我想在改变iframe.height之前可否先给 iframe.height赋一个够小的初始值,如iframe.height="10px",然后再改变如iframe.height.这样就解决了原文红色部分的问题。
最终代码如下:
复制代码 代码如下:

<script type="text/javascript">
function SetCwinHeight() {
var iframeid = document.getElementById("maincontent1"); //iframe id
iframeid.height = "10px";//先给一个够小的初值,然后再长高.
if (document.getElementById) {
if (iframeid && !window.opera) {
if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight) {
iframeid.height = iframeid.contentDocument.body.offsetHeight;
} else if (iframeid.Document && iframeid.Document.body.scrollHeight) {
iframeid.height = iframeid.Document.body.scrollHeight;
}
}
}
}
</script>

iframe代码仍然不变:
复制代码 代码如下:

<iframe style="z-index: 1; visibility: inherit; width: 100%;" name="maincontent1"
onload="Javascript:SetCwinHeight()" height="1" id="maincontent1" src="<%=ResolveClientUrl("~/message")%>"
marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe>

经测试,iframe在ie8 、谷歌浏览器4.0和 firefox3.5.3均成功自适应高度.
您可能感兴趣的文章:

相关文章

  • JavaScript创建对象的方式小结(4种方式)

    JavaScript创建对象的方式小结(4种方式)

    这篇文章主要介绍了JavaScript创建对象的方式,结合实例形式总结分析了四种创建对象的方式,并附带分析了JavaScript对象复制的技巧,需要的朋友可以参考下
    2015-12-12
  • JS计算网页停留时间代码

    JS计算网页停留时间代码

    这篇文章主要介绍了JS计算网页停留时间的具体实现,需要的朋友可以参考下
    2014-04-04
  • 前端页面在移动设备上显示不正常的原因及解决方案

    前端页面在移动设备上显示不正常的原因及解决方案

    当页面在移动设备上显示不正常时,通常是由于布局、样式或响应式设计设置不当所引起的,移动设备的屏幕尺寸、分辨率和交互方式与桌面设备有很大的不同,本文将详细介绍常见的导致页面在移动设备上显示不正常的原因,以及如何解决这些问题,需要的朋友可以参考下
    2024-09-09
  • innerHTML动态添加html代码和脚本兼容多个浏览器

    innerHTML动态添加html代码和脚本兼容多个浏览器

    innerHTML动态添加html代码和脚本，给某个元素的innerHTML赋值,并使得值中的js代码有效且兼容多个浏览器，很棒的一个方法
    2014-10-10
  • 微信小程序转化为uni-app项目的方法示例

    微信小程序转化为uni-app项目的方法示例

    这篇文章主要介绍了微信小程序转化为uni-app项目的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • TBCompressor js代码压缩

    TBCompressor js代码压缩

    公司原先的JS和CSS文件都是用在线压缩程序压缩的，看似方便，但很容易出错，可能是压缩程序把CSS里面的一些Hack语句给混淆了，于是我决定用大名鼎鼎的YUI compressor。
    2011-01-01
  • 微信小程序实现页面下拉刷新和上拉加载功能详解

    微信小程序实现页面下拉刷新和上拉加载功能详解

    这篇文章主要介绍了微信小程序实现页面下拉刷新和上拉加载功能,结合实例形式分析了微信小程序页面下拉刷新和上拉加载相关事件监听与功能实现操作技巧,需要的朋友可以参考下
    2018-12-12
  • JavaScript实现横向滑出的多级菜单效果

    JavaScript实现横向滑出的多级菜单效果

    这篇文章主要介绍了JavaScript实现横向滑出的多级菜单效果,涉及JavaScript数学运算及页面元素样式动态变换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • js中textContent、innerText和innerHTML的用法以及区别

    js中textContent、innerText和innerHTML的用法以及区别

    这篇文章主要介绍了JavaScript中textContent、innerText和innerHTML的用法以及区别,需要的朋友可以参考下
    2023-05-05
  • CKEditor扩展插件：自动排版功能autoformat插件实现方法详解

    CKEditor扩展插件：自动排版功能autoformat插件实现方法详解

    这篇文章主要介绍了CKEditor扩展插件：自动排版功能autoformat插件实现方法,结合实例形式详细分析了CKEditor扩展插件实现自动排版功能的autoformat插件具体定义、配置与使用技巧,需要的朋友可以参考下
    2020-02-02

最新评论