`

获取iframe包含的页面的高度,兼容性好,iframe高度自适应

阅读更多

因为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>

3
0
分享到:
评论

相关推荐

    iframe自动适应高度(完美自适应高度嵌套代码),兼容目前主流浏览器。

    这段描述中提到的“完美自适应高度嵌套代码”很可能就是一个实现上述逻辑的JS代码片段,它可能包含了针对不同浏览器的兼容性处理,比如对于IE6-9这些老版本浏览器的特殊处理,因为它们对某些DOM操作和事件处理的支持...

    iframe页面的高度iframe高度自适应

    iframe包含的页面的高度,兼容性好,iframe高度自适应

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

    在网页开发中,`iframe`(Inline Frame)是一种嵌入其他网页的标签,常用于将外部内容如视频、地图或文章等内容嵌入到当前页面中。...在处理跨域问题时,第三方库往往能提供更好的兼容性和便利性。

    iframe自适应高度(兼容目前所有主浏览器)

    iFrame 自适应高度(兼容所有主浏览器) iFrame 自适应高度是前端开发中常见的...iFrame 自适应高度是前端开发中需要注意的问题,需要深入探讨以解决 JS 操作 DOM 引起的高度变化问题,并且需要注意浏览器兼容性问题。

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

    确保`&lt;iframe&gt;`加载的页面与包含它的页面位于相同的源(协议+域名+端口)下,或者`&lt;iframe&gt;`加载的页面明确通过`window.postMessage`等方式允许父页面访问其内容。 总的来说,通过使用JavaScript动态计算`&lt;iframe&gt;`...

    iframe自适应高度(兼容多种浏览器)

    ### iframe自适应高度(兼容多种浏览器) 在网页开发过程中,`iframe`是一种常用的元素,用于在当前页面中嵌入另一个HTML文档。然而,默认情况下,`iframe`的高度是固定的,这可能会导致内容显示不完全或者出现不必要...

    iframe自适应高度兼容各主流浏览器

    iFrame自适应高度兼容各主流浏览器 iFrame自适应高度是指在网页中嵌入iFrame时,使其高度能够自动适应其内容的高度,从而避免了出现滚动条的问题。下面是实现iFrame自适应高度的方法和相关知识点。 知识点1:...

    js实现iframe自适应高度

    3. **监听`load`事件**:当`iframe`内的页面加载完成后,我们可以通过`contentWindow`和`contentDocument`属性访问到`iframe`内的`window`和`document`对象,进而获取其内容的高度。 ```javascript iframe.onload...

    iframe自适应高度和宽度

    ### iframe自适应高度和宽度详解 在Web开发中,`iframe`(Inline Frame)是一种常用的HTML元素,用于在当前页面内嵌入另一个HTML文档。它能够实现页面内部局部刷新的效果,广泛应用于各种复杂的网页布局中。然而,...

    再谈iframe自适应高度

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

    iframe自适应高度.rar

    `contentDocument`或`contentWindow`是获取iframe内容窗口的方法,根据不同的浏览器兼容性选择合适的属性。 此外,为了应对可能的跨域问题,还可以尝试设置iframe的`sandbox`属性,允许特定的跨域操作,例如`allow-...

    Iframe 高度自适应,js控制Iframe 高度自适应.docx

    在 iframe 高度自适应中,需要考虑多种浏览器的兼容性问题,包括 Firefox、IE、Opera 等不同的浏览器。因此,需要使用不同的方法来实现 iframe 高度的自适应。 方法一:使用 JavaScript 控制 iframe 高度自适应 ...

    Iframe 高度自适应浏览器高度

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

    jquery对iframe自适应高度插件

    5. **兼容性**:好的插件会考虑各种浏览器的兼容性问题,确保在不同环境下都能正常工作。 在压缩包`iframe_code`中,通常会包含以下文件: - `jquery.iframe-auto-height.js`:这是主要的插件脚本文件,包含了上述...

    iframe自适应高度(DOM动态操作)

    ### iframe自适应高度(DOM动态操作) #### 概述 在网页开发中,`iframe`是一种常用的技术,用于在一个HTML页面中嵌入另一个HTML页面。然而,在实际应用中经常会遇到一个问题:即`iframe`的高度与内嵌页面的实际...

    iframe自适应高度demo

    `iframe`的自适应高度是一项关键技术,它确保了嵌入的内容能够完全显示,避免滚动条的出现,从而提供更好的用户体验。 `iframe`的基本语法如下: ```html &lt;iframe src=...

    iframe跨域嵌套自适应高度

    ### iframe跨域嵌套自适应高度 在网页开发过程中,`iframe`作为一种常见的网页元素,被广泛用于在当前页面中嵌入另一个独立的文档或页面。然而,在实际应用中经常会遇到一些问题,如跨域限制、自适应高度调整以及...

    iframe高度自适应,多浏览器兼容

    `iframe`的使用涉及到许多关键点,尤其是高度自适应和多浏览器兼容性,这在实际项目中至关重要。本篇文章将详细讲解如何实现`iframe`的高度自适应以及在不同浏览器之间的兼容性处理。 一、`iframe`基本使用 `iframe...

    iframe 自适应高度

    ### iframe自适应高度实现方法详解 在网页设计与开发中,`iframe`(Inline Frame)是一种常用的HTML元素,用于在当前文档中嵌入另一个HTML文档。然而,在实际应用过程中,经常会遇到`iframe`内容高度固定导致页面...

    iframe高度自适应

    总结,`iframe`高度自适应是前端开发中的常见问题,解决这个问题需要根据实际情况选择合适的方法,包括利用CSS、JavaScript、`window.postMessage` API,以及处理IE浏览器的兼容性问题。在实际操作中,一定要注意...

Global site tag (gtag.js) - Google Analytics