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

Question

Question

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

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 추가 기능:

<body onLoad="resize();">

Mohit Aneja · Answer 4 · 2015-04-22T14:51:47+00:00

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

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

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

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

David Bradshaw · Answer 5 · 2014-03-22T00:09:35+00:00

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

Ravi · Answer 6 · 2019-06-01T08:05:07+00:00

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

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

user8640976 · Answer 7 · 2017-09-20T11:43:18+00:00

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

user2520818 · Answer 8 · 2018-11-13T17:13:05+00:00

데이터베이스에구성원을 레이제이프라임 리퀘스타니마시옹프라임 리피팅 추가할 수도 있습니다 (예를 들어, s # 39 에서 @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)" ...

전반적인 성능 상의 큰 영향은 없을 정도로 너회의 콜백하는 빨라야 한다.

Mohan Dere · Answer 9 · 2016-08-12T12:37:16+00:00

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

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

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

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

PHP-Binod · Answer 10 · 2017-07-20T15:42:46+00:00

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

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

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

끝 - &lt 스니핏 >;!

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

jteks · Answer 11 · 2019-08-12T12:27:32+00:00

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

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

$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>';

끝 - &lt 스니핏 >;!

Martin Lester · Answer 12 · 2013-07-04T10:04:20+00:00

내가 찾은 답은 트로이 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' );
    }
});

Matt Stacey · Answer 13 · 2014-02-20T03:06:00+00:00

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

function resizeIframe(iframe) {
    var addHeight = 20; //or whatever size is being cut off
    iframe.height = iframe.contentWindow.document.body.scrollHeight + addHeight + "px";
  }

Juan M · Answer 14 · 2016-11-15T17:15:57+00:00

한 때 유용합니다 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%;
}

loek · Answer 15 · 2016-11-15T20:43:10+00:00

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

이 경우 측정은 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%;   
}

Tadej Vengust · Answer 16 · 2017-01-27T08:06:54+00:00

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

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 경우 전체 화면.

Keyur Savsani · Answer 17 · 2017-06-30T09:05:00+00:00

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

Michael L Watson · Answer 18 · 2012-02-06T16:09:00+00:00

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

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

39, 너회가 don& 도쿠망스게테레멘트베이드 때 이를 실현하는 데 필요한 요소 - t 를 통해 이미 onload 콜백하는.

39 의 there& 설정할 필요가 없습니다. ',' re going, 이 경우 이프라메트하이트 = &quot &quot you& # 39 재할당하려면 그 바로 다음 발표했다. 실제로 있는 것처럼, re 언로드하기 초래 오버헤드에 you& # 39 를 다루는 DOM element.