JQUERY / Javascript 내부의 내용을 기반으로 iframe 높이를 동적으로 설정

202

iframe에 aspx 웹 페이지를로드하고 있습니다. Iframe의 내용은 iframe의 높이보다 높을 수 있습니다. iframe에는 스크롤 막대가 없어야합니다.

div기본적으로 모든 내용 인 iframe 안에 래퍼 태그가 있습니다. 크기 조정이 발생하도록 jQuery를 작성했습니다.

$("#TB_window", window.parent.document).height($("body").height() + 50);

어디에 포함 TB_window되어있는 div입니다 Iframe.

body -iframe에서 aspx의 본문 태그.

이 스크립트는 iframe 컨텐츠에 첨부됩니다. TB_window부모 페이지에서 요소를 가져옵니다 . Chrome에서는 제대로 작동하지만 Firefox에서는 TB_window가 축소됩니다. 왜 그런 일이 일어나는지 정말 혼란 스럽습니다.

javascript  jquery  asp.net  iframe 
— 카리
소스
.aspx iframe 페이지가 동일한 도메인 이름에서 온 것입니까?
— AlexC
firefox에서 $ ( "body"). height () 값을 확인할 수 있습니까?
— Michael L Watson
예. iframe은 컨테이너 페이지와 동일한 도메인에 있습니다
— karry
그것은 불을 지르고 시계 창처럼 보이는 @MichaelLWatson 몸 높이 0으로 값을 가지고 ... 크롬은 값하지만 가지고
— karry을
Angular iFrame 자동 높이 예 : gitlab.com/reduardo7/angular-iframe-auto-height
— Eduardo Cuomo

답변:

211

다음 IFRAME을 사용하여 님의 콘텐츠 높이를 검색 할 수 있습니다 . contentWindow.document.body.scrollHeight

를 IFRAME로드 한 후 다음을 수행하여 높이를 변경할 수 있습니다.

<script type="text/javascript">
  function iframeLoaded() {
      var iFrameID = document.getElementById('idIframe');
      if(iFrameID) {
            // here you can make the height, I delete it first, then I make it again
            iFrameID.height = "";
            iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
      }   
  }
</script>

그런 다음 IFRAME태그에서 다음과 같이 핸들러를 연결하십시오.

<iframe id="idIframe" onload="iframeLoaded()" ...

제가 추가로 호출 할 필요가 어디에 얼마 전에 상황 a를했다 iframeLoaded으로부터 IFRAME양식 제출 내 발생 후 자체. IFRAME의 컨텐츠 스크립트 내에서 다음을 수행하여이를 수행 할 수 있습니다 .

parent.iframeLoaded();
— 아리스 토스
소스
152
교차 도메인에서는 지원되지 않습니다.
— Soumya
3
@Soumya 교차 도메인은이 코드와 관련이 없습니다. 명령으로 무시하는 보안 문제가 있습니다.
— Aristos
9
@Soumya X-FRAME-OPTIONS다음 Response.AddHeader("X-FRAME-OPTIONS", "SAMEORIGIN");과 같이 줄을 추가하십시오 : 또는response.addHeader("X-FRAME-OPTIONS", "Allow-From https://some.othersite.com");
— Aristos
15
이것은 크로스 도메인 iframe 크기 문제 github.com/davidjbradshaw/iframe-resizer를
— David Bradshaw
2
@deebs 또한 변경을 시도 할 수 iFrameID.height = "";로 iFrameID.height = "20px";. 기본 브라우저 iframe 높이는 150px이며 ""다시 설정됩니다.
— philfreo
112

Aristos에 대한 약간 개선 된 답변 ...

<script type="text/javascript">
  function resizeIframe(iframe) {
    iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
  }
</script>

그런 다음 iframe에서 다음과 같이 선언하십시오.

<iframe onload="resizeIframe(this)" ...

두 가지 사소한 개선이 있습니다.

  1. onload 콜백에 이미 있으므로 document.getElementById를 통해 요소를 가져올 필요가 없습니다.
  2. iframe.height = ""다음 문장에서 다시 할당 하려는 경우 에는 설정할 필요가 없습니다 . 그렇게하면 실제로 DOM 요소를 처리 할 때 오버 헤드가 발생합니다.

편집 : 프레임의 내용이 항상 변경되면 다음을 호출하십시오.

parent.resizeIframe(this.frameElement);

업데이트 후 iframe 내에서. 동일한 출처에서 작동합니다.

또는 자동 감지 :

  // on resize
  this.container = this.frameElement.contentWindow.document.body;

  this.watch = () => {
    cancelAnimationFrame(this.watcher);

    if (this.lastScrollHeight !== container.scrollHeight) {
      parent.resizeIframeToContentSize(this.frameElement);  
    }
    this.lastScrollHeight = container.scrollHeight;
    this.watcher = requestAnimationFrame(this.watch);
  };
  this.watcher = window.requestAnimationFrame(this.watch);
— 블루 피쉬
소스
6
프레임의 내용이 항상 바뀌면 어떻게해야합니까?
— Kevin
콘텐츠 크기가 계속 변경되거나 iframe이 iframe이 페이지를 가져 오는 도메인 이외의 다른 도메인에 배치되도록 설계된 경우 다른 작업을 수행해야합니다.
— BlueFish
4
이를 위해 해결책은 postMessage와 receiveMessage를 사용하는 것입니다. 나는이 사용하여 해결 github.com/jeffomatic/nojquery-postmessage
— 전갱이
아이디어는 새로운 높이를 계산하고 메시지를 수신하고 그에 따라 iframe의 높이를 조정 해야하는 부모 프레임으로 메시지를 보내는 것입니다.
— BlueFish
그것은 항상 나를 위해 약간의 픽셀이었습니다. 그래서 나는 이것을 생각해 냈습니다. function resizeIframe(iframe) { var size=iframe.contentWindow.document.body.scrollHeight; var size_new=size+20; iframe.height = size_new + "px"; }
— Martin Mühl
56

X-FRAME-OPTIONS : Allow-From 이 safari 또는 chrome에서 지원되지 않기 때문에 허용 된 답변이 충분하지 않다는 것을 알았습니다 . 대신 Disqus의 Ben Vinegar 의 프레젠테이션 에서 다른 접근 방식을 사용했습니다 . 아이디어는 부모 창에 이벤트 리스너를 추가 한 다음 iframe 내부에서 window.postMessage를 사용하여 이벤트를 부모에게 보내어 무언가를 수행하도록 지시합니다 (iframe 크기 조정).

따라서 상위 문서에서 이벤트 리스너를 추가하십시오.

window.addEventListener('message', function(e) {
  var $iframe = jQuery("#myIframe");
  var eventName = e.data[0];
  var data = e.data[1];
  switch(eventName) {
    case 'setHeight':
      $iframe.height(data);
      break;
  }
}, false);

그리고 iframe 안에 메시지를 게시하는 함수를 작성하십시오.

function resize() {
  var height = document.getElementsByTagName("html")[0].scrollHeight;
  window.parent.postMessage(["setHeight", height], "*"); 
}

마지막으로 iframe 내부에서 body 태그에 onLoad를 추가하여 크기 조정 기능을 실행하십시오.

<body onLoad="resize();">
— 마티 멀리건
소스
1
이것이 나를 위해 작동하려면 "window.parent"를 "parent"로 변경해야했습니다.
— prograhammer
큰! 그러나 높이를 한 번만로드합니다. iframe을 실제로 반응 적으로 만들려면 매 초마다 resize 메서드를 호출하는 것이 좋습니다.setInterval(resize, 1000);
— Jules Colle
12

이것을 iframe에 추가하면 이것이 나를 위해 일했습니다.

onload="this.height=this.contentWindow.document.body.scrollHeight;"

jQuery를 사용하는 경우 다음 코드를 시도하십시오.

onload="$(this).height($(this.contentWindow.document.body).find(\'div\').first().height());"
— 모 히트 아네 자
소스
6

iFrame에서 컨텐츠의 높이를 얻기 위해 볼 수있는 네 가지 속성이 있습니다.

document.documentElement.scrollHeight
document.documentElement.offsetHeight
document.body.scrollHeight
document.body.offsetHeight

슬프게도 그들은 모두 다른 답변을 줄 수 있으며 브라우저마다 일치하지 않습니다. 본문 여백을 0으로 설정 document.body.offsetHeight하면 가장 좋은 답이됩니다. 올바른 값을 얻으려면이 기능을 사용해보십시오. 콘텐츠가 변경되거나 브라우저의 크기가 조정될 때 iFrame을 올바른 크기로 유지 한 후에도 확인하는 iframe 리사이 저 라이브러리 에서 가져옵니다 .

function getIFrameHeight(){
    function getComputedBodyStyle(prop) {
        function getPixelValue(value) {
            var PIXEL = /^\d+(px)?$/i;

            if (PIXEL.test(value)) {
                return parseInt(value,base);
            }

            var 
                style = el.style.left,
                runtimeStyle = el.runtimeStyle.left;

            el.runtimeStyle.left = el.currentStyle.left;
            el.style.left = value || 0;
            value = el.style.pixelLeft;
            el.style.left = style;
            el.runtimeStyle.left = runtimeStyle;

            return value;
        }

        var 
            el = document.body,
            retVal = 0;

        if (document.defaultView && document.defaultView.getComputedStyle) {
            retVal =  document.defaultView.getComputedStyle(el, null)[prop];
        } else {//IE8 & below
            retVal =  getPixelValue(el.currentStyle[prop]);
        } 

        return parseInt(retVal,10);
    }

    return document.body.offsetHeight +
        getComputedBodyStyle('marginTop') +
        getComputedBodyStyle('marginBottom');
}
— 데이비드 브래드쇼
소스
데이터 테이블 또는 플로팅 div와 같이 "롤업"되는 항목에는 작동하지 않습니다. 높이는 롤링되지 않은 일반 높이가 무엇인지에 따라 결정되며 최종 높이는 아닙니다.
— djack109
@ djack109 CSS에서 무언가가 페이지에서 요소 축소를 막을 가능성이 높습니다
— David Bradshaw
3

다른 답변이 저에게 효과가 없었으므로 변경을했습니다. 이것이 도움이되기를 바랍니다.

$('#iframe').on("load", function() {
    var iframe = $(window.top.document).find("#iframe");
    iframe.height(iframe[0].ownerDocument.body.scrollHeight+'px' );
});
— 라비
소스
2

javscript / jquery를 사용하는 대신 내가 찾은 가장 쉬운 방법은 다음과 같습니다. 

<iframe style="min-height:98vh" src="http://yourdomain.com" width="100%"></iframe>
스 니펫 확장

여기서 1vh = 브라우저 창 높이의 1 %입니다. 높이의 이론적 인 값은 100vh이지만 실제로 98vh는 마법을 사용했습니다.

— 비 노드
소스
9
이것은 iframe의 콘텐츠 높이를 고려하지 않습니다.
— Adrian Pauly
도메인 간 드라마를 간단하게
— 해결할
2

만일 누군가에게 도움이 될 경우를 대비하여. 나는 이것을 작동 시키려고 머리카락을 뽑아 내고 iframe에 높이가 100 % 인 클래스 항목이 있음을 알았습니다. 이것을 제거하면 모든 것이 예상대로 작동했습니다. 따라서 CSS 충돌이 있는지 확인하십시오.

— 사용자
소스
2

브라우저가 레이아웃을 페인트하기 전에 항상 호출되는 resizeIframe에 반복 requestAnimationFrame을 추가 할 수 있으며 (예 : @BlueFish의 답변에서) 내용의 높이가 변경되면 iframe의 높이를 업데이트 할 수 있습니다. 예 : 입력 양식, 지연로드 된 내용 등

<script type="text/javascript">
  function resizeIframe(iframe) {
    iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
    window.requestAnimationFrame(() => resizeIframe(iframe));
  }
</script>  

<iframe onload="resizeIframe(this)" ...

콜백은 전체 성능에 큰 영향을 미치지 않을 정도로 빠를 것

— 사용자
소스
1
이것은 초기 테스트에서 잘 작동하는 매우 매끄러운 솔루션입니다. 이것을 사용하여 성능에 미치는 영향에 관심이 있습니다.
— KFE
is Uncaught TypeError: Cannot read property 'scrollHeight' of null이후 사례에 부딪 쳤지 만 정상적으로 작동합니다. bodynull
— caot
1

jQuery와 아래 코드가 나를 위해 일하고 있습니다.

var iframe = $(window.top.document).find("#iframe_id_here");
iframe.height(iframe.contents().height()+'px' );
— 스리랑카
소스
0

Troy의 답변이 효과가 없다는 것을 알았습니다. 이것은 ajax를 위해 재 작업 된 동일한 코드입니다.

$.ajax({                                      
    url: 'data.php',    
    dataType: 'json',                             

    success: function(data)
    {
        // Put the data onto the page

        // Resize the iframe
        var iframe = $(window.top.document).find("#iframe");
        iframe.height( iframe[0].contentDocument.body.scrollHeight+'px' );
    }
});
— 마틴 레스터
소스
0

하단에 잘린 것처럼 보이는 창 덩어리에 추가하려면, 특히 스크롤이 없을 때 사용했습니다.

function resizeIframe(iframe) {
    var addHeight = 20; //or whatever size is being cut off
    iframe.height = iframe.contentWindow.document.body.scrollHeight + addHeight + "px";
  }
— 맷 스테이시
소스
0

이것은 jquery가없는 솔루션이 필요할 때 유용합니다. 이 경우 컨테이너를 추가하고 패딩을 백분율로 설정해야합니다.

HTML 예제 코드 :

<div class="iframecontainer">
    <iframe scrolling="no" src="..." class="iframeclass"width="999px" height="618px"></iframe>
</div>

CSS 예제 코드 :

.iframeclass{
    position: absolute;
    top: 0;
    width: 100%;
}

.iframecontainer{
    position: relative;
    width: 100%;
    height: auto;
    padding-top: 61%;
}
— 후안 M
소스
0

간단한 해결책은 컨텐츠 영역의 너비와 높이를 측정 한 다음 해당 측정을 사용하여 하단 패딩 백분율을 계산하는 것입니다.

이 경우 측정 값은 1680 x 720 픽셀이므로 맨 아래의 패딩은 720/1680 = 0.43 * 100으로 43 %가됩니다.

.canvas-container {    
    position: relative;
    padding-bottom: 43%; // (720 ÷ 1680 = 0.4286 = 43%)
    height: 0;
    overflow: hidden;   
}

.canvas-container iframe {    
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;   
}
— 로크
소스
0

BlueFish에 대한 약간 개선 된 답변 ...

function resizeIframe(iframe) {
    var padding = 50;
    if (iframe.contentWindow.document.body.scrollHeight < (window.innerHeight - padding))
        iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
    else
        iframe.height = (window.innerHeight - padding) + "px";
}

반응 형 디자인과 높이가 큰 iframe에 적합한 Windows 화면 (브라우저, 전화)의 높이를 고려합니다. 패딩은 전체 화면을 통과하는 경우 iframe 위와 아래에 원하는 패딩을 나타냅니다.

— 타지 벤구 스트
소스
0 
jQuery('.home_vidio_img1 img').click(function(){
    video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
    jQuery(this).replaceWith(video);
});

jQuery('.home_vidio_img2 img').click(function(){
    video = <iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>;
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});

jQuery('.home_vidio_img3 img').click(function(){
    video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});

jQuery('.home_vidio_img4 img').click(function(){
    video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});
— 키어 사 바니
소스
0

PHP를 사용하는 샘플 htmlspecialchars () + 높이가 존재하고 0보다 큰지 확인하십시오. 

$my_html_markup = ''; // Insert here HTML markup with CSS, JS... '<html><head></head><body>...</body></html>'
$iframe = '<iframe onload="if(this.contentWindow.document.body.scrollHeight) {this.height = this.contentWindow.document.body.scrollHeight;}" width="100%" src="javascript: \''. htmlspecialchars($my_html_markup) . '\'"></iframe>';
— jteks
소스
0

iframe 컨테이너 위치를 지정하십시오 : 절대 및 iframe은 내용에 따라 높이를 자동 변경합니다

<style>
   .iframe-container {
       display: block;
       position: absolute;
       /*change position as you need*/
       bottom: 0;
       left: 0;
       right: 0;
       top: 0;
   }
   iframe {
       margin: 0;
       padding: 0;
       border: 0;
       width: 100%;
       background-color: #fff;
   }
 </style>
 <div class="iframe-container">
     <iframe src="http://iframesourcepage"></iframe>
 </div>
— 하템 바다 위
소스
-1 
$(document).height() // - $('body').offset().top

그리고 / 또는

$(window).height()

스택 오버플로 질문 본문 요소의 높이를 얻는 방법을 참조하십시오 .

jQuery에서 본문의 높이를 찾으려면 다음을 시도하십시오.

if $("body").height()

Firebug 인 경우 값이 없습니다 . 아마도 그게 문제 일 것입니다.

— 마이클 L 왓슨
소스
두 가지를 모두 시도했지만 ... Firefox에서 여전히 발생합니다. 파이어 폭스는 어떻게 든 iframe에서 window.height ()를 얻지 못합니다. 앞서 언급했듯이 스크립트는 Iframe 컨텐츠에 첨부되어 있으며 document.ready () 함수에서
— karry입니다.
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.