iframe이 수직 공간을 차지하도록 만들기

Question

나는 갖고 싶다 iframe 내용을 표시하고 스크롤 막대를 표시하지 않는 데 필요한 만큼의 수직 공간을 차지합니다.그것은 전혀 가능합니까?

해결 방법이 있나요?

Answer 1

이렇게 하면 IFRAME 높이를 콘텐츠 높이로:

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

추가하고 싶을 수도 있습니다 scrolling="no" 너의 ~에게 IFRAME 스크롤바를 끄려면.

편집하다: 이런, 선언하는 걸 깜빡했어요 the_height.

Answer 2

해결 방법은 사용하지 않는 것입니다. <iframe> 서버 측에서 코드를 전처리합니다.

Answer 3

또한 이 스레드를 확인하십시오. DiggBar는 도메인에 없는 콘텐츠를 기반으로 iframe 높이의 크기를 어떻게 동적으로 조정합니까?.

동일한 질문을 다루고 있습니다.

Answer 4

이 CSS 조각은 수직 스크롤 막대를 제거해야 합니다.

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

필요한 만큼의 수직 공간을 차지하게 되는지 아직 확실하지 않지만, 알아낼 수 없는지 살펴보겠습니다.

Answer 5

추가 DOCTYPE 에 대한 선언 IFRAME 소스 문서는 라인에서 올바른 값을 계산하는 데 도움이 됩니다.

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

보다 예를 위한 W3C DOCTYPE

IE와 FF를 렌더링하면서 문제가 발생했습니다. iframe 문서를 'quirks' 모드로 추가하기 전까지는 DOCTYPE.

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

<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>