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

Program / 글쓴이

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가 축소됩니다. 왜 그런 일이 일어나는지 정말 혼란 스럽습니다.

답변

다음 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();

답변

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

답변

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();">

답변

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

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

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

onload="$(this).height($(this.contentWindow.document.body).find(\'div\').first().height());"

답변

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');
}

답변

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

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

답변

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

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

스 니펫 확장

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