집 > 기사 > 웹 프론트엔드 > JavaScript는 Iframe 적응형 높이를 처리합니다(동일하거나 다른 도메인 이름 아래).

JavaScript는 Iframe 적응형 높이를 처리합니다(동일하거나 다른 도메인 이름 아래).

高洛峰원래의: 2017-01-09 09:20:121171검색

1. 동일한 도메인 이름으로 Iframe 적응형 높이 처리

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

물론 여기서는 Asp.Net MVC를 사용하고 있으며 src는 라우팅 구조로 설정되어 있습니다

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

iframe 중첩 페이지가 로드될 때 onload 이벤트를 사용하여 iframe에 중첩된 웹 페이지의 높이를 가져온 다음 이를 Iframe의 높이에 할당하는 것이 사용됩니다.
2. Iframe은 도메인 교차 시 적응력이 뛰어납니다.

在主页面和被嵌套的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 중첩 페이지 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 중간 페이지 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>

코드에서 kimi의 경로 표현이 불완전할 수 있습니다.
main.html과 Agent.html은 동일한 도메인에 있어야 합니다
iframe.html은 다른 도메인에 있습니다

JavaScript 처리 Iframe 적응 높이(동일하거나 다른 도메인 이름)와 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

성명：

이전 기사：Node.js는 콘텐츠에 맞게 iframe의 높이/너비를 제어합니다.다음 기사：Node.js는 콘텐츠에 맞게 iframe의 높이/너비를 제어합니다.

JavaScript는 Iframe 적응형 높이를 처리합니다(동일하거나 다른 도메인 이름 아래).

관련 기사