iframe은 크로스 브라우저 적응력 높이 솔루션을 구현합니다

이 기사는 크로스 브라우저에서 Iframe의 고도로 적응 가능한 솔루션을 설명합니다. 참조를 위해 공유하십시오. 특정 방법은 다음과 같습니다.

이 방법은 jQuery를 사용하므로 jQuery를 iframe의 SRC 페이지에 도입해야합니다.

상위 페이지는 주로 다음 코드를 포함하여 비교적 간단합니다.

 <iframe id = "if1"scrolling = "no"src = "2.html"> </iframe>

iframe의 SRC 페이지의 코드는 다음과 같습니다.

 <script type = "text/javaScript"> 함수 resizeContent () {$ (window.parent.document) .find ( "#if1"). height ($ ( "#content"). height ());} 함수 show400 () {if ($ ( "#test400"). css ( "display") == "none") { $ ( "#test400"). css ( "display", ""); resizecontent (); } else {$ ( "#test400"). css ( "display", "none"); resizecontent (); }} $ (document) .ready (function () {resizeContent ();}) </script> <div id = "left111"> <div onclick = "test400 ()"> </div> <div> <a href = "productlist.html"> hyperlink </a> <div> <a href = "productcategory.html"> hyperlink </a> </div> <div> <a href = "productcategory.html"> hyperlink </a> </div> <div> <a href = "uppublitcategory.html"> hyperlink </a> <div id = "test400" 스타일 = "디스플레이 : 높이 : 400px;"> </div> <div> <a href = "orders.html"> hyperlink </a> </div> <div> <kewords.html "> hyperlink </a> </div> <div> <a href ="#"</div> <an href = "#"> hyperlink </a> </div> <div> <a href = "#"> hyperlink </a> </div> <div> <a href = "#"> hyperlink </a> </div> <div> <a href = "#"> hyperlink </div> <div> <a href = "#"> 하이퍼 링크 </a> </div> <br/> </div>

참고 :

내부에

 $ (wind

이 문장은 원래 :

 $ (wind

적응력 높이를 달성 할 수 있지만 스케일링 적응은 달성 할 수 없습니다. 문서의 높이가 표시된 가장 높은 높이이기 때문에 여기에서 확장되면 클릭하면 Iframe이 줄어들지 않지만 표시된 가장 높은 높이 만 표시됩니다 .

따라서 여기에서는 최신 코드 인 상위 계층 컨테이너를 사용해야합니다. 이것은 적응성을 허용합니다.

이 기사의 설명에는 모든 사람의 JQuery 프로그래밍에 대한 특정 참조 값이 있다고 생각합니다.