Отрегулируйте ширину и высоту 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 .

Кросс-баузер, кросс-доменная библиотека, которая использует mutationObserveriFrame для изменения размера содержимого и postMessageобмена данными между iFrame и страницей хоста. Работает с или без JQuery.

Все приведенные к настоящему времени решения учитывают только один раз изменение размера. Вы упоминаете, что хотите изменить размер iFrame после изменения содержимого. Чтобы сделать это, вам нужно выполнить функцию внутри iFrame (как только содержимое будет изменено, вам нужно запустить событие, чтобы сказать, что содержимое изменилось).

Я застрял с этим некоторое время, так как код внутри iFrame казался ограниченным DOM внутри iFrame (и не мог редактировать iFrame), а код, выполняемый за пределами iFrame, застревал с DOM вне iFrame (и не мог забрать событие изнутри 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>

Я использую этот код для автоматической регулировки высоты всех фреймов (с классом 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>

Я слегка модифицировал великолепное решение Гарнафа выше. Казалось, что его решение изменило размер 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 .

Эта библиотека позволяет автоматически изменять размеры и ширину как одинаковых, так и междоменных iFrames, чтобы соответствовать их содержанию. Он предоставляет ряд функций для решения наиболее распространенных проблем с использованием iFrames, в том числе:

• Изменение размера iFrame по высоте и ширине до размера содержимого.
• Работает с несколькими и вложенными фреймами.
• Доменная аутентификация для междоменных iFrames.
• Предоставляет ряд методов расчета размера страницы для поддержки сложных макетов CSS.
• Обнаруживает изменения в DOM, которые могут привести к изменению размера страницы с помощью MutationObserver.
• Обнаруживает события, которые могут вызвать изменение размера страницы (изменение размера окна, анимация и переход CSS, изменение ориентации и события мыши).
• Упрощенный обмен сообщениями между iFrame и главной страницей через postMessage.
• Исправляет ссылки на страницы в iFrame и поддерживает ссылки между iFrame и родительской страницей.
• Предоставляет пользовательские методы определения размера и прокрутки.
• Выставляет родительскую позицию и размер области просмотра в iFrame.
• Работает с ViewerJS для поддержки документов PDF и ODF.
• Резервная поддержка вплоть до IE8.

все не может работать с использованием вышеуказанных методов.

JavaScript:

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 в моей программе в то время создавался динамически. Вот код, который я использовал (он работал для меня):

Javascript внутри загружаемого 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 или более пикселей к высоте, чтобы убрать полосы прокрутки (какая-то странная ошибка / эффект iframes). Ширина еще более странная, вы можете добавить 18px к ширине тела. Также убедитесь, что у вас есть CSS для тела iframe (ниже).

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

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

Вот HTML-код для iframe:

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

Я провел тестирование в Chrome и немного в Firefox (в 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>

Чтобы скрыть прокрутку с 2 альтернативами, как показано выше

<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

В случае, если кто-то сюда попал: у меня была проблема с решениями, когда я удалял div из iframe - iframe не стал короче.

Есть плагин Jquery, который делает эту работу:

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

Я нашел этот ресайзер для работы лучше:

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>

контекст

Я должен был сделать это сам в контексте веб-расширения. Это веб-расширение внедряет некоторый кусок пользовательского интерфейса в каждую страницу, и этот пользовательский интерфейс находится внутри iframe. Содержимое внутри iframeявляется динамическим, поэтому мне пришлось перенастроить ширину и высоту самого объекта iframe.

Я использую React, но концепция применима к каждой библиотеке.

Мое решение (предполагается, что вы контролируете как страницу, так и фрейм)

Внутри iframeя изменил bodyстили, чтобы иметь действительно большие размеры. Это позволит расположить элементы внутри, используя все необходимое пространство. Создание widthи height100% не работает для меня (я думаю, потому что у iframe есть значение по умолчанию width = 300pxи height = 150px)

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

Затем я вставил весь интерфейс iframe в 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();
});

Javascript для размещения в шапке:

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 пикселей, чтобы удалить полосу прокрутки.

Там нет ничего, чтобы «наблюдать» за изменением высоты документа, это мне не понадобилось для моего варианта использования. В своем ответе я привожу средство ссылки на родительский контейнер без использования идентификаторов, запеченных в содержимом parent / iframe.

Если вы можете жить с фиксированным соотношением сторон и вам нужен адаптивный 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>

Исходный код основан на этом сайте, и у Бен Маршалла есть хорошее объяснение.

Простота:

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 с помощью javascript.

HTML код:

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

Javascript код:

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>