html中iframe根据子页面内容动态修改高度

JavaScript

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);
}
var minHeight = $(window).height();
startInit(‘contents‘, minHeight);

有个问题待解决:去除了左右padding的值

原文地址:https://www.cnblogs.com/xiaobaizhiqian/p/8573876.html

时间: 2024-11-07 02:02:20

html中iframe根据子页面内容动态修改高度的相关文章

art.dialog.art 中,将子页面窗口中的值传递给父框架中

art.dialog.art 中,将子页面窗口中的值传递给父框架中 方法: artDialog.open.origin.document.getElementById('父元素ID').value=document.getElementById('子页面元素ID').value;

iframe根据子页面的内容来设置高度

以下的方法必须起一个页面服务才能使用(通过域名或ip地址来访问)并且的保证父页面与子页面是在同一域名下,不然是会报错的 contentDocument 可以获得iframe子窗口的document对象,兼容ie8+ contentWindow    这是个只读属性,返回指定的iframe的窗口对象. 在iframe加载完毕之后通过contentDocument 或者 contentWindow 这个对象来获取iframe子页面的内容高度,从而来设置设置iframe的高度.再给iframe设置高度

主页面获取iframe 的子页面方法。

父页面parent.html <html> <head> <script type="text/javascript"> function say(){ alert("parent.html"); } function callChild(){ myFrame.window.say(); myFrame.window.document.getElementById("button").value="调

javascript中父、子页面间调用

本文主要转自:http://www.360doc.com/content/11/0525/17/6161903_119333834.shtml                    http://zhidao.baidu.com/question/178864421.html 父子页面互相调用的几种方法总结: 第一种:采用window.open(),打开一个新窗口 父页面调用子页面: 子页面用window.open打开,调用方法为 var aa = window.open(); aa. chil

跨域IFRAME自适应高度(子页面TAB切换不同的高度,主页面IFRAME嵌套子页面自适应高度)

1.pinganproxy.html <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">eval(function(p,a,c,k,e,r){e=fu

IE8下IFrame 和子页面的通信

业务中遇到这种场景,我们的业务嵌入别的系统中使用,系统采用Iframe调用我们的业务,在使用过程中主要遇到两个问题: 1.子页面高度发生变化时外部的Iframe高度自适应的问题. 2.子页面不同获取外部scrollTop的问题. 这两个问题其实都可以说是跨域通信的问题. 这两个问题我们采用了不同不同的方案来解决. 1.子页面高度发生变化时外部的Iframe高度自适应的问题. 我们采用在外部系统中增加一个代理页面,这样的话这个代理页面就和外部系统处于同一个域中了,相当于我们在外部系统中安插了一个内

使用iframe框架后的页面跳转时目标页面变为iframe的子页面的问题

<frameset rows="4,200,10,*,120" cols="*" framespacing="0" frameborder="no" border="1" > <frame src=""/> <frame src="<%=practiceInfoSrc %>" id="practiceInfo&quo

在Bootstrap开发框架的前端视图中使用@RenderPage实现页面内容模块化的隔离,减少复杂度

在很多开发的场景中,很多情况下我们需要考虑抽象.以及模块化等方面的内容,其目的就是为了使得开发的时候关注的变化内容更加少一些,整体开发更加简单化,从而减少开发的复杂度,在Winform开发的时候,往往可以通过定义基类模块.用户控件的方式实现这个目的,而在Web开发的时候,我们是否也可以利用这些特性呢?特别在MVC的视图模板里面的HTML,是否可以利用这些特点,实现变化部分的隔离,从而减少整个页面的复杂度,同时又可以提高模块的重用性呢?本篇随笔介绍在Asp.NET的MVC视图处理上,使用@Rend

Bootstrap 模态框 + iframe &gt; 打开子页面 &gt; 数据传输/关闭模态框

父页面bootstrap模态框: <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" > <div class="modal-dialog modal-lg"> &l