내용에 맞게 iframe의 너비와 높이를 조정합니다

나는에 대한 해결책이 필요 자동 조정 을 width하고 height의 iframe거의 그 내용에 맞게합니다. 요점은 iframe로드 된 후에 너비와 높이를 변경할 수 있다는 것 입니다. iframe에 포함 된 몸체의 크기 변경을 처리하기 위해 이벤트 작업이 필요하다고 생각합니다.

<script type="application/javascript">

function resizeIFrameToFitContent( iFrame ) {

    iFrame.width  = iFrame.contentWindow.document.body.scrollWidth;
    iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}

window.addEventListener('DOMContentLoaded', function(e) {

    var iFrame = document.getElementById( 'iFrame1' );
    resizeIFrameToFitContent( iFrame );

    // or, to resize all iframes:
    var iframes = document.querySelectorAll("iframe");
    for( var i = 0; i < iframes.length; i++) {
        resizeIFrameToFitContent( iframes[i] );
    }
} );

</script>

<iframe src="usagelogs/default.aspx" id="iFrame1"></iframe>

크로스 브라우저 jQuery 플러그인 .

iFrame의 컨텐츠 크기를 유지하고 iFrame과 호스트 페이지간에 통신 하는 데 사용 되는 교차 보우 저, 교차 도메인 라이브러리 . jQuery를 사용하거나 사용하지 않고 작동합니다.mutationObserverpostMessage

지금까지 제공된 모든 솔루션은 단 한 번의 크기 조정 만 설명합니다. 내용이 수정 된 후 iFrame의 크기를 조정할 수 있다고 언급했습니다. 이렇게하려면 iFrame 내에서 함수를 실행해야합니다 (내용이 변경되면 내용이 변경되었다는 이벤트를 발생시켜야 함).

iFrame 내부의 코드가 iFrame 내부의 DOM으로 제한되어 iFrame을 편집 할 수없는 것처럼 보였고 iFrame 외부에서 실행 된 코드가 iFrame 외부의 DOM과 붙어 있었기 때문에 잠시 동안이 문제가 발생했습니다. → iFrame 내부에서 오는 이벤트를 선택하십시오.

해결책은 jQuery에게 어떤 DOM을 사용할 수 있는지 알려줄 수 있다는 것입니다 (동료의 도움을 통해). 이 경우 상위 창의 DOM입니다.

따라서 이와 같은 코드는 필요한 작업을 수행합니다 (iFrame 내에서 실행될 때).

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#IDofControlFiringResizeEvent").click(function () {
            var frame = $('#IDofiframeInMainWindow', window.parent.document);
            var height = jQuery("#IDofContainerInsideiFrame").height();
            frame.height(height + 15);
        });
    });
</script>

임베드 용 단일 라이너 솔루션 : 최소 크기로 시작하여 컨텐츠 크기가 증가합니다. 스크립트 태그가 필요 없습니다.

<iframe src="http://URL_HERE.html" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:200px;width:100%;border:none;overflow:hidden;"></iframe>

iframe 컨텐츠가 동일한 도메인에서 온 경우에는 효과적입니다. 그래도 jQuery가 필요합니다.

$('#iframe_id').load(function () {
    $(this).height($(this).contents().height());
    $(this).width($(this).contents().width());
});

동적으로 크기를 조정하려면 다음을 수행하십시오.

<script language="javaScript">
<!--
function autoResize(){
    $('#themeframe').height($('#themeframe').contents().height());
}
//-->
</script>
<iframe id="themeframe" onLoad="autoResize();" marginheight="0" frameborder="0" src="URL"></iframe>

그런 다음 iframe 이로 드되는 페이지에서 다음을 추가하십시오.

<script language="javaScript">
function resize()
{
    window.parent.autoResize();
}

$(window).on('resize', resize);
</script>

jQuery를 사용하지 않으려는 경우 브라우저 간 솔루션은 다음과 같습니다.

/**
 * Resizes the given iFrame width so it fits its content
 * @param e The iframe to resize
 */
function resizeIframeWidth(e){
    // Set width of iframe according to its content
    if (e.Document && e.Document.body.scrollWidth) //ie5+ syntax
        e.width = e.contentWindow.document.body.scrollWidth;
    else if (e.contentDocument && e.contentDocument.body.scrollWidth) //ns6+ & opera syntax
        e.width = e.contentDocument.body.scrollWidth + 35;
    else (e.contentDocument && e.contentDocument.body.offsetWidth) //standards compliant syntax – ie8
        e.width = e.contentDocument.body.offsetWidth + 35;
}

지구상의 모든 것을 시도한 후에 이것은 실제로 저에게 효과적입니다.

index.html

<style type="text/css">
html, body{
  width:100%;
  height:100%;
  overflow:hidden;
  margin:0px;   
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
    $(iframe).height($(iframe).contents().find('html').height());
}
</script>

<iframe src="http://iframe.domain.com" width="100%" height="100%" marginheight="0" frameborder="0" border="0" scrolling="auto" onload="autoResize(this);"></iframe>

이 코드를 사용하여 모든 iframe (클래스 autoHeight 포함)이 페이지에로드 될 때 높이를 자동 조정합니다. 테스트되었으며 IE, FF, Chrome, Safari 및 Opera에서 작동합니다.

function doIframe() {
    var $iframes = $("iframe.autoHeight"); 
    $iframes.each(function() {
        var iframe = this;
        $(iframe).load(function() {
            setHeight(iframe);
        });
    });
}

function setHeight(e) {
  e.height = e.contentWindow.document.body.scrollHeight + 35;
}

$(window).load(function() {
    doIframe();
});

이것은 견고한 증거 솔루션입니다

function resizer(id)
{

var doc=document.getElementById(id).contentWindow.document;
var body_ = doc.body, html_ = doc.documentElement;

var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight );
var width  = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );

document.getElementById(id).style.height=height;
document.getElementById(id).style.width=width;

}

HTML

<IFRAME SRC="blah.php" id="iframe1"  onLoad="resizer('iframe1');"></iframe>

위의 Garnaph의 훌륭한 솔루션을 약간 수정했습니다. 그의 솔루션이 이벤트 직전의 크기를 기준으로 iframe 크기를 수정 한 것처럼 보입니다. 내 상황 (iframe을 통한 이메일 제출)의 경우 제출 직후 변경하려면 iframe 높이가 필요했습니다. 예를 들어 제출 후 유효성 검사 오류 또는 "감사합니다"메시지를 표시합니다.

방금 중첩 click () 함수를 제거하고 iframe html에 넣었습니다.

<script type="text/javascript">
    jQuery(document).ready(function () {
        var frame = $('#IDofiframeInMainWindow', window.parent.document);
        var height = jQuery("#IDofContainerInsideiFrame").height();
        frame.height(height + 15);
    });
</script>

나를 위해 일했지만 크로스 브라우저 기능에 대해서는 확실하지 않습니다.

IFRAME 컨텐츠와 부모 윈도우를 모두 제어 할 수 있다면 iFrame Resizer 가 필요합니다 .

이 라이브러리를 사용하면 포함 된 컨텐츠에 맞게 동일한 도메인 간 및 iframe의 높이와 너비를 자동으로 조정할 수 있습니다. iFrame 사용과 관련된 가장 일반적인 문제를 해결하기 위해 다음과 같은 다양한 기능을 제공합니다.

• 컨텐츠 크기에 맞게 iFrame의 높이 및 너비 크기 조정.
• 여러 개의 중첩 된 iFrame과 작동합니다.
• 교차 도메인 iFrame에 대한 도메인 인증.
• 복잡한 CSS 레이아웃을 지원하기 위해 다양한 페이지 크기 계산 방법을 제공합니다.
• MutationObserver를 사용하여 페이지 크기를 조정할 수있는 DOM 변경을 감지합니다.
• 페이지 크기를 조정할 수있는 이벤트 (창 크기 조정, CSS 애니메이션 및 전환, 방향 변경 및 마우스 이벤트)를 감지합니다.
• postMessage를 통해 iFrame과 호스트 페이지 간 메시징이 간소화되었습니다.
• iFrame에서 페이지 링크를 수정하고 iFrame과 부모 페이지 사이의 링크를 지원합니다.
• 사용자 정의 크기 조정 및 스크롤 방법을 제공합니다.
• 부모 위치와 뷰포트 크기를 iFrame에 노출합니다.
• ViewerJS와 함께 작동하여 PDF 및 ODF 문서를 지원합니다.
• IE8까지 폴백 지원.

위의 방법으로는 모두 작동하지 않습니다.

자바 스크립트 :

function resizer(id) {
        var doc = document.getElementById(id).contentWindow.document;
        var body_ = doc.body, html_ = doc.documentElement;

        var height = Math.max(body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight);
        var width = Math.max(body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth);

        document.getElementById(id).style.height = height;
        document.getElementById(id).style.width = width;

    }

html :

<div style="background-color:#b6ff00;min-height:768px;line-height:inherit;height:inherit;margin:0px;padding:0px;overflow:visible" id="mainDiv"  >
         <input id="txtHeight"/>height     <input id="txtWidth"/>width     
        <iframe src="head.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" style="width:100%; height: 47px" frameborder="0"  ></iframe>
        <iframe src="left.aspx" name="leftFrame" scrolling="yes"   id="Iframe1" title="leftFrame" onload="resizer('Iframe1');" style="top:0px;left:0px;right:0px;bottom:0px;width: 30%; border:none;border-spacing:0px; justify-content:space-around;" ></iframe>
        <iframe src="index.aspx" name="mainFrame" id="Iframe2" title="mainFrame" scrolling="yes" marginheight="0" frameborder="0" style="width: 65%; height:100%; overflow:visible;overflow-x:visible;overflow-y:visible; "  onload="resizer('Iframe2');" ></iframe>
</div>

환경 : IE 10, Windows 7 x64

실험 후 다른 해결책을 찾았습니다. 나는 원래이 질문에 '최고의 답변'으로 표시된 코드를 시도했지만 작동하지 않았습니다. 내 생각에 당시 내 프로그램의 iframe이 동적으로 생성 되었기 때문입니다. 내가 사용한 코드는 다음과 같습니다.

로드중인 iframe 내부의 자바 스크립트 :

window.onload = function()
    {
        parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
        parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
    };

스크롤 막대를 제거하려면 높이에 4 개 이상의 픽셀을 추가해야합니다 (일부 이상한 버그 / iframe의 영향). 너비는 심지어 낯선 것입니다. 몸 너비에 18px를 추가하는 것이 안전합니다. 또한 iframe 바디에 CSS가 적용되어 있는지 확인하십시오 (아래).

html, body {
   margin:0;
   padding:0;
   display:table;
}

iframe {
   border:0;
   padding:0;
   margin:0;
}

iframe의 HTML은 다음과 같습니다.

<iframe id="fileUploadIframe" src="php/upload/singleUpload.html"></iframe>

내 iframe 내의 모든 코드는 다음과 같습니다.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>File Upload</title>
    <style type="text/css">
    html, body {
        margin:0;
        padding:0;
        display:table;
    }
    </style>
    <script type="text/javascript">
    window.onload = function()
    {
        parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
        parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
    };
    </script>
</head>
<body>
    This is a test.<br>
    testing
</body>
</html>

크롬과 파이어 폭스 (windows xp)에서 약간의 테스트를 수행했습니다. 아직 더 많은 테스트를 진행 중이므로 어떻게 작동하는지 알려주세요.

이것이 내가하는 방법입니다 (FF / Chrome에서 테스트 됨).

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
    $(iframe).height($(iframe).contents().find('html').height());
}
</script>

<iframe src="page.html" width="100%" height="100" marginheight="0" frameborder="0" onload="autoResize(this);"></iframe>

몇 가지 방법이 있습니다.

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

그리고 다른 대안

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

위에 표시된대로 두 가지 대안으로 스크롤을 숨기려면

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

두 번째 코드로 해킹

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

iFrame의 스크롤 막대를 숨기려면 부모가 "오버플로 : 숨겨 짐"으로 만들어 스크롤 막대를 숨기고 iFrame은 최대 150 % 너비와 높이로 이동하여 스크롤 막대를 페이지 외부로 강제합니다. 스크롤 막대가 없으면 iframe이 페이지 경계를 초과하지 않을 수 있습니다. iFrame의 스크롤 막대를 전체 너비로 숨 깁니다!

소스 : iframe 자동 높이 설정

누군가가 여기에 도착하는 경우 : iframe에서 div를 제거 할 때 솔루션에 문제가 발생했습니다 .iframe이 짧아지지 않았습니다.

작업을 수행하는 Jquery 플러그인이 있습니다.

http://www.jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iFrame-Resizer.html

이 resizer가 더 잘 작동한다는 것을 알았습니다.

function resizer(id)
{

    var doc = document.getElementById(id).contentWindow.document;
    var body_ = doc.body;
    var html_ = doc.documentElement;

    var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight,     html_.scrollHeight, html_.offsetHeight );
    var width  = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );

    document.getElementById(id).height = height;
    document.getElementById(id).width = width;

}

스타일 객체가 제거되었습니다.

jQuery에서 이것은 나에게 가장 좋은 옵션입니다. 도와 드릴게요!

iframe

<iframe src="" frameborder="0" id="iframe" width="100%"></iframe>

jQuery

<script>            
        var valueSize = $( "#iframe" ).offset();
        var totalsize = (valueSize.top * 2) + valueSize.left;

        $( "#iframe" ).height(totalsize);            

</script>

문맥

웹 확장의 맥락에서 직접해야했습니다. 이 웹 확장 프로그램은 각 페이지에 일부 UI를 삽입하며이 UI는 안에 있습니다 iframe. 내부의 내용 iframe은 동적이므로 너비와 높이를 다시 조정해야했습니다.iframe 자체 .

나는 React를 사용한다 하지만 개념은 모든 라이브러리에 적용됩니다.

내 솔루션 (이것은 페이지와 iframe을 모두 제어한다고 가정합니다)

내부에서 iframe나는 body스타일이 정말로 큰 치수를 갖도록 변경했습니다 . 그러면 필요한 모든 공간을 사용하여 내부 요소를 배치 할 수 있습니다. 제작 width및 height100 %가 저에게 효과가 없었습니다 (iframe에 기본값이 width = 300px있고 height = 150px)

/* something like this */
body {
  width: 99999px;
  height: 99999px;
}

그런 다음 모든 iframe UI를 div 안에 삽입하고 스타일을주었습니다.

#ui-root {
  display: 'inline-block';     
}

이 안에 내 응용 프로그램을 렌더링 한 후 #ui-root( React 에서이 작업을 수행합니다. componentDidMount)이 div의 크기를 계산하고 다음을 사용하여 부모 페이지와 동기화합니다 window.postMessage.

let elRect = el.getBoundingClientRect()
window.parent.postMessage({
  type: 'resize-iframe',
  payload: {
    width: elRect.width,
    height: elRect.height
  }
}, '*')

부모 프레임에서 나는 다음과 같이합니다 :

window.addEventListener('message', (ev) => {
  if(ev.data.type && ev.data.type === 'resize-iframe') {
    iframe.style.width = ev.data.payload.width + 'px'
    iframe.style.height = ev.data.payload.height + 'px'
  }
}, false)

존재하지 않는 것처럼 동작하는 "유령 같은"IFrame을 만들 수 있습니다.

보다 http://codecopy.wordpress.com/2013/02/22/ghost-iframe-crossdomain-iframe-resize/를 하십시오

기본적으로 이벤트 시스템을 사용합니다 parent.postMessage(..). https://developer.mozilla.org/en-US/docs/DOM/window.postMessage에

이것은 모든 최신 브라우저에서 작동합니다!

게시물이 오래되었다는 것을 알고 있지만 이것이 또 다른 방법이라고 생각합니다. 방금 코드를 구현했습니다. 페이지로드 및 페이지 크기 조정 모두에서 완벽하게 작동합니다.

var videoHeight;
var videoWidth;
var iframeHeight;
var iframeWidth;

function resizeIframe(){
    videoHeight = $('.video-container').height();//iframe parent div's height
    videoWidth = $('.video-container').width();//iframe parent div's width

    iframeHeight = $('.youtubeFrames').height(videoHeight);//iframe's height
    iframeWidth = $('.youtubeFrames').width(videoWidth);//iframe's width
}
resizeIframe();


$(window).on('resize', function(){
    resizeIframe();
});

헤더에 배치 할 자바 스크립트 :

function resizeIframe(obj) {
        obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
      }

다음은 iframe HTML 코드입니다.

<iframe class="spec_iframe" seamless="seamless" frameborder="0" scrolling="no" id="iframe" onload="javascript:resizeIframe(this);" src="somepage.php" style="height: 1726px;"></iframe>

CSS 스타일 시트

>

.spec_iframe {
        width: 100%;
        overflow: hidden;
    }

angularjs 지시문 속성의 경우 :

G.directive ( 'previewIframe', function () {
return {
    restrict : 'A',
    replace : true,
    scope : true,
    link : function ( scope, elem, attrs ) {
        elem.on ( 'load', function ( e ) {
            var currentH = this.contentWindow.document.body.scrollHeight;
            this.style.height = eval( currentH ) + ( (25 / 100)* eval( currentH ) ) + 'px';
        } );
    }
};
} );

iframe, 텍스트, 광고 등에 대해 일반적으로 수행되는 스케일링을 카운터 링 할 수 있도록 백분율을 주목하십시오. 스케일링이 구현되지 않은 경우 단순히 0을 넣으십시오.

이것이 내가로드 할 때 또는 일이 바뀔 때의 방법입니다.

parent.jQuery("#frame").height(document.body.scrollHeight+50);

분명히 많은 시나리오가 있지만 문서와 iframe에 대해 동일한 도메인을 가지고 있으며 iframe 컨텐츠의 끝 부분에이를 고정시킬 수있었습니다.

var parentContainer = parent.document.querySelector("iframe[src*=\"" + window.location.pathname + "\"]");
parentContainer.style.height = document.body.scrollHeight + 50 + 'px';

그러면 부모 컨테이너가 '찾기'되고 퍼지 팩터에 50 픽셀을 더한 길이가 설정되어 스크롤 막대가 제거됩니다.

문서 높이 변경을 '관찰'할 것은 없습니다. 이것은 사용 사례에 필요하지 않았습니다. 내 대답에는 부모 / iframe 콘텐츠에 구운 ID를 사용하지 않고 부모 컨테이너를 참조하는 수단을 제공합니다.

고정 종횡비로 살 수 있고 반응 형 iframe 을 원한다면이 코드가 유용합니다. CSS 규칙 일뿐입니다.

.iframe-container {
  overflow: hidden;
  /* Calculated from the aspect ration of the content (in case of 16:9 it is 9/16= 
  0.5625) */
  padding-top: 56.25%;
  position: relative;
}
.iframe-container iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

iframe에는 컨테이너로 div가 있어야합니다.

<div class="iframe-container">
   <iframe src="http://example.org"></iframe>
</div>

소스 코드는이 사이트를 기반으로 하며 Ben Marshall 에 대한 설명이 좋습니다.

단순성 :

var iframe = $("#myframe");
$(iframe.get(0).contentWindow).on("resize", function(){
    iframe.width(iframe.get(0).contentWindow.document.body.scrollWidth);
    iframe.height(iframe.get(0).contentWindow.document.body.scrollHeight);
});

내용이 매우 간단한 HTML 인 경우 가장 간단한 방법은 자바 스크립트로 iframe을 제거하는 것입니다

HTML 코드 :

<div class="iframe">
    <iframe src="./mypage.html" frameborder="0" onload="removeIframe(this);"></iframe>
</div>

자바 스크립트 코드 :

function removeIframe(obj) {
    var iframeDocument = obj.contentDocument || obj.contentWindow.document;
    var mycontent = iframeDocument.getElementsByTagName("body")[0].innerHTML;
    obj.remove();
    document.getElementsByClassName("iframe")[0].innerHTML = mycontent;
}

<iframe src="hello.html" sandbox="allow-same-origin"
        onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';this.style.width=(this.contentWindow.document.body.scrollWidth+20)+'px';">
</iframe>