Dostosuj szerokość i wysokość ramki iframe, aby pasowała do zawartości w niej

Cross-browser jQuery plug-in .

Cross-bowser, cross domain biblioteka to używa mutationObserver, aby utrzymać rozmiar iFrame do zawartości i postMessage do komunikacji między iFrame a stroną hosta. Działa z jQuery lub bez.

Jednowarstwowe rozwiązanie do osadzania: zaczyna się od rozmiaru min i zwiększa się do rozmiaru zawartości. nie ma potrzeby stosowania znacznikó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>

Wszystkie dotychczas podane rozwiązania uwzględniają tylko jednorazową zmianę rozmiaru. Wspominasz, że chcesz mieć możliwość zmiany rozmiaru ramki iFrame po modyfikacji zawartości. Aby to zrobić, musisz wykonać funkcję wewnątrz ramki iFrame (po zmianie zawartości musisz uruchomić zdarzenie, aby powiedzieć, że zawartość się zmieniła).

Utknąłem z tym na jakiś czas, ponieważ kod wewnątrz ramki iFrame wydawał się ograniczony do DOM wewnątrz ramki iFrame (i nie mógł edytować ramki iFrame), a kod wykonywany poza ramką iFrame został zatrzymany z DOM poza ramką iFrame (i nie mógł odebrać zdarzenia pochodzącego z wewnątrz ramki iFrame).

Rozwiązanie powstało z odkrycia (dzięki pomocy kolegi), że jQuery można powiedzieć, jakiego DOM ma używać. W tym przypadku DOM okna nadrzędnego.

Jako taki, kod taki jak ten robi to ,czego potrzebujesz (gdy jest uruchamiany wewnątrz ramki 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>

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

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

Aby dynamicznie zmieniać rozmiar można 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, którą ładuje iframe dodaj to:

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

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

Oto rozwiązanie dla wielu 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 na mnie.

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

Używam tego kodu do autoadjust wysokości wszystkich ramek iFrame (z klasą autoHeight), gdy ładują się na stronie. Przetestowany 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();
});

Jest to rozwiązanie solid proof

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>

Nieco zmodyfikowałem świetne rozwiązanie Garnapha powyżej. Wydawało się, że jego rozwiązanie zmodyfikowało rozmiar iframe na podstawie rozmiaru tuż przed wydarzeniem. W mojej sytuacji (przesyłanie e-maila przez iframe) potrzebowałem wysokości iframe, aby zmienić zaraz po złożeniu. Na przykład Pokaż błędy walidacji lub komunikat "dziękuję"po przesłaniu.

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

Zadziałało dla mnie, ale nie jestem pewien co do krzyża funkcjonalność przeglądarki.

Wymyśliłem inne rozwiązanie po kilku eksperymentach. 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 był generowany dynamicznie. Oto kod, którego użyłem (zadziałał u mnie):

Javascript wewnątrz ramki iframe, która jest ładowana:

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 (jakiś dziwny błąd/efekt ramek iFrame). Szerokość jest równa nieznajomy, możesz dodać 18px do szerokości ciała. Upewnij się również, że masz zastosowany css dla ciała iframe (poniżej).

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

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

Oto html dla ramki iframe:

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

Oto cały kod w moim 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 firefox (w windows xp). Mam jeszcze więcej testów, więc powiedz mi, jak to działa.

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

Ta biblioteka umożliwia automatyczną zmianę wysokości i szerokości obu ramek iframe, aby pasowały do ich zawartości. Zawiera szereg funkcji rozwiązujących najczęstsze problemy z używaniem ramek iFrames, do których należą:

• wysokość i szerokość zmiana rozmiaru ramki iFrame do rozmiaru zawartości.
• działa z wieloma i zagnieżdżonymi ramkami iframe.
• domena uwierzytelnianie dla ramek iframe cross domain.
• dostarcza szereg metod obliczania rozmiaru strony do obsługi złożonych układów CSS.
• wykrywa zmiany w DOM, które mogą spowodować zmianę rozmiaru strony przy użyciu 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 pomiędzy iFrame a stroną hosta za pomocą postMessage.
• poprawki w linkach do stron w iFrame i obsługuje łącza między ramką iFrame i stroną nadrzędną.
• zapewnia niestandardowe metody sortowania i przewijania.
• wyświetla pozycję nadrzędną i rozmiar widoku na ramkę iFrame.
• współpracuje z ViewerJS do obsługi dokumentów PDF i ODF.
• Wsparcie awaryjne w dół do IE8.

Wszystkie nie mogą 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>

Env: IE 10, Windows 7 x64

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 INNA 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 ALTERNATYWY, JAK POKAZANO 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 ramki iFrame, rodzic tworzy "overflow: hidden", aby ukryć paski przewijania, a ramka iFrame ma przejść do 150% szerokości i wysokości, co wymusza przewijanie pasków poza stroną, a ponieważ ciało nie ma pasków przewijania, nie można oczekiwać, że ramka iframe przekroczy wartość 150%. / align = "left" / To ukrywa paski przewijania iFrame z pełną szerokością!

Source: set iframe auto height

In case someone getting to here: Miałem problem z rozwiązaniami, gdy usunąłem divs z iframe - iframe nie stał się krótszy.

Istnieje wtyczka Jquery, która wykonuje zadanie:

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

Znalazłem 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 style jest usuwany.

W jQuery jest to dla mnie najlepsza opcja, która naprawdę mi pomaga!! Czekam na pomoc!

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 sieci. To rozszerzenie internetowe wstrzykuje część interfejsu użytkownika do każdej strony, a ten interfejs mieszka wewnątrz iframe. Zawartość wewnątrz {[4] } jest dynamiczna, więc musiałem dostosować szerokość i wysokość samego iframe.

Używam React, ale pojęcie to odnosi się do każdej biblioteki.

Wewnątrz iframe zmieniłem body style mają naprawdę duże wymiary. Pozwoli to elementom wewnątrz rozplanować przy użyciu całej niezbędnej przestrzeni. Tworzenie width i height w 100% mi nie wyszło (chyba dlatego, że iframe ma domyślne width = 300px i height = 150px)

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

Następnie wstrzyknąłem cały interfejs iframe wewnątrz div I dałem mu kilka stylów

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

Po renderowaniu mojej aplikacji wewnątrz tego #ui-root (w React robię to wewnątrz componentDidMount) obliczam wymiary tego div jak i Synchronizuję je z rodzicem strona używająca window.postMessage:

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

W ramce rodzica 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)

Oczywiście istnieje wiele scenariuszy, jednak miałem tę samą domenę dla document i iframe i byłem w stanie dopasować to do końca mojej zawartości iframe:

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

To "znajduje" kontener nadrzędny, a następnie ustawia długość dodawania współczynnika krówka 50 pikseli, Aby usunąć pasek przewijania.

Nie ma tam nic do "obserwowania" zmiany wysokości dokumentu, tego nie potrzebowałem w moim przypadku użycia. W mojej odpowiedzi przynoszę sposób odwoływania się do kontenera macierzystego bez użycia ids do treści rodzica / iframe.

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

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

Tag Iframe:

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

Script tag:

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

Możliwe jest stworzenie IFrame ' a "przypominającego ducha", który zachowuje się, jakby go tam nie było.

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

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

To działa w nowoczesnych przeglądarkach!

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>

Wiem, że post jest stary, ale wierzę, że to jeszcze jeden sposób, aby to zrobić. Właśnie zaimplementowałem mój kod. Działa doskonale 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;
    }

Dla 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 tak, aby można było przeciwdziałać skalowaniu Zwykle wykonywanym dla iframe, tekstu, reklam itp.]}

Tak to zrobiłem na ładowaniu lub kiedy coś się zmienia.

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

Jeśli możesz żyć ze stałym współczynnikiem proporcji i chcesz responsywnego iframe, ten kod będzie dla ciebie 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%;
}

Ramka 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 i 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 zawartość jest po prostu bardzo prostym html, najprostszym sposobem jest usunięcie ramki 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>