HTML的frame框架怎么自适应高度

HTML的frame框架怎么自适应高度,第1张

HTML的frame框架自适应高度的6个方法:

1、可以给它添加一个默认的CSS的min-height值,然后同时使用JavaScript改变高度。常用的兼容代码有:

// documentdomain = "caibaojiancom";

function setIframeHeight(iframe) {

if (iframe) {

var iframeWin = iframecontentWindow || iframecontentDocumentparentWindow;

if (iframeWindocumentbody) {

iframeheight = iframeWindocumentdocumentElementscrollHeight || iframeWindocumentbodyscrollHeight;

}

}

};

windowonload = function () {

setIframeHeight(documentgetElementById('external-frame'));

};

(如果在同个顶级域名下,不同子域名之间互通信息,设置documentdomain="域名com"

2、只要修改以上的iframe的ID即可了。或者你可以直接在iframe里面写代码,我们一般为了不污染HTML代码,建议使用上面的代码。

<iframe src="backtophtml" frameborder="0" scrolling="no" id="external-frame" onload="setIframeHeight(this)"></iframe>

3、多个iframe的情况下

<script language="javascript">

//输入你希望根据页面高度自动调整高度的iframe的名称的列表

//用逗号把每个iframe的ID分隔 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。

//定义iframe的ID

var iframeids=["test"];

//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏

var iframehide="yes";

function dyniframesize()

{

var dyniframe=new Array()

for (i=0; i<iframeidslength; i++)

{

if (documentgetElementById)

{

//自动调整iframe高度

dyniframe[dyniframelength] = documentgetElementById(iframeids[i]);

if (dyniframe[i] && !windowopera)

{

dyniframe[i]styledisplay="block";

if (dyniframe[i]contentDocument && dyniframe[i]contentDocumentbodyoffsetHeight) //如果用户的浏览器是NetScape

dyniframe[i]height = dyniframe[i]contentDocumentbodyoffsetHeight;

else if (dyniframe[i]Document && dyniframe[i]DocumentbodyscrollHeight) //如果用户的浏览器是IE

dyniframe[i]height = dyniframe[i]DocumentbodyscrollHeight;

}

}

//根据设定的参数来处理不支持iframe的浏览器的显示问题

if ((documentall || documentgetElementById) && iframehide=="no")

{

var tempobj=documentall documentall[iframeids[i]] : documentgetElementById(iframeids[i]);

tempobjstyledisplay="block";

}

}

}

if (windowaddEventListener)

windowaddEventListener("load", dyniframesize, false);

else if (windowattachEvent)

windowattachEvent("onload", dyniframesize);

else

windowonload=dyniframesize;

</script>

4、打开调试运行窗口可以看到运行。·

跨域下的iframe自适应高度

跨域的时候,由于js的同源策略,父页面内的js不能获取到iframe页面的高度。需要一个页面来做代理。

方法如下:假设>

ahtml中包含iframe:

<iframe src=";

5、在chtml中加入如下代码:

<iframe id="c_iframe"  height="0" width="0"  src=";

6、最后,agenthtml中放入一段js:

<script type="text/javascript">

var b_iframe = windowparentparentdocumentgetElementById("Iframe");

var hash_url = windowlocationhash;

if(hash_urlindexOf("#")>=0){

var hash_width = hash_urlsplit("#")[1]split("|")[0]+"px";

var hash_height = hash_urlsplit("#")[1]split("|")[1]+"px";

b_iframestylewidth = hash_width;

b_iframestyleheight = hash_height;

}

</script>

agenthtml从URL中获得宽度值和高度值,并设置iframe的高度和宽度(因为agenthtml在>

默认状态,浏览器使用10-12 line-height, 这是一个初始值。

下图可协助你了解个大概。

如果要获取高度,在上面增加

_webviewdelegate = self;

再增加方法

- (void)webViewDidFinishLoad:(UIWebView )webView

{

//在这个方法中取高度

}

html?应该是js吧,锚点无法用css来解释,无法准确定位的,不同的padding,margin,top,定位的不同,包含锚点的容器相对html顶端的高度都不同,所以你的问题不好。

用jquery获得高度是很简单的。

一、途径:

第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}。这中情况通过#div1stylewidth拿不到宽度,而通过#div1offsetWidth才可以获取到宽度。

第二种情况就是宽和高是写在行内中,比如style="width:120px;",这中情况通过上述2个方法都能拿到宽度。

二、小结:

因为idoffsetWidth和idoffsetHeight无视样式写在样式表还是行内,所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过idstyleatrr来获取。

三、代码:

var o = documentgetElementById("view");

var h = ooffsetHeight; //高度

var w = ooffsetWidth; //宽度

参考资料

js获取Html元素的实际宽度高度的方法脚本之家[引用时间2017-12-29]

以上就是关于HTML的frame框架怎么自适应高度全部的内容,包括:HTML的frame框架怎么自适应高度、html中line-height实际高度、如何获取webView的高度等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9512780.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-29
下一篇 2023-04-29

发表评论

登录后才能评论

评论列表(0条)

保存