`

Iframe 自适应高度 无限级父框架 多层框架自适应

    博客分类:
  • Html
阅读更多

问题描述
    今天在处理一个Iframe自适应高度时遇到一个多层Iframe引用时的高度不能撑开的问题,效果同Demo1.


原因分析
    问题是由引用的顺序引起的,我们假设有3层Iframe引用,h1.html,h2.html,h3.html  h1包含h2,h2又包含h3,h3.html中有内容会出现高度适应问题,一般的处理方式是我们在引用h3的iframe中加入onload事件来让这个Iframe高度自适应引用的页面高度。这时我们打开h1.html就开发页面看起还是没有撑开,这是因为页面是一级一级的加载下去的,当h1引用h2时,h2的高度是固定的,当h3加载完毕的时候h2的高度做了变化,但是这时h1的引用页面高度并没有改变就造成了页面看起来还是没有撑开,经和同事讨论后编写了一个JS的自动重新计算parent(父页面)中Iframe元素的高度,从而解决这个问题,原理主要是通过一直循环获取页面parent的Iframe元素,当获取到top层时就结束




代码
单个Iframe适应
onload="this.style.height=iframe1.document.body.scrollHeight"


注:iframe1为该框架的ID,我在尝试不硬写名字的自适应方法,如果成功就换上来。


自适应多级Iframe高度
//进行Iframe的自动撑开,让所有父页面的Iframe都自动适应包含页高度
function autoHeight(){
	var doc = document,
		p = window;
	while(p = p.parent){
		var frames = p.frames,
			frame,
			i = 0;
		while(frame = frames[i++]){
			if(frame.document == doc){
				frame.frameElement.style.height = doc.body.scrollHeight;
				doc = p.document;
				break;
			}
		}
		if(p == top){
			break;
		}
	}
}
分享到:
评论
9 楼 tvjody 2010-04-20  
写得很整洁,赞一个
8 楼 shake822 2010-04-20  
帖一個我們之前用的方法吧,比較號用:

var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=getFFVersion>=0.1?16:0
function dyniframesize(iframename) {
    var pTar = null;
    if (document.getElementById){
        pTar = parent.document.getElementById(iframename);
    }
    else{
        eval('pTar = ' + iframename + ';');
    }
    if (pTar && !window.opera){
        if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){
            pTar.style.height = pTar.contentDocument.body.offsetHeight+FFextraHeight+25;
        }
        else if (pTar.Document && pTar.Document.body.scrollHeight){
            pTar.style.height = pTar.Document.body.scrollHeight;
        }
    }
}
7 楼 piranha 2010-04-19  
这个自动多级IFRAME调整,这几天还遇到很多新问题~修改后影响到了其它框架的高度,造成用在框架调用没有自动调整JS方法的时候出现不能正常撑开问题。现在已经对该方法进行了调整。

要求
用户使用IFRAME时不能在style里面设置高度。

原理
在进行多层IFRAME调整的时候对调整过的IFRAME对象进行保存,改变高度时在style中进行改变,因为style的优先级高于普通属性的height所以设置后有效,在页面beforeunload方法中进行了所有IFRAME框架的style高度的去除,这样就能保证其它页面不受影响了。
6 楼 greateWei 2010-04-17  
搭建有没有看过nabble的嵌入式实现,做的比较好,支持论坛、blog等嵌入,而且只需要一段代码黏贴就可以。
5 楼 coreymylife 2010-04-17  
fogtower 写道
曾经使用过 setInterval 来不停的计算并设置iframe高度,虽然傻了点,但是效果还不错,感觉不出来有性能问题,客户也算满意,哈哈。



囧!
4 楼 fogtower 2010-04-16  
曾经使用过 setInterval 来不停的计算并设置iframe高度,虽然傻了点,但是效果还不错,感觉不出来有性能问题,客户也算满意,哈哈。
3 楼 hjq19780613 2010-04-16  
iframe自适应高度,跨域时,除了可以设置代理来解决,难道就没有别的办法了吗?我查了一下,网上的跨域解决的都不好。
2 楼 leason 2010-04-15  
LZ可以尝试用递归,在h1.html里找全部ifram里,然后在找到的每个iframe里再一直找iframe里的iframe(相当于找叶子节点),一直找到最终那个iframe不包含iframe了,就自适应高度,然后它的parent再自适应高度,一直往回再递归
1 楼 struts 2010-04-15  
应该不兼容大部分的浏览器吧.

相关推荐

    多层嵌套iframe 自适应高度的解决方法

    多层嵌套iframe 自适应高度的解决方法

    iframe 多层嵌套 无限嵌套 高度自适应的解决方案

    然而,当`iframe`进行多层嵌套时,特别是无限嵌套,如何保证每个`iframe`的高度都能自适应其内容,避免滚动条的出现,就成为了一个挑战。本文将探讨一种解决方案,适用于`A`、`B`、`C`三个页面互相嵌套的情况。 ...

    iframe多层级自动适应高度

    本主题探讨的是如何处理`iframe`多层级时的高度自适应问题,以确保内容能够完整展示而不会造成滚动条混乱或内容被裁剪。 首先,我们要理解`iframe`的基本属性。`src`属性用于指定要加载的URL,`width`和`height`...

    iframe实用操作锦集

    iframe高度自适应于父页面 有时候我们需要让`iframe`的高度适应父页面的剩余空间,这可以通过监听窗口的`resize`事件实现: ```javascript $(window).resize(function () { var webheight = document.body....

    ASP.NET学习笔记

    - CSS Flexbox或Grid:在现代浏览器中,可以利用弹性布局或网格布局实现iframe的高度自适应。 这些知识点构成了ASP.NET开发的基础,熟练掌握它们能帮助开发者构建高效、安全且用户体验良好的Web应用。

    页面布局frameset frame

    它的主要属性有`rows`和`cols`,用于定义框架集的行数和列数,可以是像素值、百分比或者星号(*)表示自适应大小。 例如: ```html , 50%"> ``` 在这个例子中,浏览器窗口被分为两半,上半部分显示`top.html`,...

    深入解析contentWindow, contentDocument

    首先,它获取了父级iframe的`contentWindow`,然后通过`contentWindow`进一步获取到子级和孙级iframe的`contentDocument`,计算出它们的内容高度,并将这些高度设置回对应的iframe元素,从而实现自适应高度的效果。...

Global site tag (gtag.js) - Google Analytics