Js 동적 으로 iframe 하위 페이지 의 높이 정 리 를 가 져 옵 니 다.

문제 의 연유
제품 의 댓 글 목록 은 iframe 을 인용 하여 높이 가 고정 되 지 않 아 이 총 결 을 야기 합 니 다.
방법 1: 부모 페이지 에서 하위 페이지 의 높이 를 가 져 와 요소 에 높이 를 설정 합 니 다.
이 방법 은 부모 페이지 에 사 용 됩 니 다. 하위 페이지 의 높이 를 가 져 와 iframe 에 높이 를 설정 합 니 다.
몇 가지 호환성 문제 가 언급 되 었 다.
IE 는 attachEvent | 3C 를 onload 로 하위 페이지 가 불 러 올 지 여 부 를 판단 합 니 다.
IE 는 contentWindow | 3C 는 contentDocument 으로 하위 페이지 를 가 져 옵 니 다.
IE 는 document. documentElement. scrollHeight (호 환 ie6 ie7) | 3C 는 body. scrollHeight 로 페이지 높이 를 가 져 옵 니 다.

function setIframeHeight(id){
    try{
        var iframe = document.getElementById(id);
        if(iframe.attachEvent){
            iframe.attachEvent("onload", function(){
                iframe.height =  iframe.contentWindow.document.documentElement.scrollHeight;
            });
            return;
        }else{
            iframe.onload = function(){
                iframe.height = iframe.contentDocument.body.scrollHeight;
            };
            return;                 
        }     
    }catch(e){
        throw new Error('setIframeHeight Error');
    }
}

 
방법 2: 하위 페이지 는 부모 페이지 요소 에 높이 를 설정 합 니 다.
이 방법 은 하위 페이지 에 사 용 됩 니 다. 하위 페이지 의 높이 를 가 져 와 부모 레벨 iframe 에 높이 를 설정 합 니 다.
하위 페이지 는 parent 를 통 해 부모 급 iframe 을 가 져 와 iframe 에 높이 를 설정 하고 같은 방법 1 을 호 환 합 니 다.
단점 은 부모 페이지 를 닦 을 때 iframe 에 캐 시가 있어 서 캐 시 를 치 워 야 효력 이 발생 합 니 다.

function setParentIframeHeight(id){
    try{
        var parentIframe = parent.document.getElementById(id);
         if(window.attachEvent){
            window.attachEvent("onload", function(){
                parentIframe.height = document.documentElement.scrollHeight;
            });
            return;
        }else{
            window.onload = function(){
                parentIframe.height = document.body.scrollHeight;
            };
            return;                 
        }     
    }catch(e){
        throw new Error('setParentIframeHeight Error');
    }
}

 
 
주의해 야 할 크로스 필드 작업
두 페이지 에 한 가지 상황 이 있 으 면 두 개의 도 메 인 이름:
aaa.xxx.combbb.xxx.com
두 페이지 를 모두 설정 해 야 합 니 다:
document.domain ="xgo.com.cn";
이렇게 하면 이 두 페이지 는 서로 조작 할 수 있다.같은 기초 도 메 인 이름 사이 의 '크로스 도 메 인' 을 실현 한 것 이다.
document. domain 을 이용 하여 도 메 인 을 뛰 어 넘 습 니 다: 전제조건: 이 두 도 메 인 은 같은 기본 도 메 인 에 속 해 야 합 니 다!또한 사용 하 는 프로 토 콜, 포트 가 일치 해 야 합 니 다. 그렇지 않 으 면 document. domain 을 이용 하여 도 메 인 자 바스 크 립 트 를 사용 할 수 없습니다. 안전성 을 고려 하여 두 개 이상 의 도 메 인 페이지 가 서로 조작 하 는 것 을 금지 합 니 다.같은 도 메 인 페이지 는 서로 조작 할 때 아무런 문제 가 없 을 것 입 니 다.