iframe标签父页面高度自适应

注意:页面html节点上要有

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<iframe id="mainFrame" name="mainFrame" scrolling="no" src="Index.aspx"   frameborder="0" style="padding: 0px; width: 100%; height: 1000px;"></iframe>

调用

<script type="text/javascript">
        startInit(‘mainFrame‘, 560);
</script>

<script>

var browserVersion = window.navigator.userAgent.toUpperCase();
var isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false;
var isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false;
var isChrome = browserVersion.indexOf("CHROME") > -1 ? true : false;
var isSafari = browserVersion.indexOf("SAFARI") > -1 ? true : false;
var isIE = (!!window.ActiveXObject || "ActiveXObject" in window);
var isIE9More = (! -[1, ] == false);
function reinitIframe(iframeId, minHeight) {
    try {
        var iframe = document.getElementById(iframeId);
        var bHeight = 0;
        if (isChrome == false && isSafari == false)
            bHeight = iframe.contentWindow.document.body.scrollHeight;

        var dHeight = 0;
        if (isFireFox == true)
            dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2;
        else if (isIE == false && isOpera == false)
            dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
        else if (isIE == true && isIE9More) {//ie9+
            var heightDeviation = bHeight - eval("window.IE9MoreRealHeight" + iframeId);
            if (heightDeviation == 0) {
                bHeight += 3;
            } else if (heightDeviation != 3) {
                eval("window.IE9MoreRealHeight" + iframeId + "=" + bHeight);
                bHeight += 3;
            }
        }
        else//ie[6-8]、OPERA
            bHeight += 3;

        var height = Math.max(bHeight, dHeight);
        if (height < minHeight) height = minHeight;
        iframe.style.height = height + "px";
    } catch (ex) { }
}
function startInit(iframeId, minHeight) {
    eval("window.IE9MoreRealHeight" + iframeId + "=0");
    window.setInterval("reinitIframe(‘" + iframeId + "‘," + minHeight + ")", 100);
} 

</script> 

测试发现兼容浏览器ie6-11、chrome、firefox、opera、Safari、傲游云浏览器、360浏览器,兼容性更好,其他未测试

参考http://www.kuqin.com/webpagedesign/20080516/8536.html

时间: 2024-07-30 13:49:23

iframe标签父页面高度自适应的相关文章

iframe的跨域高度自适应(通过跨域页面中嵌套本域页面)

实习不久接到一个任务,在网页中嵌套另一个工程的网页.本以为这是轻而易举的一件事情,结果被测试姐姐折腾得够呛.多次和我谈心说到这个高度固定导致iframe出现滚动条有多么不好看,对于工程整体的影响有多么恶劣.因为跨域的原因,这个需求被拖了许久,真是很痛苦的一件事.最终在我离开公司之前搞定了这个单. 这里就把我的研究过程写下来以供大家参考. 首先需要了解一下何为同域,何为跨域: URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名

iframe调用父页面js函数 方法 元素

在一个页面中添加iframe,但是有时需要与父页面进行通信,传递参数. 网上总结有以下方法: 一.iframe标签中   src属性传参 <iframe src="test.jsp?id=xxx">    通过get方法,添加在页面后面传递参数,如上的“id” 二.iframe调用父页面html元素 在iframe中,通过“window.parent.document.getElementById()” ,即可访问父页面中的元素 三.iframe调用父页面函数  windo

子元素绝对定位,父元素高度自适应子元素高度

子元素设置了绝对定位,父元素没有设置相对定位,因此子元素脱离了文档流,父元素高度就变成没有了,如何让父元素高度自适应子元素高度. 子元素的高度是不确定的    可以JS设置父元素高度 <<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">divid="father"> <<span class="h

CSS float 父元素高度自适应

<html> <head><title></title><style type="text/css">*{margin:0 ;padding:0;}.content{border:1px solid red;}.fl{float:left}</style></head> <body> <div class="content"> <div class=&q

【前端】浮动后父容器高度自适应

float:left; overflow:hidden; 当一个容器内元素都浮动后,它将高度将不会随着内部元素高度的添加而添加,所以造成内容元素的显示超出了容器. 在我们没有为容器设置高度的时候,容器的高度是自适应的.然而,当容器中的元素都浮动以后,脱离了文档流.容器的高度因为自适应的原因就为0了. 为了方便大家观察,我为父容器设置了边框.内间距.原本上面四张图片是在上面的容器中的.将图片设置左浮动以后,容器的高度就为0了. Q1:这会为我们带来什么影响? A1:浏览器在解析下一个容器的时候,默

浮动后父容器高度自适应

当一个容器内元素都浮动后,它将高度将不会随着内部元素高度的增加而增加,所以造成内容元素的显示超出了容器.为了便于查看效果,把刚才实例中的#layout增加一个边框和内边距: #layout { width:400px; border:2px solid #ccc; padding:2px;} 文章出处:标准之路(http://www.aa25.cn) 看到没,它没有被内容元素给撑高,要解决这个问题,需要使用以下样式 overflow:auto; zoom:1; overflow:auto;是让高

iframe 调用父页面元素

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="IFrame.aspx.cs" Inherits="IframeDemo.IFrame" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x

iframe中 父页面和子页面查找元素的方法

从父页面中查找iframe子页面中对象的方法:JS: document.getElementById('iframe').contentWindow //查找iframe加载的页面的window对象 document.getElementById('iframe').contentWindow.document //查找iframe加载的页面的document对象 document.getElementById('iframe').contentWindow.document.body //查找

(转)iframe刷新父页面

iframe页面是内嵌到父页面的,当点击iframe页面的服务器控件时,默认只刷新iframe页面,父页面是不会刷新的.若想刷新父页面,可以使用js来实现,如 1. parent.location.reload(); 这种方法会重新加载整个页面.但如果要在原页面的基础上传递参数,则可以使用下面的方法: 2.top.document.location.href='xxx.aspx?id=xx'. 但这两种方法都有一个共同的缺点,就是iframe内嵌页面的状态不会保存了,刷新后会重新回到第一次加载的