Отрегулируйте ширину и высоту iframe, чтобы соответствовать содержанию в нем

Мне нужно решение для автоматической настройки width и height iframe чтобы едва соответствовать его контенту. Дело в том, что ширина и высота могут быть изменены после загрузки iframe. Наверное, мне нужно действие события, чтобы иметь дело с изменением размеров тела, содержащегося в iframe.

Ответ 1

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

Ответ 2

Кросс-браузер плагин jQuery.

Cross-bowser, cross domain библиотека, которая использует mutationObserver, чтобы сохранить размер iFrame в содержимом и postMessage для связи между iFrame и главной страницей. Работает с jQuery или без него.

Ответ 3

Все решения, данные до сих пор, учитывают только однократное изменение размера. Вы упомянули, что хотите изменить размер 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>

Ответ 4

однослойное решение для встраивания: начинается с минимального размера и увеличивается до размера содержимого. нет необходимости в тегах 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>

Ответ 5

Если содержимое 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>

Ответ 6

Вот кросс-браузерное решение, если вы не хотите использовать 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;
}

Ответ 7

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

Ответ 8

После того, как я попробовал все на земле, это действительно работает для меня.

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>

Ответ 9

Это твердое доказательство решения

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>

Ответ 10

Я немного изменил решение Garnaph выше. Похоже, что его решение изменило размер iframe на основе размера прямо перед событием. Для моей ситуации (отправки электронной почты через iframe) мне нужно, чтобы высота iframe изменилась сразу после отправки. Например, покажите ошибки проверки или сообщение "спасибо" после отправки.

Я просто исключил функцию вложенного щелчка() и поместил ее в мой 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>

Работал для меня, но не уверен в функциональности перекрестного браузера.

Ответ 11

Если вы можете управлять содержимым IFRAME и родительским окном, вам нужен iFrame Resizer.

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

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

Ответ 12

Вот несколько методов:

<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, родительский элемент сделан "overflow: hidden", чтобы скрыть полосы прокрутки, и iFrame сделана для увеличения ширины и высоты до 150%, что заставляет полосы прокрутки за пределами страницы, и поскольку тело не имеет полос прокрутки, нельзя ожидать, что iframe будет превышать границы страницы. Это скрывает полосы прокрутки iFrame с полной шириной!

источник: установите автоматическую высоту iframe

Ответ 13

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

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>

Env: IE 10, Windows 7 x64

Ответ 14

Вот как я это сделаю (проверено в 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>

Ответ 15

Я нашел, что этот ресизер работает лучше:

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;

}

Обратите внимание, что объект стиля удален.

Ответ 16

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

Существует JQuery-плагин, который выполняет задание:

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

Ответ 17

Я выяснил другое решение после некоторых экспериментов. Сначала я попробовал код, обозначенный как "лучший ответ" на этот вопрос, и он не сработал. Я предполагаю, что мой 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). У меня еще больше испытаний, поэтому, пожалуйста, расскажите мне, как это работает для вас.

Ответ 18

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

Ответ 19

Можно создать "призрак-подобный" 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

Это работает со всеми современными браузерами!

Ответ 20

Я знаю, что пост старый, но я считаю, что это еще один способ сделать это. Я только что реализовал свой код. Отлично работает как при загрузке страницы, так и при изменении размера страницы:

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

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

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


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

Ответ 21

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

Ответ 22

Для атрибута директивы 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, если масштабирование не выполняется

Ответ 23

Если содержимое является просто очень простым 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;
}

Ответ 24

Это то, как я делал это при загрузке или когда все меняется.

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

Ответ 25

контекст

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

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

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

Внутри iframe я изменил стили body чтобы иметь действительно большие размеры. Это позволит расположить элементы внутри, используя все необходимое пространство. Создание width и height 100% у меня не сработало (наверное, потому что у 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)

Ответ 26

Ясно, что существует множество сценариев, однако у меня был один домен для документа и iframe, и я смог добавить это в конец содержимого iframe:

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

Это "находит" родительский контейнер и затем устанавливает длину, добавляя коэффициент выдумки 50 пикселей, чтобы удалить полосу прокрутки.

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

Ответ 27

Простота:

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

Ответ 28

Это использует только встроенный CSS:

<iframe src="http://example.com" style="resize: both;"               
        onload="this.style.height=this.contentDocument.body.scrollHeight +'px'; this.style.width=this.contentDocument.body.scrollWidth +'px';"
        onresize="this.style.height=this.contentDocument.body.scrollHeight +'px'; this.style.width=this.contentDocument.body.scrollWidth +'px';">
</iframe>