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-resizer`进行高度调整: ```html <script src="https://cdn.jsdelivr.net/npm/iframe-resizer@latest/dist/iframeResizer.contentWindow.min.js"></script> window....
2. JavaScript处理:通过`contentWindow`和`contentWindow.document`获取子页面高度,或使用`postMessage`和`message`事件进行跨域通信。 3. 动态调整:在父页面中监听事件,接收到高度信息后更新`iframe`的高度。 ...
`src`属性用于指定要嵌入的页面URL,`width`和`height`属性分别定义了`<iframe>`的宽度和高度。`scrolling`属性可以设置为`"yes"`、`"no"`或`"auto"`,控制是否显示滚动条。而`onload`事件则可以在`<iframe>`内容...
- 更新父页面中`iframe`元素的高度,同时根据`iframe`的高度调整其容器(父元素)的高度,以保持页面布局的整洁。 ### 4. 跨域通信问题 如果`iframe`加载的页面与父页面不在同一个域名下,会遇到跨域问题。这时,`...
- **`handleFrameLoad()`**:此函数负责获取当前页面的高度,并根据计算得到的高度调整`iframe`的高度。如果嵌入的页面还包含子`iframe`,则需要额外调整子`iframe`的高度。 - **`getBodyHeight()`**:通过判断...
当`iframe`加载的页面高度不确定时,我们需要动态调整`iframe`的高度以适应内容。由于跨域限制,我们不能直接获取子页面的DOM信息,但可以通过以下策略实现: - **使用代理页面** 创建一个与父页面同源的代理...
标题“Iframe 高度自适应浏览器高度”涉及的核心知识点是如何让Iframe的大小根据其内容自动调整,特别是高度,以便始终保持与浏览器窗口的高度同步,从而提供更好的用户体验。 首先,我们需要了解Iframe的基本结构...
当Panel包含一个IFrame时,可能会遇到页面高度调整的问题,特别是在动态加载内容或者IFrame内页面高度不固定时。本文将深入探讨如何在使用ExtJS时解决Panel与IFrame结合时页面高度自动适应的问题。 首先,我们需要...
5. **监听加载完成事件**:为了确保内部页面加载完成后进行高度调整,通常会在`iframe`的`onload`事件中调用高度设置函数。 6. **定时更新高度**:为了应对内部内容动态变化的情况,还需要定期检查内部页面高度并...
4. **浏览器兼容性**:虽然现代浏览器都支持`iframe`的动态高度调整和`window.postMessage`,但确保兼容性仍然是必要的。可能需要对IE8等老版本浏览器做特殊处理,例如使用`document.domain`来解除同源策略限制,...
为解决此问题,可以尝试使用JavaScript或jQuery动态获取嵌入页面的实际高度,并据此调整`<iframe>`的高度。 此外,跨域问题也可能导致iframe内容无法正常显示。由于同源策略的限制,`<iframe>`只能加载与包含它的...
然而,在使用`iframe`时,如何使其高度和宽度能够根据内容自动调整,是开发者们经常遇到的问题之一。 #### 一、基本概念 在默认情况下,`iframe`的高度和宽度是固定的,需要开发者手动设置。当嵌入的内容发生变化...
然而,在实际应用过程中,如何让`iframe`根据其内部内容自适应高度,是一个常见的需求。本文将详细介绍如何实现`iframe`自动改变高度的功能,并深入探讨相关知识点。 #### 一、`iframe`简介 `iframe`(Inline ...
2. **设置`iframe`的初始高度为0**:确保在内容加载前,`iframe`的高度不会影响页面布局。 ```javascript iframe.style.height = '0'; ``` 3. **监听`load`事件**:当`iframe`内的页面加载完成后,我们可以通过...
为了让`iframe`内容能根据容器大小动态调整,开发者需要关注以下几点: 1. **宽度和高度设置**:确保`iframe`元素的`width`和`height`属性设置正确。可以设置为百分比,使其相对于包含它的容器自适应,如: ```...
- 默认情况下,iframe的高度需要手动设定,但不同内容的页面高度各不相同,如果设定不当,可能会导致内容溢出或显示不全。 - 另一个问题是跨域问题,由于同源策略的限制,浏览器不允许JavaScript在不同的源之间...
为了解决这个问题,我们需要实现一个自适应高度的`iframe`,使其能根据内部内容自动调整高度。本文将深入讲解如何通过JavaScript来实现这一功能。 首先,让我们理解`iframe`的基本用法。在HTML中,创建一个`iframe`...
`iframe`内的页面向其父窗口发送消息,包含它的高度信息,然后父窗口根据接收到的消息调整`iframe`的高度。 ```javascript // 在父窗口 window.addEventListener('message', function(event) { if (event....
动态高度则需要根据`iframe`内部内容的高度实时调整。 ### 3. JavaScript解决方案 #### (1) 基于`onload`事件 当`iframe`内容加载完成后,可以使用JavaScript获取其内容区域的高度,然后设置`iframe`的高度。例如...
在`iframe`的父页面上,我们可以监听`message`事件,然后根据接收到的消息调整`iframe`的高度。在`iframe`内部,加载完成之后,发送一条包含高度信息的消息到父页面。 父页面示例代码: ```javascript window....