iframe 중첩 하위 페이지(iframe 포함)의 자동 확장에 대한 자세한 설명-HTML 튜토리얼-php.cn

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

黄舟

풀어 주다： 2017-07-24 09:23:37

원래의

3409명이 탐색했습니다.

회사의 웹사이트 백엔드는 원래 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이지만 교차 도메인 이름과 관련된 경우

저자별 최신 기사