make iframe 세로폭 동적임 컨텐츠를 기반으로 인사이드라면 JQUERY/Javascript

나는 한 영문 웹 페이지 로딩 iframe 에서. Iframe 할 수 있는 내용을 보다 더 높이 iframe& # 39 의 높이이다. 하지 말았어야 하는 iframe 의 화면 이동난.

I have a 래퍼 'div 태그를 iframe 내부의 있는' 는 기본적으로 모든 컨텐트입니다. 내가 할 일이 크기조정할 작성했습니까 일부 포함한다.

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

여기서 '' 는 'Iframe' 가 있는 div TB_window v2.03-00.

'-' 의 영문 iframe 태그를 바디입니다 된다.

이 스크립트입니다 첨부됩니다 iframe 컨텐트입니다. 나는 TB_window 요소를 가져오는 '' 모 서피스에서 호출이네요 그 동안 크롬, 그러나 TB_window Firefox 에서 대한 무차별적인 작동합니다. 정말 안 되는 이유를 / 손실됩니다 일이 발생한다.

L84
편집된 질문10일 8월 2015 в 10:49
프로그래밍
asp.net iframe javascript jquery
6일 2월 2012 в 3:55
2661 파운드
질문에 대한 의견 (5)

'& # 39 의 높이에 검색할 수 있습니다' IFRAME 을 사용하여 내용을: '콘텐토빈다우스도쿠망.보디지스크롤하이트'

그런 다음 높이, 이후 '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 태그를 처리기에서 다음과 같습니다.

해설 (24)

약간 향산된 위해 오토메이티드 아리스토스.

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

그럼 너희가운데 in your iframe 다음과 같습니다.

eddyparkinson
편집된 답변29일 8월 2019 в 8:29
해설 (11)

39, t 충분할 만큼 내가 찾은 작업자쪽에서 수락됨 didn& 오토메이티드 x-프레임-옵션. [# 39 에서 지원되는 또는 크롬, 사파리 isn& t] 에서 허용하시겠습니까 (https://developer.mozilla.org/en-us/docs/http/x-frame-options). 또 다른 외곽진입 대신 함께 발견된 [표현] (http://benvinegar.github.io/seamless-talk/ # dvi/1 개) 에서 벤 식초 디스크스 주어진다. 이 후 이 아이디어는 이벤트 리스너를 추가합니다 부모창 iframe 내부의 사용하여 이벤트를 전송할지 빈다우스포스트 세이지 뭔가를 말하는 이 모 (크기조정할 이 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 태그를 onLoad 추가 기능:

해설 (2)

이 추가 iframe, 이 협력했습니다 가져다줄래요:

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

Jquery 시도하시겠습니까 사용할 경우 이 코드:

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

4 가지 속성을 afaq 높이를 컨텐트입니다 iframe 에서 볼 수 있습니다.

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

안타깝게도 모든 질문에 대한 대답, 이들은 다른 브라우저 사이에 일관성없는 열거하십시오 수 있습니다. 다음 '여백' 는 0 으로 설정하면 바디입니다 도쿠망.보디오프스테이트 정답입니다. 이 함수, 정확한 값을 얻으려면 시도하시겠습니까 [iframe 레이저] 에서 원하는거요 수행됨을 (https://github.com/davidjbradshaw/iframe-resizer) iframe 정확한 크기를 유지하고 있는 것 또한 library*라는 후 때, 또는 내용을 브라우저가 크기조정.

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');
}
해설 (2)

그래서 내가 한 일을 다른 답을 작동안함 가져다줄래요 약간의 변화가 있었다. 이를 통해 희망을

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

혹시 이렇게 하면 누구나. 난 내 머리카락 잡아당기기 위해 노력하고 있다는 사실을 알고 있었지만, 그 때 나는 이 일을 아웃해야 afaq afnor iframe 높이가 클래스용 엔트리여야: 100%. 이 모든 것을 제거했을 때, 협력했습니다 강타했다. 따라서 모든 css dbasyb 충돌함.

해설 (0)

데이터베이스에구성원을 레이제이프라임 리퀘스타니마시옹프라임 리피팅 추가할 수도 있습니다 (예를 들어, s # 39 에서 @BlueFish& 오토메이티드) 가 항상 불렀으매 있지만브라우저에 전에 페인팅합니다 레이아웃뿐만 수 있습니다 컨텐츠의 업데이트 때 iframe 의 높이에 있는 높이 바꿨다. 예를 들어 입력입니다 양식, 게으른 로드됨 컨텐트입니다 상술합니다.


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

여기에 질문 - # 38917939 https://stackoverflow.com/questions/18765762/how-to-make-width-and-height-of-iframe-same-as-its-parent-div/38917939 관련 참조할 수 있습니다

동적 세로폭 설정할 수 있습니다 -

  1. 상위 / 크로스 도메인 iframe 통신하도록 필요하다.
  2. 그런 다음 높이 iframe 을 부모창 스크롤해야 보낼 수 있는 높이 / 컨텐츠

및 코드 - https://gist.github.com/mohandere/a2e67971858ee2c3999d62e3843889a8

Community
편집된 답변23일 5월 2017 в 12:18
해설 (0)

내가 찾은 제프 스크리프트 / jquery 가장 쉬운 방법은 사용하지 않고 있다.

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. &gt 거짓값 -;

끝 - &lt 스니핏 >;!

여기 1vh = 1% 의 브라우저 창 높이. 하지만 이론적인 값을 설정할 수 있어 사실상 한 것은 높이 100vh 98vh 매직.

해설 (2)

사마라스페시알처즈 () + PHP 사용 샘플링합니다 &gt 있는지 세로폭 존재하며, 0:

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. &gt 거짓값 -;

$my_html_markup = ''; // Insert here HTML markup with CSS, JS... '...'
$iframe = '';

끝 - &lt 스니핏 >;!

해설 (0)

내가 찾은 답은 트로이 didn& # 39 에서, 빗나갔다. 이것은 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)

창 아래에 있는 것 같다는 청크에는 추가할 수 없는 단절된 don& 때 특히 # 39, 스크롤하지 내가 사용합니다.

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

</div>

CSS 는 코드 예제:

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

.iframecontainer{
    position: relative;
    width: 100%;
    height: auto;
    padding-top: 61%;
}
Juan M
편집된 답변15일 11월 2016 в 5:36
해설 (0)

간단한 솔루션은 폭과 높이를 측정하기 위해 사용할 수 있는 지역, 그리고 그 내용을 측정선을 계산하십시오 패딩 (%) 입니다.

이 경우 측정은 1680년 x 720 픽셀 도왔으매 패딩 아래에 있는 이 제품은 43% 는 720e / 1680년 = 100 0.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%;   
}
Tot Zam
편집된 답변15일 11월 2016 в 10:49
해설 (0)

약간 향산된 위해 오토메이티드 포마토무스 살타트릭스.

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";
}

이 경우 높이를 고려해 indows 화면 (브라우저, 전화) 가 있는 높이 응답성의 설계 및 iframe 큰 것이 좋다. 패딩 seabreeze 패딩 운영까지도 위와 아래에 있는 기압골 댁이라면 iframe 경우 전체 화면.

해설 (0)
 
jQuery('.home_vidio_img1 img').click(function(){
    video = '';
    jQuery(this).replaceWith(video);
});

jQuery('.home_vidio_img2 img').click(function(){
    video = ;
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});

jQuery('.home_vidio_img3 img').click(function(){
    video = '';
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});

jQuery('.home_vidio_img4 img').click(function(){
    video = '';
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});
Pang
편집된 답변30일 6월 2017 в 9:27
해설 (0)
$(document).height() // - $('body').offset().top

및 / 또는

$(window).height()

스택 오버플로 지켜보리니 . 질문 https://stackoverflow.com/questions/806402

이 com/go/downloads_kr 시도하시겠습니까 높이를 몸에 포함한다.

if $("body").height()

이 경우, [파이어버그] [1] # 39 doesn& 값을 가질 수 없다. 아마도 that& # 39 의 점이다.

[1]: http://en.wikipedia.org/wiki/Firebug_% 28software% 29

Community
편집된 답변23일 5월 2017 в 12:34
해설 (2)