因为IFRAME包含的页面高度不确定,所以很苦恼,兼容性很差,页面很难看
经过苦苦搜索,现在找到一个比较好的兼容的办法,使得IFRAME能够根据包含页面的内容高度变化而变化:
var frm = obj;
var subWeb = document.frames?document.frames["MainFrame"].document:frm.contentDocument;
if(frm!= null && subWeb != null) {
frm.height = subWeb.body.scrollHeight;
if(frm.height<487){
frm.height=487;
}
}
MainFrame 为IFrame的ID
<iframe id="MainFrame" frameborder="no" scrolling="no" name="MenuAction" src="GoHome.do" border="0"></iframe>
还有一个JS,比较容易理解,上面这个不太好理解:
function reHeight(obj){
var iframeHeight=0;
if (navigator.userAgent.indexOf("Firefox")>0) { // Mozilla, Safari, ...
iframeHeight=obj.contentDocument.body.offsetHeight;
} else if (navigator.userAgent.indexOf("MSIE")>0) { // IE
iframeHeight=MainFrame.document.body.scrollHeight;//IE这里要用MainFrame,不能用obj,切记
}
<iframe id="MainFrame" frameborder="no" scrolling="no" name="MenuAction" src="GoHome.do" border="0" onload="reHeight(this);"></iframe>
分享到:
相关推荐
这段描述中提到的“完美自适应高度嵌套代码”很可能就是一个实现上述逻辑的JS代码片段,它可能包含了针对不同浏览器的兼容性处理,比如对于IE6-9这些老版本浏览器的特殊处理,因为它们对某些DOM操作和事件处理的支持...
iframe包含的页面的高度,兼容性好,iframe高度自适应
在网页开发中,`iframe`(Inline Frame)是一种嵌入其他网页的标签,常用于将外部内容如视频、地图或文章等内容嵌入到当前页面中。...在处理跨域问题时,第三方库往往能提供更好的兼容性和便利性。
iFrame 自适应高度(兼容所有主浏览器) iFrame 自适应高度是前端开发中常见的...iFrame 自适应高度是前端开发中需要注意的问题,需要深入探讨以解决 JS 操作 DOM 引起的高度变化问题,并且需要注意浏览器兼容性问题。
确保`<iframe>`加载的页面与包含它的页面位于相同的源(协议+域名+端口)下,或者`<iframe>`加载的页面明确通过`window.postMessage`等方式允许父页面访问其内容。 总的来说,通过使用JavaScript动态计算`<iframe>`...
### iframe自适应高度(兼容多种浏览器) 在网页开发过程中,`iframe`是一种常用的元素,用于在当前页面中嵌入另一个HTML文档。然而,默认情况下,`iframe`的高度是固定的,这可能会导致内容显示不完全或者出现不必要...
iFrame自适应高度兼容各主流浏览器 iFrame自适应高度是指在网页中嵌入iFrame时,使其高度能够自动适应其内容的高度,从而避免了出现滚动条的问题。下面是实现iFrame自适应高度的方法和相关知识点。 知识点1:...
3. **监听`load`事件**:当`iframe`内的页面加载完成后,我们可以通过`contentWindow`和`contentDocument`属性访问到`iframe`内的`window`和`document`对象,进而获取其内容的高度。 ```javascript iframe.onload...
### iframe自适应高度和宽度详解 在Web开发中,`iframe`(Inline Frame)是一种常用的HTML元素,用于在当前页面内嵌入另一个HTML文档。它能够实现页面内部局部刷新的效果,广泛应用于各种复杂的网页布局中。然而,...
- 默认情况下,iframe的高度需要手动设定,但不同内容的页面高度各不相同,如果设定不当,可能会导致内容溢出或显示不全。 - 另一个问题是跨域问题,由于同源策略的限制,浏览器不允许JavaScript在不同的源之间...
`contentDocument`或`contentWindow`是获取iframe内容窗口的方法,根据不同的浏览器兼容性选择合适的属性。 此外,为了应对可能的跨域问题,还可以尝试设置iframe的`sandbox`属性,允许特定的跨域操作,例如`allow-...
在 iframe 高度自适应中,需要考虑多种浏览器的兼容性问题,包括 Firefox、IE、Opera 等不同的浏览器。因此,需要使用不同的方法来实现 iframe 高度的自适应。 方法一:使用 JavaScript 控制 iframe 高度自适应 ...
标题“Iframe 高度自适应浏览器高度”涉及的核心知识点是如何让Iframe的大小根据其内容自动调整,特别是高度,以便始终保持与浏览器窗口的高度同步,从而提供更好的用户体验。 首先,我们需要了解Iframe的基本结构...
5. **兼容性**:好的插件会考虑各种浏览器的兼容性问题,确保在不同环境下都能正常工作。 在压缩包`iframe_code`中,通常会包含以下文件: - `jquery.iframe-auto-height.js`:这是主要的插件脚本文件,包含了上述...
### iframe自适应高度(DOM动态操作) #### 概述 在网页开发中,`iframe`是一种常用的技术,用于在一个HTML页面中嵌入另一个HTML页面。然而,在实际应用中经常会遇到一个问题:即`iframe`的高度与内嵌页面的实际...
`iframe`的自适应高度是一项关键技术,它确保了嵌入的内容能够完全显示,避免滚动条的出现,从而提供更好的用户体验。 `iframe`的基本语法如下: ```html <iframe src=...
### iframe跨域嵌套自适应高度 在网页开发过程中,`iframe`作为一种常见的网页元素,被广泛用于在当前页面中嵌入另一个独立的文档或页面。然而,在实际应用中经常会遇到一些问题,如跨域限制、自适应高度调整以及...
`iframe`的使用涉及到许多关键点,尤其是高度自适应和多浏览器兼容性,这在实际项目中至关重要。本篇文章将详细讲解如何实现`iframe`的高度自适应以及在不同浏览器之间的兼容性处理。 一、`iframe`基本使用 `iframe...
### iframe自适应高度实现方法详解 在网页设计与开发中,`iframe`(Inline Frame)是一种常用的HTML元素,用于在当前文档中嵌入另一个HTML文档。然而,在实际应用过程中,经常会遇到`iframe`内容高度固定导致页面...
总结,`iframe`高度自适应是前端开发中的常见问题,解决这个问题需要根据实际情况选择合适的方法,包括利用CSS、JavaScript、`window.postMessage` API,以及处理IE浏览器的兼容性问题。在实际操作中,一定要注意...