Wulin.com의 기사 소개 (www.vevb.com) : 누군가 아직이 문제를 겪지 않았을 수도 있습니다. 먼저 적응력이 무엇인지 설명해 봅시다. 소위 iframe 적응력 높이는 인터페이스와 상호 작용의 아름다움에 따라 iframe의 테두리와 스크롤 바가 숨겨져 있기 때문에 그것이 iframe임을 알 수 없습니다. iframe이 항상 동일한 고정 높이 페이지를 호출하는 경우 iframe 높이를 작성하면됩니다. 그리고
5W 이상의 결과로 Google을 통해 iframe 적응력 높이를 검색하면 2W 이상의 결과로 iframe 높이 적응 높이를 검색하십시오.나는 이전 기사의 수십 개의 기사를 읽고 많은 수의 재 인쇄를 파고 들었습니다. 독창적 인 3 ~ 5 개의 기사가 있습니다. 이 원본 기사에서는 기본적으로 정적 사물에 적응하는 방법에 대해서만 이야기하지만 JS가 DOM을 운영 한 후 동적 동기화를 수행하는 방법을 고려하지 않습니다. 또한 호환성 측면에서 연구도 불완전했습니다.
이 두 가지 측면에서 심층적 인 연구를하고 싶습니다.
어쩌면 누군가가 아직이 문제와 접촉하지 않았을 수도 있습니다. 먼저 적응력이 무엇인지 설명해 봅시다. 소위 iframe 적응력 높이는 인터페이스와 상호 작용의 아름다움에 따라 iframe의 테두리와 스크롤 바가 숨겨져 있기 때문에 그것이 iframe임을 알 수 없습니다. iframe이 항상 동일한 고정 높이 페이지를 호출하는 경우 iframe 높이를 작성하면됩니다. iFrame이 페이지를 전환하려고하거나 포함 된 페이지가 DOM 동적 작업을 수행 해야하는 경우 프로그램은 IFRAME 높이와 포함 된 페이지의 실제 높이를 동기화해야합니다.
그건 그렇고, iframe을 사용해야한다면 프론트 엔드 개발에 너무 많은 어려움을 겪게됩니다.
대략 두 가지 전통적인 관행이 있습니다.
방법 1 : 자체 컨텐츠를로드하여 포함 된 각각의 페이지를로드 한 후 JS를 실행 하여이 페이지의 높이를 얻은 다음 부모 페이지의 iframe 높이를 동기화하십시오.
방법 2 : 메인 페이지 iframe의 Onload 이벤트에서 JS를 실행하고 포함 된 페이지의 높이 내용을 가져온 다음 높이를 동기화합니다.
코드 유지 보수의 관점에서, 메소드 2는 메소드 1보다 낫습니다. 메소드 1, 포함 된 각 페이지는이를 수행하기 위해 동일한 코드의 조각을 소개해야하며 많은 사본이 생성 되었기 때문입니다.
두 방법 모두 조용한 것들만을 다루고 있습니다. 즉, 콘텐츠가로드 될 때만 실행됩니다. JS가 DOM으로 인한 높이 변화를 작동하면 그다지 편리하지 않습니다.
기본 창에서 간격을두면 포함 된 페이지의 높이를 지속적으로 얻은 다음 동기화를 수행하면 편리하고 DOM을 작동하는 JS의 문제를 해결합니까? 대답은 예입니다.
데모 페이지 : 메인 페이지 iframe_a.html, 페이지가 포함되어 iframe_b.htm 및 iframe_c.html
메인 페이지 코드 예 :
<iframe id = frame_content src = iframe_b.html scrolling = no frameborder = 0> </iframe> <script type = text/javaScript>
함수 reinitiframe () {
var iframe = document.getElementById (frame_content);
노력하다{
iframe.height = iframe.contentwindow.document.documentElement.scrollheight;
} catch (ex) {}
}
Window.setInterval (Reinitiframe (), 200);
< /script> 효율성에 문제가 있습니까?
테스트를 수행 하고이 코드를 실행하기 위해 5 개의 Windows (IE6, IE7, FF, Opera, Safari)를 열었습니다.이 코드는 CPU에 영향을 미치지 않으며, 영향없이 2MS로 조정됩니다 (기본적으로 0% 점유율).
각 브라우저의 호환성 문제에 대해 이야기 해 봅시다. 올바른 높이에 도달하는 방법. 주로 두 몸을 비교하는 것이 좋습니다 .ScrollHeight 및 DocumentElement.scrollheight. 이 기사는이 문서를 사용합니다. 다른 doctypes는 결과에 영향을 미치지 않아야하지만 페이지가 DocType을 선언하지 않으면 먼저 추가하십시오.
<! doctype html public- // w3c // dtd html 4.01 // en> 다음 테스트 코드를 메인 페이지에 추가 하여이 두 값을 출력하여 코드 예제를 출력하십시오.
<div> <button> 높이 확인 </button> </div> <스크립트 유형 = 텍스트/JavaScript>
함수 CheckHeight () {
var iframe = document.getElementById (frame_content);
var bheight = iframe.contentwindow.document.body.scrollheight;
var dheight = iframe.contentwindow.document.documentElement.scrollheight;
경고 (bheight : + bheight +, dheight : + dheight);
}
< /script>가로드되었고, 절대적으로 배치 된 레이어를 전환하여 페이지 높이를 동적으로 변경할 수 있습니다. 레이어가 확장되면 페이지 높이가 지원됩니다. Code example:
<div> <button> 토글 오버레이 </button>
< /div>
<div 스타일 = 높이 : 160px; 위치 : 상대>
<div id = 오버레이 스타일 = 위치 : 절대; 너비 : 280px; 높이 : 280px; 디스플레이 : 없음;> </div>
< /div>
<스크립트 유형 = 텍스트/JavaScript>
함수 toggleOverLay () {
var overay = document.getElementById ( '오버레이');
오버레이.style.display = (오버레이.style.display == 'none')? '블록': '없음';
}
< /script> 다음은 각 브라우저에서 위 코드의 테스트 값을 나열합니다.
(bheight = body.scrollheight, dheight = documentelement.scrollheight, red = 오류 값, 녹색 = 올바른 값)
/ 레이어가 확장되면 층이 숨겨져 있습니다
Bheight dheight bheight dheight
IE6 184 184 184 303
IE7 184 184 184 303
FF 184 184 184 303
오페라 181 181 300 300
사파리 184 184 303 184
오페라가 다른 것보다 3 픽셀이라는 문제를 무시해 봅시다. 절대 포지셔닝이 없으면 두 값이 동일하며 어느 값을 가져 가는지는 중요하지 않다는 것을 알 수 있습니다.
그러나 있다면 각 브라우저의 성능이 다르며 값만으로는 잘못된 것입니다. 그러나 한 가지 규칙을 찾을 수 있습니다. 즉, 두 개의 최대 값을 취하고 각 브라우저와 호환됩니다. 따라서 우리의 메인 페이지 코드는 이것으로 변환해야합니다.
함수 reinitiframe () {var iframe = document.getElementById (frame_content);
노력하다{
var bheight = iframe.contentwindow.document.body.scrollheight;
var dheight = iframe.contentwindow.document.documentElement.scrollheight;
var height = math.max (bheight, dheight);
iframe.height = 높이;
} catch (ex) {}
}
Window.setInterval (Reinitiframe (), 200); 이러한 방식으로 호환성 문제는 기본적으로 해결됩니다. 그건 그렇고, 절대적으로 배치 된 층이 값에 영향을 미칠뿐만 아니라 Float는 두 값의 차이를 유발합니다.
데모를 보여 주면, 즉 층이 확장되고 숨겨진 경우를 제외한 다른 브라우저에서, 획득 된 높이 값은 여전히 303의 확장 된 높이에서 유지되며, 이는 184가 숨겨져있는 진정한 값이 아니라 키가 커지면 다시 수축 할 수 없음을 의미합니다. 이 현상은 다른 포함 페이지를 전환 할 때 발생할 수도 있습니다. 높은 페이지에서 낮은 페이지로 전환 할 때 얻은 높이는 여전히 동일한 높은 값입니다.
iframe 형태의 높이가 문서의 실제 높이보다 높을 때, 높이는 양식의 높이로 간주되고, 양식의 높이가 문서의 실제 높이보다 낮을 때, 문서의 실제 높이는 문서의 실제 높이로 간주됩니다. 따라서 동기화하기 전에 실제 문서보다 높이를 낮은 값으로 설정하는 방법을 찾아야합니다. 따라서 onload = this.height = 100 ″을 iframe에 추가하여로드 할 때 페이지가 충분히 짧아서 동일한 높이와 동기화하십시오.
이 값은 실제 애플리케이션에서 결정되며 충분히 짧지 만 너무 짧지는 않습니다. 그렇지 않으면 FF와 같은 브라우저에서 명백한 깜박임이 나타납니다. DOM이 작동하면 메인 페이지를 모니터링 할 수 없으므로 DOM이 작동 한 후에도 높이를 줄일 수 있습니다.
실제 프로젝트 중 하나에서, 나는이 코드를 각 DOM 함수에 삽입해야하기 때문에 계량 비용과 혜택 측면 에서이 작업을 수행하지 않았습니다. 실제로 너무 비싸기 때문에 실제로 레이어를 축소하거나 축소하지 않는 것은 그렇게 치명적이지 않습니다. 데모를 포함하여,이 일은 끝나지 않았습니다. 독자가 더 나은 방법을 가지고 있다면 알려주십시오.
다음은 마지막 메인 페이지의 코드입니다.
<iframe id = frame_content src = iframe_b.html scrolling = no frameborder = 0> </iframe>
<스크립트 유형 = 텍스트/JavaScript>
함수 reinitiframe () {
var iframe = document.getElementById (frame_content);
노력하다{
var bheight = iframe.contentwindow.document.body.scrollheight;
var dheight = iframe.contentwindow.document.documentElement.scrollheight;
var height = math.max (bheight, dheight);
iframe.height = 높이;
} catch (ex) {}
}
Window.setInterval (Reinitiframe (), 200);
< /스크립트>