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


300

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


Угловые Авто-плавающий фрейм Высота: gitlab.com/reduardo7/angular-iframe-auto-height
Эдуардо Куомо

Принятый ответ не работает. Попробуйте stackoverflow.com/a/31513163/482382
Стивен Шоу

Ответы:


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

8
@ StoneHeart: да, это кросс-браузер. Код не соответствует стандарту из-за свойства contentWindow, которое не определено в спецификации DOM. В спецификации DOM существует свойство с именем contentDocument, но Internet Explorer 6 (и 7?) Не поддерживает его. Вместо этого можно использовать свойство contentWindow, которое реализовано во всех распространенных браузерах (Gecko, Opera, Webkit, IE).
Рафаэль

30
Какая польза от if (document.getElementById)?
Союзник

55
Также не забывайте, что это не кросс-домен. Причина, по которой возникает ошибка: отказано в доступе к свойству «документ», если домен другой. Решение можно найти здесь
Pierre de LESPINAY

15
Условие не только бесполезно, но и в тех редких случаях, для которых оно предназначено, может вызвать проблемы. Почему вы проверяете, существует ли метод, а затем используете метод вне проверки ??
JS

6
Я думаю, что вы имели в виду DOMContentLoaded, так DOMContentReadyкак, кажется, не вещь: developer.mozilla.org/en-US/…
Макс Хейбер

46

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

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


3
Библиотека iframe-resizer является наиболее надежным решением.
kwill

35

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

Это полный код, и да, он работает внутри HTML-кода iFrame. Часть "window.parent.document" указывает, что селектор jQuery должен использовать DOM родительского документа, а не документ, в котором вы находитесь (который находится внутри iFrame).
Гарнаф

13
Это прекрасно работает, если родительский документ и документ в iframe принадлежат одному домену . Если это не так (или в chrome, если они оба являются локальными файлами ), тогда вступают в действие политики безопасности «одного и того же источника» в браузерах, и это предотвращает изменение содержимого iframe в родительском документе.
user56reinstatemonica8

1
Для любого, кто пытается сделать что-то вроде этого, междоменный, загляните в window.postMessage (IE8 +) и имейте в виду, что вам понадобятся пользовательские сценарии как для документов host (parent), так и для source (внутри iframe). Может помочь плагин jQuery postmessage . Поскольку вам потребуются сценарии на хосте и источнике, может быть проще просто заставить хост загружать контент с помощью AJAX с использованием JSON-P.
user56reinstatemonica8

3
Как запустить событие автоматически вместо jQuery("#IDofControlFiringResizeEvent").click(function ()?
Бен

33

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

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


Фрагмент кода запуска не работает с Safari 9.1.1, может быть, включать проблему SO?
Эленсар

Это не кросс-домен. Может быть, серверу нужно добавить несколько заголовков на оформленную страницу?
Изящество

Все ответы, которые здесь упоминаются, scrollHeight/scrollWidthдолжны быть немного скорректированы, чтобы учесть поля тела. Браузеры применяют ненулевые поля по умолчанию для элемента тела документов (и это также применимо к содержимому, загруженному во фреймы). Рабочий раствор я нашел , чтобы добавить это: parseInt(window.getComputedStyle(this.contentDocument.body).margin.
Стан

24

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

Есть ли простые способы сделать это, когда источник из другого домена?
БрюсДжонДженнерЛавсо

15

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

1
Это странно. Для меня это вычисляет очень странную ширину iframe. ширина содержимого равна 750, и рассчитывается как 300. У вас есть идеи, почему?
Роб

Я играл с этим кодом (добавляя в опциях высоты). Если я установлю высоту iFrame на 100%, она ограничится примерно 200px. Если я установлю высоту iFrame на 600px, она останется неизменной. @RobertJagoda вы получили решение для этого?
iaindownie

9

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

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>

он говорит: Uncaught TypeError: $ не является функцией в autoResize ((index): 200) в HTMLIFrameElement.onload ((index): 204)
Майкл Роджерс

2
@Michael Rogers Возник конфликт с $, или вы забыли включить файл jQuery.js. Используйте универсальную функцию stackoverflow.com/questions/6109847/… или замените $ на jQuery
Адриан П.

8

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

2
Что это за волшебство 35, которое вы добавляете? Для какого браузера и ОС вы его измеряли?
h2stein

Теперь я действительно не знаю, почему я добавил 35 пикселей. Но я, конечно, могу сказать вам, что я тестировал его на FF, IE (7, 8, 9) и Chrome, и я работал просто отлично.
Петрик

3
Я думаю, что 35 это просто толщина полосы прокрутки
Садег

Мне пришлось немного подправить это, чтобы заставить его работать - он называется setHeight (iframe); непосредственно (убрал оболочку $ (iframe) .load () вокруг него.
Шейкер

Волшебные 35 пикселей добавлены, чтобы учесть отступы iframe. Я бы добавил, что iframe не должен содержать отступов содержимого iframes, должен позаботиться об этом.
Филипе Мело

5

Это надежное решение

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>

3

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

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


3

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

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

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

2

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

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


2

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


спасибо, это прекрасно работает в мобильных браузерах из того, что я тестировал, и именно здесь у меня были проблемы с изменением размера фреймов!
Мирча Санду

Рад, что вам это нравится :-) Я обнаружил, что iframe по большей части гораздо эффективнее и предлагает лучшую поддержку браузера, чем Ajax.
www139

1
СПАСИБО!!! Главным образом, потому что вы единственный, кто указал, куда поместить код, не предполагая, что люди знают. Это простое решение отлично подошло мне (Firefox, Chrome, Edge) для создания динамического контента в одном домене на моем Wordpress-сайте. У меня есть форма выбора, которая будет выводить динамическое содержимое различной длины. IFrame настраивается красиво. Мне пришлось настроить .clientHeight + 5 + 'px'; и clientWidth + 18 + 'px'; быть больше пикселей. И я не уверен, почему дисплей: таблица; в CSS был необходим, поэтому я закомментировал это для моих целей. Еще раз спасибо.
Heres2u

1

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

Если Microsoft не заботится об этом, кого это должно волновать?
m3nda

1

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

<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


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


1

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

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;

}

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


У меня на Chrome / Win10 не работает - контент частично отрублен внизу.
glenneroo

1

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

1

контекст

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

Отличное решение! Спасибо!
redelschaap

0

Можно создать «похожий на привидение» 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

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


0

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

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

0

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

0

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


0

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

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

0

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

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

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

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


0

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

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


-1

Простота:

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

-1

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

1
Это изменяет структуру родительского документа. Если вы хотите иметь другой документ в виде рисунка с изображением figcaption, это не означает, что контур документа будет кратким. Разные варианты использования, но я хотел переместить фрагмент кода в iframe из-за набросков.
Генри Кот

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.