`
no_bao
  • 浏览: 310198 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

Iframe根据src页面高度实时调整高度

阅读更多
function getDocHeight(doc)
        {
            //在IE中doc.body.scrollHeight的可信度最高
            //在Firefox中,doc.height就可以了

            var docHei = 0;
            var scrollHei;//scrollHeight
            var offsetHei;//offsetHeight,包含了边框的高度

            if (doc.height)
            {
                //Firefox支持此属性,IE不支持
                docHei = doc.height;
            }
            else if (doc.body)
            {
                //在IE中,只有body.scrollHeight是与当前页面的高度一致的,
                //其他的跳转几次后就会变的混乱,不知道是依照什么取的值!
                //似乎跟包含它的窗口的大小变化有关
                if(doc.body.offsetHeight) docHei = offsetHei = doc.body.offsetHeight;
                if(doc.body.scrollHeight) docHei = scrollHei = doc.body.scrollHeight;
            }
            else if(doc.documentElement)
            {
                if(doc.documentElement.offsetHeight) docHei = offsetHei = doc.documentElement.offsetHeight;
                if(doc.documentElement.scrollHeight) docHei = scrollHei = doc.documentElement.scrollHeight;
            }
            /*
            docHei = Math.max(scrollHei,offsetHei);//取最大的值,某些情况下可能与实际页面高度不符!
            */
            return docHei;
        }
function doReSize()
        {
            var iframeWin = window.frames['iframe_body'];
            var iframeEl = window.document.getElementById? window.document.getElementById('iframe_body'): document.all? document.all['iframe_body']: null;
            if ( iframeEl && iframeWin )
            {
                var docHei = getDocHeight(iframeWin.document);
                if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + 'px';
            }
            else if(iframeEl)
            {
                var docHei = getDocHeight(iframeEl.contentDocument);
                if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + 'px';
            }
        }

        function runResizeTask()
        {
            doReSize();
            setTimeout("runResizeTask()",500);//每隔半秒执行一次
        }


<iframe allowtransparency='true' style="background-color: #DCE0E4; margin: 0px 0px; " id="iframe_body" height="100%" width="100%" src="aaa.action" framespacing="0" frameborder="no" scrolling="No" border="0"  onload="runResizeTask();" >
分享到:
评论

相关推荐

    通过ifame指向的页面高度调整iframe的高度

    通过ifame指向的页面高度调整iframe的高度 1.htm的代码: &lt;iframe src=2.htm id=ifrm&gt;&lt;/iframe&gt; 2.htm的代码: [removed] function resize() {parent.document.all.ifrm.height=document.body....

    iframe_height:跨域 iframe 高度调整

    iframe 高度是一个允许跨域消息传递的简单工具,特别是针对响应式设计调整 iframe 高度的大小。 用法 将 parent.js 文件添加到包含页面,将 child.js 添加到包含页面。 在父页面中调用: IframeResize.load(选项);...

    如何设置iframe高度自适应在跨域情况下的可用方法

    iframe的高度需要根据子页面的实际高度来进行调整。如果iframe的高度小于子页面的实际高度,超出的部分无法显示;相反,如果iframe的高度过高,则页面上会出现大量的空白区域。我们可以通过属性或者CSS来设置iframe...

    多个iframe自动调整大小的问题

    一个页面我有多个iframe,且每个iframe的src都不一样,高度也不一样。 怎样用一个函数,自动调整这个页面里所有iframe的高度呢? function change_size(iframe) { iframe.style.height=info_content.document.body....

    jquery.cb-iframesize.js:使iframe响应的JQuery插件

    概述&gt;一个jQuery插件,它根据内容的宽度(屏幕的宽度)扩展和缩小浏览器上显示iframe要素の高さ同时保持纵横比(支持实时调整大小) ## &lt;实施方法&gt; ### 1.读取外部文件将jQuery和此插件加载到页面中 [removed]...

    窗格管理:当内容来自其他来源时,iframe调整大小器可以安全工作

    根据iframe元素的内容动态调整其高度。 如果找到了此存储库,则可能已经发现了动态调整iframe大小以适合其内容的痛苦(当该内容来自其他来源时)。 幸运的是,您的搜索已结束! 尽管您确实需要能够将脚本添加到...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -增加示例(iframe/parent_postback_run3.aspx),如何通过简单的Javascript代码回发父页面(feedback:eroach)。 -修正一些书写错误(feedback:bmck)。 -从Region控件中删除SplitColor属性,增加CollapseMode, ...

    ExtAspNet_v2.3.2_dll

    -增加示例(iframe/parent_postback_run3.aspx),如何通过简单的Javascript代码回发父页面(feedback:eroach)。 -修正一些书写错误(feedback:bmck)。 -从Region控件中删除SplitColor属性,增加CollapseMode, ...

    超实用的jQuery代码段

    1.15 实现iframe高度自适应 1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 1.19 获取鼠标在窗口页面中的坐标 1.20 设置Flash对象的WMode窗口模式 1.21 实现类...

    IBM WebSphere Portal门户开发笔记01

    64、JS自动检测IFRAME内容高度并自动设置为IFRAME高度 338 65、JS MOVETO设置屏幕滚动到最底端或者最顶端 339 66、JS OBJECT方式设置浏览器最大化与最小化 339 67、边框标签FIELDSET 339 68、按钮与A标签的DISABLED...

    html入门到放弃笔记

    1、src :指定要显示图像的 URL 2、width :图像的宽度 3、height :图像的高度 4、title :鼠标悬停时,要显示的文本 Demo : 1、将 学子网的 logo 下载下来 2、显示在自己的网页中 3、超链接 1、语法 ...

    江中岛(扬中)友情连接自助系统(美化版本) 4.1

     其中高度height可根据实际情况进行调整。  如果觉得样式和网站首页不符,可修改style.css文件中的配置。  ②调用文件:  &lt;script src="目录/js.asp"&gt;&lt;/script&gt;,界面样式可自己设计。  5.头部...

Global site tag (gtag.js) - Google Analytics