Heim > Artikel > Web-Frontend > JavaScript verarbeitet die adaptive Höhe von Iframes (unter demselben oder unterschiedlichen Domänennamen).

JavaScript verarbeitet die adaptive Höhe von Iframes (unter demselben oder unterschiedlichen Domänennamen).

高洛峰Original: 2017-01-09 09:20:121156Durchsuche

1. Verarbeitung der adaptiven Iframe-Höhe unter demselben Domainnamen

<iframe onload="Javascript:SetIFrameHeight(this)" src="../Home/b" id="win" name="win" width="100%" height="1"> </iframe>

Natürlich verwende ich hier Asp.Net MVC und src ist auf die Routing-Struktur eingestellt

<script type="text/javascript"> 
function SetIFrameHeight(obj) { 
var win = obj; 
if (document.getElementById) { 
if (win && !window.opera) { 
if (win.contentDocument && win.contentDocument.body.offsetHeight) 
win.height = win.contentDocument.body.offsetHeight; 
else if (win.Document && win.Document.body.scrollHeight) 
win.height = win.Document.body.scrollHeight; 
} 
} 
} 
</script>

Was verwendet wird, ist, dass beim Laden der verschachtelten Iframe-Seite das Onload-Ereignis verwendet wird, um die Höhe der im Iframe verschachtelten Webseite abzurufen, und diese dann der Höhe des Iframes zuzuweisen.
2. Iframe ist beim Überqueren von Domänen äußerst anpassungsfähig

在主页面和被嵌套的iframe为不同域名的时候，就稍微麻烦一些，需要避开JavaScript的跨域限制。 
原理：现有iframe主页面main.html、被iframe嵌套页面iframe.html、iframe中介页面agent.html三个，通过main.html（域名为http://www.ccvita.com）嵌套iframe.html（域名为：http://www.phpq.net），当用户浏览时执行iframe.html中的JavaScript代码设置iframeC的scr地址中加入iframe页面的高度，agent.html（域名为：http://www.ccvita.com）取得传递的高度，通过JavaScript设置main.html中iframe的高度。最终实现预期的目标。 

iframe主页面main.html 
[code] 
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><title>iframe主页面</title></head> 
<body> 
<div style="border:1px solid #ccc;padding:10px;"> 
<iframe id="frame_content" name="frame_content" src="iframe.html" width="100%" height="0" scrolling="no" frameborder="0"></iframe> 
</div> 
<br />尾部<br /> 
</body> 
</html>

iframe verschachtelte Seite iframe.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><title>被iframe嵌套页面</title></head> 
<body> 
文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
<iframe id="iframeC" name="iframeC" src="" width="0" height="0" style="display:none;" ></iframe> 
<script type="text/javascript"> 
function sethash(){ 
hashH = document.documentElement.scrollHeight; 
urlC = "agent.html"; 
document.getElementByIdx("iframeC").src=urlC+"#"+hashH; 
} 
window.onload=sethash; 
</script> 
</body> 
</html>

iframe intermediary page agent.html

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><title>iframe中介页面</title></head> 
<body> 
<script> 
function pseth() { 
var iObj = parent.parent.document.getElementByIdx(&#39;frame_content&#39;); 
iObjH = parent.parent.frames["frame_content"].frames["iframeC"].location.hash; 
iObj.style.height = iObjH.split("#")[1]+"px"; 
} 
pseth(); 
</script> 
</body> 
</html>

Im Code weist Kimi möglicherweise eine unvollständige Pfaddarstellung auf
main.html und agent.html müssen sich in derselben Domäne befinden
während sich iframe.html in einer anderen Domäne befindet

Weitere Artikel zur JavaScript-Verarbeitung mit adaptiver Iframe-Höhe (unter demselben oder einem anderen Domainnamen) finden Sie auf der chinesischen PHP-Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：js steuert die Höhe/Breite des Iframes, sodass es sich an den Inhalt anpasstNächster Artikel：js steuert die Höhe/Breite des Iframes, sodass es sich an den Inhalt anpasst

In Verbindung stehende Artikel

Mehr sehen