Мне нужно решение для преобразуем значение в обработчик 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>

cross-browser Подключаемый модуль jQuery Глядя на вывод

Кросс-баузер, библиотека кросс-доменов библиотеки , использующая mutationObserver для поддержания размера iFrame в соответствии с содержимым и 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 находится в том же домене, это должно прекрасно работать. Это требует 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>

Однострочное решение для встраивания: начинается с минимального размера и увеличивается до размера контента. нет необходимости для тегов сценария.

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

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

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

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

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>

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

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>

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

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

<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 с полной шириной!

source: set iframe auto height

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

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

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

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

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

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

Существует плагин Jquery, который выполняет эту работу:

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

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

Я обнаружил, что этот изменяющий размер работает лучше:

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>

Это очень хорошие, но длинные ответы.

, поэтому ваш код будет работать только после загрузки окна, когда все ресурсы имеют был загружен. В этот момент jQuery ( http://codecopy.wordpress.com/2013/02/22/ghost-iframe-crossdomain-iframe-resize/

В основном вы используете систему событий parent.postMessage(..), описанную в https: // developer.mozilla.org/en-US/docs/DOM/window.postMessage

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

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

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

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

Здесь идет HTML-код iframe:

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

Таблица стилей Css

& Gt ; Для атрибута директивы angularjs:

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

Обратите внимание на процент, я вставил его, чтобы вы могли противодействовать масштабированию, обычно выполняемому для iframe, текста, рекламы и т. Д., Просто введите 0, если масштабирование не является реализацией

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

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

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

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

context

. Содержимое внутри iframe является динамическим, поэтому мне пришлось перенастроить ширину и высоту iframe, но концепция применима к каждой библиотеке. iframe.

Я использую реагировать Мое решение (предполагается, что вы управляете как страницей, так и iframe)

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

Внутри 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';     
}

После рендеринга моего приложения внутри this #ui-root реагировать Я делаю это внутри 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, и я смог добавить его в конец содержимого iframe:

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

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

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

Простота:

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

Здесь используется только встроенный 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>