Відрегулюйте ширину та висоту рамки iframe відповідно до вмісту в ній

Мені потрібно рішення для автоматичного регулюванняwidth та heightАн 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>

Модуль крос-браузера jQuery .

Крос-боузер, міждоменна бібліотека, яка використовує mutationObserverдля збереження розміру iFrame до вмісту та postMessageдля зв'язку між iFrame та хост-сторінкою. Працює з jQuery або без нього.

Всі рішення, наведені до цих пір, припадають лише на одноразовий розмір. Ви згадуєте, що хочете мати можливість змінити розмір iFrame після зміни вмісту. Для цього вам потрібно виконати функцію всередині iFrame (як тільки вміст буде змінено, вам потрібно запустити подію, щоб сказати, що вміст змінився).

Я затримався на цьому на деякий час, оскільки код всередині iFrame здавався обмеженим DOM всередині iFrame (і не міг редагувати iFrame), а код, виконаний поза iFrame, застряг у DOM поза iFrame (і не міг ' t підберіть подію, що надходить зсередини 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 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>

Якщо вміст 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>

Ось крос-браузерне рішення, якщо ви не хочете використовувати 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;
}

Після того, як я спробував усе на землі, це справді працює для мене.

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>

Я використовую цей код для автоматичного налаштування висоти всіх кадрів (з класом 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();
});

Це міцне доказове рішення

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>

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

Якщо ви можете керувати як вмістом IFRAME, так і батьківським вікном, тоді вам знадобиться iFrame Resizer .

Ця бібліотека дозволяє автоматично змінювати розмір висоти та ширини як і для iFrames домену, щоб відповідати вмісту, що міститься. Він надає цілий ряд функцій для вирішення найпоширеніших проблем із використанням iFrames, до них належать:

• Зміна висоти та ширини iFrame до розміру вмісту.
• Працює з декількома і вкладеними iFrames.
• Аутентифікація домену для міждоменних iFrames.
• Надає діапазон методів обчислення розміру сторінки для підтримки складних макетів CSS.
• Виявляє зміни в DOM, які можуть призвести до зміни розміру сторінки за допомогою MutationObserver.
• Виявляє події, які можуть призвести до зміни розміру сторінки (розмір вікон, анімація та перехід CSS, події зміни орієнтації та миші).
• Спрощене обмін повідомленнями між iFrame та хост-сторінкою через postMessage.
• Виправляє посилання на сторінку в iFrame та підтримує посилання між iFrame та батьківською сторінкою.
• Забезпечує користувацькі методи розмірів та прокрутки.
• Виставляє батьківську позицію та розмір вікна перегляду iFrame.
• Працює з ViewerJS для підтримки PDF та ODF документів.
• Резервна підтримка аж до IE8.

всі не можуть працювати, використовуючи вищевказані методи.

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 в моїй програмі в той час динамічно генерувався. Ось код, який я використав (він працював на мене):

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 або більше пікселів, щоб видалити смуги прокрутки (якийсь дивний помилка / ефект кадрів). Ширина ще незначніша, ви можете сміливо додати 18 пікселів на ширину корпусу. Також переконайтеся, що у вас є 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>

Я зробив тестування на хром і трохи на firefox (у windows xp). У мене ще є тестування, тому скажіть, будь ласка, як це працює для вас.

Ось як я це зробив (тестував у 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>

Ось кілька методів:

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

СКІРИТИ СКЛАДУВАННЯ ДВОМИ АЛЬТЕРНАТИВИ, ЯКІ ПОКАЗАНІ НАД

<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

Якщо хтось потрапив сюди: у мене виникла проблема з рішеннями, коли я видалив divs з iframe - iframe не став коротшим.

Є плагін Jquery, який виконує цю роботу:

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

Я знайшов цей резизер краще працювати:

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>

Контекст

Я повинен був зробити це сам у контексті веб-розширення. Це веб-розширення вводить частину інтерфейсу користувача на кожну сторінку, і цей інтерфейс працює всередині iframe. Вміст всередині iframeдинамічний, тому мені довелося змінити ширину і висоту самого iframeсебе.

Я використовую React, але ця концепція стосується кожної бібліотеки.

Моє рішення (передбачається, що ви керуєте і сторінкою, і рамкою iframe)

Всередині iframeя змінив bodyстилі, щоб мати дійсно великі розміри. Це дозволить елементам всередині викластись, використовуючи весь необхідний простір. Створення widthта height100% не працювали для мене (я думаю, тому що в кадрі є стандартний width = 300pxі height = 150px)

/* something like this */
body {
  width: 99999px;
  height: 99999px;
}

Потім я ввів весь інтерфейс iframe всередині div і надав йому кілька стилів

#ui-root {
  display: 'inline-block';     
}

Після надання мого додатка всередині цього #ui-root(в React я це роблю всередині componentDidMount) я обчислюю розміри цього діва, як і синхронізує їх на батьківську сторінку, використовуючи 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, який діє так, як його там не було.

Дивіться http://codecopy.wordpress.com/2013/02/22/ghost-iframe-crossdomain-iframe-resize/

В основному ви використовуєте систему подій, parent.postMessage(..)описану в https://developer.mozilla.org/en-US/docs/DOM/window.postMessage

Це працює у всіх сучасних браузерах!

Я знаю, що посада стара, але я вважаю, що це ще один спосіб зробити це. Я щойно реалізував на своєму коді. Відмінно працює як при завантаженні сторінки, так і на розмірі сторінки:

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

Тут йде код 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;
    }

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

Ось як я це робив при завантаженні або коли щось змінюється.

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

Очевидно, що сценаріїв багато, однак у мене був той самий домен для документа та iframe, і я зміг вирішити цю проблему до кінця вмісту iframe:

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

Це "знаходить" батьківський контейнер, а потім встановлює довжину, додаючи коефіцієнт витіснення в 50 пікселів, щоб видалити смугу прокрутки.

Немає нічого для того, щоб «спостерігати» за зміною висоти документа, цього я не потребував у моєму випадку використання. У своїй відповіді я привожу спосіб посилання на батьківський контейнер без використання ідентифікаторів, запечених у вмісті батьків / iframe.

Якщо ви можете жити з фіксованим співвідношенням сторін і хочете чуйного 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>

Вихідний код заснований на цьому веб-сайті, і Бен Маршалл має хороші пояснення.

Простота:

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

Якщо вміст - це просто простий 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;
}

<iframe src="hello.html" sandbox="allow-same-origin"
        onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';this.style.width=(this.contentWindow.document.body.scrollWidth+20)+'px';">
</iframe>