JavaScript 처리 Iframe 적응형 높이(동일하거나 다른 도메인 이름 아래)_javascript 기술

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

코드 복사 코드는 다음과 같습니다. :

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

코드 복사 코드는 다음과 같습니다.

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

코드 복사 코드는 다음과 같습니다.

메인 페이지와 중첩된 iframe의 도메인 이름이 다른 경우에는 좀 더 번거롭고 JavaScript의 도메인 간 제한을 피해야 합니다.
원리: 기존 iframe 메인 페이지 main.html, iframe 중첩 페이지 iframe.html, iframe 중간 페이지 agent.html이 3개 있으며 이는 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
[코드]


< ;title>iframe 메인 페이지

iframe id="frame_content" name="frame_content" src="iframe.html" width="100%" height="0" scrolling="no"frameborder="0"> ;/div>

Tail





iframe 중첩 페이지

코드 복사 코드는 다음과 같습니다.

텍스트< ;br />









텍스트









텍스트



;






텍스트


;








< ;script type="text/javascript" ">
함수 sethash(){
hashH = document.documentElement.scrollHeight;
urlC = "agent.html";
document.getElementByIdx("iframeC ").src=urlC "# " hashH;
}
window.onload=sethash;





iframe 중간 페이지 agent.html

코드 복사 코드는 다음과 같습니다.

;html xmlns ="http://www.w3.org/1999/xhtml">
;
<script> <BR>function pseth() { <BR>var iObj = parent.parent.document.getElementByIdx('frame_content') <BR>iObjH = parent.parent.frames["frame_content"] .frames ["iframeC"].location.hash; <BR>iObj.style.height = iObjH.split("#")[1] "px"; <BR>} <BR>pseth(); < /script> <BR></script>