>  기사  >  웹 프론트엔드  >  iframe 적응형 높이 만들기(XHTML 지원, FF 지원)_javascript 기술

iframe 적응형 높이 만들기(XHTML 지원, FF 지원)_javascript 기술

WBOY
WBOY원래의
2016-05-16 19:11:06998검색

먼저 이 방법은 로컬 페이지이기도 한 iframe의 하위 페이지에만 제한된다는 점을 먼저 설명하겠습니다(외부 웹 페이지는 참조할 수 없음)

======Method======
단계 1 js 부분

function getSize() {
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body
yScroll = window.innerHeight window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // Explorer Mac을 제외한 모든 항목
      yScroll = document.body.scrollHeight; body.offsetHeight;

Var Windowwidth, Windowheight;
If (Self.Innerheight) {// Explorer 제외 모두
Windowwidth = Self.innerWidth; ;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 엄격 모드
windowWidth = document.documentElement.clientWidth
window Height = document.documentElement.clientHeight; > } else if (document .body) { // 다른 Explorer
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;

// 작은 경우 총 높이가 뷰포트 높이보다 작은 페이지
if(yScroll pageHeight = windowHeight;
y = pageHeight
} else {
             pageHeight = yScroll; >                                                                          너비 = xScroll;
}

arrayPageSize = 새 배열(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize }
이 코드는 페이지 높이와 너비, 화면 높이와 너비를 포함한 대상 페이지의 매개변수를 가져오는 데 사용됩니다.

function autoHeight(pid) {
var x = new getSize()
parent.document.getElementById(pid).height=x[1];
}
이 코드는 상위 페이지

\\\에서 iframe의 높이 적응을 구현하는 데 사용됩니다. \\

두 번째 단계는 페이지 부분입니다


부모 페이지의 iframe과 별 차이가 없습니다. 일반 iframe이지만 id 값을 설정해야 하위 페이지의 매개변수를 호출할 수 있습니다.


본체의 onload 이벤트를 사용하여 해당 높이를 상위 페이지의 iframe에 전달합니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.