Dostosuj szerokość i wysokość elementu iframe, aby dopasować go do zawartości

Potrzebuję rozwiązanie dla automatycznej regulacjiwidth i heightod iframeledwo dopasować jego zawartość. Chodzi o to, że szerokość i wysokość można zmienić po iframezaładowaniu. Chyba potrzebuję akcji zdarzenia, aby poradzić sobie ze zmianą wymiarów ciała zawartego w ramce 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>

Wtyczka jQuery dla różnych przeglądarek .

Cross-bowser, biblioteka obejmująca wiele domen, która mutationObserverutrzymuje rozmiar iFrame względem treści i postMessagekomunikuje się między iFrame a stroną hosta. Działa z lub bez jQuery.

Wszystkie dotychczasowe rozwiązania uwzględniają tylko jednorazową zmianę rozmiaru. Wspominasz, że chcesz zmienić rozmiar ramki iFrame po zmodyfikowaniu zawartości. Aby to zrobić, musisz wykonać funkcję w ramce iFrame (po zmianie zawartości musisz uruchomić zdarzenie, aby powiedzieć, że zawartość się zmieniła).

Utknąłem z tym przez chwilę, ponieważ kod wewnątrz iFrame wydawał się ograniczony do DOM wewnątrz iFrame (i nie mógł edytować iFrame), a kod wykonywany poza iFrame utknął z DOM poza iFrame (i nie mógł odebrać wydarzenie pochodzące z wnętrza iFrame).

Rozwiązanie pochodzi z odkrycia (dzięki pomocy kolegi), że jQuery można powiedzieć, z którego DOM korzystać. W takim przypadku DOM okna nadrzędnego.

Jako taki, kod taki jak ten robi to, czego potrzebujesz (po uruchomieniu w ramce 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>

jedno-liniowe rozwiązanie do osadzania: zaczyna się od rozmiaru minimalnego i zwiększa się do rozmiaru zawartości. nie potrzeba tagów skryptu.

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

Jeśli zawartość elementu iframe pochodzi z tej samej domeny, powinno to działać świetnie. Wymaga to jednak jQuery.

$('#iframe_id').load(function () {
    $(this).height($(this).contents().height());
    $(this).width($(this).contents().width());
});

Aby zmienić rozmiar dynamicznie, możesz to zrobić:

<script language="javaScript">
<!--
function autoResize(){
    $('#themeframe').height($('#themeframe').contents().height());
}
//-->
</script>
<iframe id="themeframe" onLoad="autoResize();" marginheight="0" frameborder="0" src="URL"></iframe>

Następnie na stronie ładowanej przez iframe dodaj:

<script language="javaScript">
function resize()
{
    window.parent.autoResize();
}

$(window).on('resize', resize);
</script>

Oto rozwiązanie dla różnych przeglądarek, jeśli nie chcesz używać 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;
}

Po wypróbowaniu wszystkiego na ziemi, to naprawdę działa dla mnie.

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>

Korzystam z tego kodu, aby automatycznie dostosować wysokość wszystkich ramek iframe (z klasą autoHeight), gdy ładują się na stronie. Przetestowane i działa w IE, FF, Chrome, Safari i 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();
});

To solidne rozwiązanie

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>

Lekko zmodyfikowałem świetne rozwiązanie Garnaph powyżej. Wyglądało na to, że jego rozwiązanie zmodyfikowało rozmiar elementu iframe w oparciu o rozmiar tuż przed zdarzeniem. W mojej sytuacji (przesyłanie wiadomości e-mail za pośrednictwem elementu iframe) potrzebowałem zmienić wysokość elementu iframe bezpośrednio po przesłaniu. Na przykład pokaż błędy weryfikacji lub komunikat „dziękuję” po przesłaniu.

Właśnie wyeliminowałem zagnieżdżoną funkcję click () i umieściłem ją w 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>

Pracowałem dla mnie, ale nie jestem pewien co do funkcjonalności w różnych przeglądarkach.

Jeśli możesz kontrolować zarówno zawartość IFRAME, jak i okno nadrzędne, potrzebujesz iFrame Resizer .

Ta biblioteka umożliwia automatyczne zmienianie wysokości i szerokości zarówno tych samych, jak i między domenowych ramek iFrame w celu dopasowania ich zawartej zawartości. Zapewnia szereg funkcji rozwiązujących najczęstsze problemy z używaniem ramek iFrames, do których należą:

• Wysokość i szerokość zmienia rozmiar ramki iFrame na rozmiar zawartości.
• Działa z wieloma i zagnieżdżonymi ramkami iFrame.
• Uwierzytelnianie domeny dla i-ramek między domenami.
• Udostępnia szereg metod obliczania rozmiaru strony w celu obsługi złożonych układów CSS.
• Wykrywa zmiany w DOM, które mogą powodować zmianę rozmiaru strony za pomocą MutationObserver.
• Wykrywa zdarzenia, które mogą spowodować zmianę rozmiaru strony (zmiana rozmiaru okna, animacja i przejście CSS, zmiana orientacji i zdarzenia myszy).
• Uproszczone przesyłanie wiadomości między ramką iFrame a stroną hosta za pośrednictwem postMessage.
• Naprawiono łącza do stron w iFrame i obsługuje łącza między iFrame a stroną nadrzędną.
• Zapewnia niestandardowe metody zmiany rozmiaru i przewijania.
• Wystawia pozycję nadrzędną i rozmiar rzutni w ramce iFrame.
• Współpracuje z ViewerJS w celu obsługi dokumentów PDF i ODF.
• Wsparcie awaryjne do IE8.

wszystko nie może działać przy użyciu powyższych metod.

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>

Środowisko: IE 10, Windows 7 x64

Po eksperymentach wymyśliłem inne rozwiązanie. Początkowo próbowałem kodu oznaczonego jako „najlepsza odpowiedź” na to pytanie i nie zadziałało. Domyślam się, że mój iframe w moim programie w tym czasie był generowany dynamicznie. Oto kod, którego użyłem (zadziałało dla mnie):

JavaScript wewnątrz ładowanego elementu 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';
    };

Konieczne jest dodanie 4 lub więcej pikseli do wysokości, aby usunąć paski przewijania (dziwny błąd / efekt ramek iframe). Szerokość jest jeszcze dziwniejsza, możesz bezpiecznie dodać 18px do szerokości ciała. Upewnij się także, że masz css dla ciała iframe zastosowanego (poniżej).

html, body {
   margin:0;
   padding:0;
   display:table;
}

iframe {
   border:0;
   padding:0;
   margin:0;
}

Oto HTML dla iframe:

<iframe id="fileUploadIframe" src="php/upload/singleUpload.html"></iframe>

Oto cały kod w mojej ramce 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>

Zrobiłem testy w Chrome i trochę w Firefoksie (w Windows XP). Mam jeszcze więcej testów, więc powiedz mi, jak to działa.

Tak bym to zrobił (testowany w 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>

Oto kilka metod:

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

I KOLEJNA ALTERNATYWA

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

ABY UKRYĆ PRZEWIJANIE Z 2 ALTERNATYWAMI WYMIENIONYMI POWYŻEJ

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

HACK Z DRUGIM KODEM

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

Aby ukryć paski przewijania w ramce iFrame, element nadrzędny zostaje „przepełniony: ukryty” w celu ukrycia pasków przewijania, a ramka iFrame jest przesuwana w górę do 150% szerokości i wysokości, co powoduje, że paski przewijania są przesuwane poza stronę, a ponieważ ciało nie „ Aby mieć paski przewijania, nie można oczekiwać, że ramka iframe będzie przekraczać granice strony. Ukrywa paski przewijania ramki iFrame na całej szerokości!

źródło: ustaw automatyczną wysokość iframe

Na wypadek, gdyby ktoś się tutaj dostał: miałem problem z rozwiązaniami, kiedy usunąłem div z iframe - iframe nie był krótszy.

Istnieje wtyczka Jquery, która wykonuje to zadanie:

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

Uważam, że ten resizer działa lepiej:

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;

}

Uwaga: obiekt stylu został usunięty.

W jQuery jest to dla mnie najlepsza opcja, która naprawdę mi pomaga !! Czekam, żeby ci pomóc!

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>

Kontekst

Musiałem to zrobić sam w kontekście rozszerzenia internetowego. To rozszerzenie internetowe wstrzykuje część interfejsu użytkownika na każdą stronę, a ten interfejs użytkownika znajduje się wewnątrz iframe. Zawartość wewnątrz iframejest dynamiczna, więc musiałem dostosować szerokość i wysokośćiframe samego siebie.

Używam React ale ta koncepcja dotyczy każdej biblioteki.

Moje rozwiązanie (zakłada się, że kontrolujesz zarówno stronę, jak i ramkę iframe)

Wewnątrz iframezmieniłem bodystyle, aby mieć naprawdę duże wymiary. Umożliwi to rozmieszczenie elementów w środku z wykorzystaniem niezbędnej przestrzeni. Tworzenie widthi height100% nie działało dla mnie (chyba dlatego, że iframe ma wartość domyślną width = 300pxi height = 150px)

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

Potem wstrzyknąłem interfejs użytkownika iframe do diva i nadałem mu trochę stylów

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

Po renderowaniu mojej aplikacji w tym #ui-root(w React robię to w środku componentDidMount) obliczam wymiary tego div, jak i synchronizuję je ze stroną nadrzędną, używając window.postMessage:

let elRect = el.getBoundingClientRect()
window.parent.postMessage({
  type: 'resize-iframe',
  payload: {
    width: elRect.width,
    height: elRect.height
  }
}, '*')

W ramce nadrzędnej robię coś takiego:

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)

Można stworzyć ramkę „przypominającą ducha”, która działa tak, jakby jej nie było.

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

Zasadniczo korzystasz z systemu zdarzeń parent.postMessage(..)opisanego w https://developer.mozilla.org/en-US/docs/DOM/window.postMessage

Działa to we wszystkich nowoczesnych przeglądarkach!

Wiem, że post jest stary, ale wierzę, że jest to kolejny sposób na zrobienie tego. Właśnie zaimplementowałem mój kod. Działa idealnie zarówno przy ładowaniu strony, jak i przy zmianie rozmiaru strony:

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 do umieszczenia w nagłówku:

function resizeIframe(obj) {
        obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
      }

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

Arkusz stylów CSS

>

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

W przypadku atrybutu dyrektywy 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';
        } );
    }
};
} );

Zwróć uwagę na procent, wstawiłem go, abyś mógł przeciwdziałać skalowaniu wykonywanemu zwykle dla iframe, tekstu, reklam itp., Po prostu ustaw 0, jeśli skalowanie nie jest implementacją

Tak to zrobiłem onload lub kiedy rzeczy się zmieniają.

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

Oczywiście jest wiele scenariuszy, ale miałem tę samą domenę dla dokumentu i iframe i udało mi się rozwiązać to na końcu mojej zawartości iframe:

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

To „znajdzie” kontener nadrzędny, a następnie ustawia długość dodając współczynnik krycia 50 pikseli, aby usunąć pasek przewijania.

Nie ma nic, co „obserwowałoby” zmianę wysokości dokumentu, nie potrzebowałem tego w moim przypadku użycia. W mojej odpowiedzi przytaczam sposób odwoływania się do kontenera nadrzędnego bez użycia identyfikatorów upieczonych w treści nadrzędnej / iframe.

Jeśli możesz żyć ze stałym współczynnikiem kształtu i potrzebujesz responsywnego elementu iframe , ten kod będzie ci przydatny. To tylko zasady 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%;
}

Element iframe musi mieć div jako kontener.

<div class="iframe-container">
   <iframe src="http://example.org"></iframe>
</div>

Kod źródłowy jest oparty na tej stronie, a Ben Marshall ma dobre wyjaśnienie.

Prostota:

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

Jeśli treść jest po prostu bardzo prostym plikiem HTML, najprostszym sposobem jest usunięcie elementu iframe za pomocą javascript

Kod HTML:

<div class="iframe">
    <iframe src="./mypage.html" frameborder="0" onload="removeIframe(this);"></iframe>
</div>

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