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

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

267 голосов
/ 04 мая 2009

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

Ответы [ 28 ]

0 голосов
/ 23 апреля 2018

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

Можно создать "призрачный" 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 голосов
/ 23 декабря 2017

Для атрибута 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 голосов
/ 09 сентября 2016

Используется только встроенный 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>
0 голосов
/ 21 июля 2016

Простота: 

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);
});
0 голосов
/ 14 мая 2013

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

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;
    }
0 голосов
/ 12 сентября 2015

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

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();
});
Страница:
...