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

Источник

user3117685 19 дек '13 в 03:46

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

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

Источник

user3816639 03 мар '20 в 22:28

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

Я просто удалил вложенную функцию click() и поместил ее в свой HTML-код iframe:

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

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

Источник

user1516785 11 июл '12 в 06:22

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

Источник

user3011082 17 июн '15 в 04:08

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

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

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

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

Источник

user3917602 10 апр '19 в 09:58

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

См. http://codecopy.wordpress.com/2013/02/22/ghost-iframe-crossdomain-iframe-resize/

Источник

user4203730 08 фев '17 в 06:42

Можно создать "призрачный" IFrame, который будет действовать так, как будто его там не было.

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

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

Источник

user809825 22 фев '13 в 13:03

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

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;

}

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

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

Источник

user3936168 13 авг '14 в 06:46

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

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

Источник

user3933363 17 дек '14 в 00:23

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

Источник

user2332336 14 май '13 в 10:27

function resizeIFrameToFitContent(frame) {
if (frame == null) {
    return true;
}

var docEl = null;
var isFirefox = navigator.userAgent.search("Firefox") >= 0;

if (isFirefox && frame.contentDocument != null) {
    docEl = frame.contentDocument.documentElement;
} else if (frame.contentWindow != null) {
    docEl = frame.contentWindow.document.body;
}

if (docEl == null) {
    return;
}

var maxWidth = docEl.scrollWidth;
var maxHeight = (isFirefox ? (docEl.offsetHeight + 15) : (docEl.scrollHeight + 45));

frame.width = maxWidth;
frame.height = maxHeight;
frame.style.width = frame.width + "px";
frame.style.height = frame.height + "px";
if (maxHeight > 20) {
    frame.height = maxHeight;
    frame.style.height = frame.height + "px";
} else {
    frame.style.height = "100%";
}

if (maxWidth > 0) {
    frame.width = maxWidth;
    frame.style.width = frame.width + "px";
} else {
    frame.style.width = "100%";
}
}

Стиль ifram:

.myIFrameStyle {
   float: left;
   clear: both;
   width: 100%;
   height: 200px;
   padding: 5px;
   margin: 0px;
   border: 1px solid gray;
   overflow: hidden;
}

Тег iframe:

<iframe id="myIframe" src="" class="myIFrameStyle"> </iframe>

Тег скрипта:

<script type="text/javascript">
   $(document).ready(function () {
      $('myIFrame').load(function () {
         resizeIFrameToFitContent(this);
      });
    });
</script>

Источник

user1817640 01 июл '20 в 11:19

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

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

Источник

user3354501 12 сен '15 в 16:29

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

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

Источник

user579706 22 июл '18 в 15:53

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

Источник

user5813228 23 дек '17 в 18:04

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

>

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

Источник

user2307600 27 фев '16 в 05:55

Если вы ищете решение без перекрестного происхождения jQuery, вы можете взглянуть на мою идею:

      <main id="container"></main>
<script>
  fetch('https://example.com').then(response => {
    return response.text();
  }).then(data => {
    const iframeContainer = window.document.getElementById('container');
    const iframe = document.createElement('iframe');
    iframe.frameBorder = 'none';
    iframe.width = '100%';
    iframe.addEventListener("load", function() {
      iframe.height = iframe.contentWindow.document.body.scrollHeight;
    })
    const finalHtml = data;
    const blob = new Blob([finalHtml], {type: 'text/html'});
    iframe.src = window.URL.createObjectURL(blob);
    iframeContainer.appendChild(iframe);
  })
</script>