`
no_bao
  • 浏览: 316621 次
  • 性别: 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();" >
分享到:
评论

相关推荐

    iframe根据页面内容自适应高度和宽度

    - 子页面也需要做一些配置,以允许`iframe-resizer`进行高度调整: ```html &lt;script src="https://cdn.jsdelivr.net/npm/iframe-resizer@latest/dist/iframeResizer.contentWindow.min.js"&gt;&lt;/script&gt; window....

    iframe自适应子页面内容高度

    2. JavaScript处理:通过`contentWindow`和`contentWindow.document`获取子页面高度,或使用`postMessage`和`message`事件进行跨域通信。 3. 动态调整:在父页面中监听事件,接收到高度信息后更新`iframe`的高度。 ...

    iframe内容高度 iframe自适应高度终极解决Iframe设置高度后无法缩小问题

    `src`属性用于指定要嵌入的页面URL,`width`和`height`属性分别定义了`&lt;iframe&gt;`的宽度和高度。`scrolling`属性可以设置为`"yes"`、`"no"`或`"auto"`,控制是否显示滚动条。而`onload`事件则可以在`&lt;iframe&gt;`内容...

    iframe实时高度检测

    - 更新父页面中`iframe`元素的高度,同时根据`iframe`的高度调整其容器(父元素)的高度,以保持页面布局的整洁。 ### 4. 跨域通信问题 如果`iframe`加载的页面与父页面不在同一个域名下,会遇到跨域问题。这时,`...

    ext使用--Panel和iframe联合使用时页面高度的解决方法

    当Panel包含一个IFrame时,可能会遇到页面高度调整的问题,特别是在动态加载内容或者IFrame内页面高度不固定时。本文将深入探讨如何在使用ExtJS时解决Panel与IFrame结合时页面高度自动适应的问题。 首先,我们需要...

    iframe高度自适应.pdf

    - **`handleFrameLoad()`**:此函数负责获取当前页面的高度,并根据计算得到的高度调整`iframe`的高度。如果嵌入的页面还包含子`iframe`,则需要额外调整子`iframe`的高度。 - **`getBodyHeight()`**:通过判断...

    iframe 跨域 自动适应高度

    当`iframe`加载的页面高度不确定时,我们需要动态调整`iframe`的高度以适应内容。由于跨域限制,我们不能直接获取子页面的DOM信息,但可以通过以下策略实现: - **使用代理页面** 创建一个与父页面同源的代理...

    Iframe 高度自适应浏览器高度

    标题“Iframe 高度自适应浏览器高度”涉及的核心知识点是如何让Iframe的大小根据其内容自动调整,特别是高度,以便始终保持与浏览器窗口的高度同步,从而提供更好的用户体验。 首先,我们需要了解Iframe的基本结构...

    iframe 自适高度 JS控制代码实现

    5. **监听加载完成事件**:为了确保内部页面加载完成后进行高度调整,通常会在`iframe`的`onload`事件中调用高度设置函数。 6. **定时更新高度**:为了应对内部内容动态变化的情况,还需要定期检查内部页面高度并...

    iframe高度随子页高度变化

    4. **浏览器兼容性**:虽然现代浏览器都支持`iframe`的动态高度调整和`window.postMessage`,但确保兼容性仍然是必要的。可能需要对IE8等老版本浏览器做特殊处理,例如使用`document.domain`来解除同源策略限制,...

    iframe中页面显示不全1

    为解决此问题,可以尝试使用JavaScript或jQuery动态获取嵌入页面的实际高度,并据此调整`&lt;iframe&gt;`的高度。 此外,跨域问题也可能导致iframe内容无法正常显示。由于同源策略的限制,`&lt;iframe&gt;`只能加载与包含它的...

    iframe自适应高度和宽度

    然而,在使用`iframe`时,如何使其高度和宽度能够根据内容自动调整,是开发者们经常遇到的问题之一。 #### 一、基本概念 在默认情况下,`iframe`的高度和宽度是固定的,需要开发者手动设置。当嵌入的内容发生变化...

    自动改变iframe的高度

    然而,在实际应用过程中,如何让`iframe`根据其内部内容自适应高度,是一个常见的需求。本文将详细介绍如何实现`iframe`自动改变高度的功能,并深入探讨相关知识点。 #### 一、`iframe`简介 `iframe`(Inline ...

    js实现iframe自适应高度

    2. **设置`iframe`的初始高度为0**:确保在内容加载前,`iframe`的高度不会影响页面布局。 ```javascript iframe.style.height = '0'; ``` 3. **监听`load`事件**:当`iframe`内的页面加载完成后,我们可以通过...

    iframe跨域常用问题和iframe页面自适应

    为了让`iframe`内容能根据容器大小动态调整,开发者需要关注以下几点: 1. **宽度和高度设置**:确保`iframe`元素的`width`和`height`属性设置正确。可以设置为百分比,使其相对于包含它的容器自适应,如: ```...

    再谈iframe自适应高度

    - 默认情况下,iframe的高度需要手动设定,但不同内容的页面高度各不相同,如果设定不当,可能会导致内容溢出或显示不全。 - 另一个问题是跨域问题,由于同源策略的限制,浏览器不允许JavaScript在不同的源之间...

    iframe自适应高度js demo

    为了解决这个问题,我们需要实现一个自适应高度的`iframe`,使其能根据内部内容自动调整高度。本文将深入讲解如何通过JavaScript来实现这一功能。 首先,让我们理解`iframe`的基本用法。在HTML中,创建一个`iframe`...

    iframe自适应高度demo

    `iframe`内的页面向其父窗口发送消息,包含它的高度信息,然后父窗口根据接收到的消息调整`iframe`的高度。 ```javascript // 在父窗口 window.addEventListener('message', function(event) { if (event....

    iframe自适应高度

    动态高度则需要根据`iframe`内部内容的高度实时调整。 ### 3. JavaScript解决方案 #### (1) 基于`onload`事件 当`iframe`内容加载完成后,可以使用JavaScript获取其内容区域的高度,然后设置`iframe`的高度。例如...

    iframe高度自适应

    在`iframe`的父页面上,我们可以监听`message`事件,然后根据接收到的消息调整`iframe`的高度。在`iframe`内部,加载完成之后,发送一条包含高度信息的消息到父页面。 父页面示例代码: ```javascript window....

Global site tag (gtag.js) - Google Analytics