JavaScript handles Iframe adaptive height (under the same or different domain names)-JS Tutorial-php.cn

JavaScript handles Iframe adaptive height (under the same or different domain names)

高洛峰

Release： 2017-01-09 09:20:12

Original

1174 people have browsed it

1. Processing of Iframe adaptive height under the same domain name

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

Copy after login

Of course I use Asp.Net MVC here and src is set to the routing structure

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

Copy after login

What I use is When the page nested in the iframe is loaded, use the onload event to obtain the height of the web page nested in the iframe, and then assign it to the height of the Iframe.
2. Iframe is highly adaptive when crossing domains

在主页面和被嵌套的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>

Copy after login

iframe nested page 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>

Copy after login

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>

Copy after login

In the code, kimi The path may be incompletely represented
main.html and agent.html must be in the same domain
And iframe.html is in another domain

More JavaScript processing For related articles on Iframe adaptive height (under the same or different domain names), please pay attention to the PHP Chinese website!