2008-08-29 6 views
8

iframe에는 콘텐츠를 표시하고 스크롤바를 표시하지 않는 데 필요한만큼의 수직 공간이 필요합니다. 가능한가요?iframe을 세로 공간으로 만들기

해결 방법이 있습니까? 그것을 필요로만큼 수직 공간을 차지 문제에 대해 아직

body { 
    overflow-x: hidden; 
    overflow-y: hidden; 
} 

잘 모르겠어요,하지만 난 알아낼 수 없습니다 경우 내가 볼 수 있습니다 :

답변

10

이것은 컨텐츠의 높이로 IFRAME 높이를 설정해야합니다

<script type="text/javascript"> 
the_height = document.getElementById('the_iframe').contentWindow.document.body.scrollHeight; 
document.getElementById('the_iframe').height = the_height; 
</script> 

당신은 스크롤바를 해제하기 위해 IFRAMEscrolling="no"을 추가 할 수 있습니다.

편집 : 수정 : the_height을 잊어 버렸습니다.

+4

매우 편리합니다. iframe이 동일한 출처 정책으로 인해 다른 도메인에있는 경우 잘 작동하지 않는다는 것을 언급 할 가치가 있습니다. – ConroyP

0

이 CSS 조각은 세로 스크롤 막대를 제거해야 그것.

0

document.getElementById('the_iframe').contentWindow.document.body.scrollHeight 

내가 IE와 FF 모두에 문제가 있었다 W3C DOCTYPE for examples

를 참조 라인에서 정확한 값을 계산하는 데 도움이 될 것입니다 IFRAME 소스 문서에 DOCTYPE 선언을 추가 그것은 렌더링 된로 DOCTYPE을 추가 할 때까지 iframe 문서가 'quirks'모드로 표시됩니다.

FF/IE/Chrome 지원 : .scrollHeight는 Chrome에서 작동하지 않으므로 iframe 콘텐츠를 기반으로 페이지의 높이를 모두 IFRAME으로 설정하는 jQuery를 사용하여 자바 스크립트 예제를 만들었습니다. 참고 : 이것은 현재 도메인 내의 참조 페이지 용입니다.

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('iframe').each(function(){ 
      var context = $(this); 
      context.load(function(event){ // attach the onload event to the iframe 
       var body = $(this.contentWindow.document).find('body'); 
       if (body.length > 0 && $(body).find('*').length > 0) { // check if iframe has contents 
        context.height($(body.get(0)).height() + 20); 
       } else { 
        context.hide(); // hide iframes with no contents 
       } 
      }); 
     }); 
    }); 
</script> 
0

해결 방법은 서버 쪽에서 및 사전 처리 코드를 사용하지 않는 것입니다.

+2

링크를 다시 작성하는 맞춤 프록시 서버를 만들지 않는 한 항상 가능하지는 않습니다. html body ... 농담입니다. – ErikE