iframe 중첩 하위 페이지(iframe 포함)의 자동 확장에 대한 자세한 설명

회사의 웹사이트 백엔드는 원래 iframe을 사용하여 설계되지 않았습니다. 나중에 리소스 절약을 위해 논의 끝에 웹사이트 백엔드를 iframe으로 변경하기로 결정했습니다. iframe은 ajax와 유사한 부분 새로 고침 효과를 얻을 수 있습니다.(구현 원리는 다릅니다.) iframe은 매우 강력하지만 하위 페이지의 높이에 따라 자동으로 확장되지는 않습니다. 이것이 매우 귀찮아서 온라인에서 검색했습니다. 다음 방법을 찾아 개선해 보세요.

1. jquery 획득(참고: 이 방법은 동일한 도메인 이름의 상위 및 하위 카테고리 페이지에만 적합하며 하위 카테고리 페이지에는 iframe을 포함할 수 없습니다)

aa.html(상위 및 페이지)

<iframe name="rightcontent"  id="rightcontent" src=&#39;bb.html&#39; frameborder="0" width="100%" scrolling="no"></iframe>

$("#rightcontent").load(function(){
       var mainheight = $(this).contents().find("body").height()+30;
       $(this).height(mainheight);
    });

2 . js를 사용하여 얻습니다(인터넷에서 js를 얻는 방법은 여러 가지가 있으며, 일반 검색으로 찾을 수 있지만 하위 카테고리 페이지에는 iframe이 포함될 수 없다는 점에 유의해야 합니다. 하위 카테고리 페이지에 ifrme가 있는 경우 자동 확장 효과를 얻을 수 없음)

function SetCwinHeight(obj) {
    var cwin = obj;
    if (document.getElementByIdx_x_x_x) {       
      if (cwin && !window.opera) {
            if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight){
               cwin.height = cwin.Document.body.offsetHeight + 30;
               alert(cwin.height); //FF NS
            }else if (cwin.Document && cwin.Document.body.scrollHeight){
                cwin.height = cwin.Document.body.scrollHeight + 10;
            } //IE
        }else {
            this.height=rightcontent.document.body.scrollHeight+30
            if (cwin.contentWindow.document && cwin.contentWindow.document.body.scrollHeight)
                cwin.height = cwin.contentWindow.document.body.scrollHeight; //Opera
        }
    }
}

<iframe name="rightcontent"  id="rightcontent" src=&#39;bb.html&#39; frameborder="0" width="100%" scrolling="no" onload="SetCwinHeight(this)">
</iframe>

3. 하위 카테고리 페이지에 포함된 iframe 지원, 즉 iframe 중첩(Firefox 및 IE에서 테스트되었으며 다른 브라우저는 아직 테스트되지 않음)

 <iframe name="rightcontent"  id="rightcontent" src=&#39;bb.html&#39; frameborder="0" width="100%" scrolling="no" onload="this.height=rightcontent.document.body.scrollHeight+50"></iframe>

4. 웹사이트는 보충적으로 사용합니다. 방법 3이지만 교차 도메인 이름과 관련된 경우 4ec11beb6c39d0703d1751d203c17053document.domain = 'xxx.com';

하위 페이지에서

<script type="text/javascript">
//设置域信息
document.domain = &#39;xxx.com&#39;;
//设置父级页面引用自身的iframe高度
function setHeight(){
  //判断是否为顶级页面
  if(window.top!=window.self){
      parent.document.getElementByIdx_x(&#39;rightcontent&#39;).height=document.body.scrollHeight+20
  }
}
setHeight();
</script>

위 내용은 iframe 중첩 하위 페이지(iframe 포함)의 자동 확장에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!