Ändern der Größe eines Iframes basierend auf dem Inhalt

498

Ich arbeite an einer iGoogle-ähnlichen Anwendung. Inhalte aus anderen Anwendungen (in anderen Domänen) werden mithilfe von Iframes angezeigt.

Wie ändere ich die Größe der Iframes an die Höhe des Iframes-Inhalts?

Ich habe versucht, das von Google verwendete Javascript zu entschlüsseln, aber es ist verschleiert, und das Durchsuchen des Webs war bisher erfolglos.

Update: Bitte beachten Sie, dass Inhalte aus anderen Domänen geladen werden, sodass die Richtlinie mit demselben Ursprung gilt.

javascript iframe widget larssg
quelle

584

Wir hatten diese Art von Problem, aber etwas umgekehrt zu Ihrer Situation - wir haben den iframed-Inhalt für Websites in anderen Domains bereitgestellt, sodass dieselbe Ursprungsrichtlinie ebenfalls ein Problem darstellte. Nach vielen Stunden beim Durchsuchen von Google haben wir schließlich eine (etwas ..) praktikable Lösung gefunden, die Sie möglicherweise an Ihre Bedürfnisse anpassen können.

Es gibt einen Weg, um dieselbe Ursprungsrichtlinie zu umgehen, aber es sind Änderungen sowohl am iframed-Inhalt als auch an der Framing-Seite erforderlich. Wenn Sie also nicht auf beiden Seiten Änderungen anfordern können, ist diese Methode für Sie nicht sehr nützlich. Ich fürchte.

Es gibt eine Browser-Eigenart, mit der wir die gleiche Ursprungsrichtlinie umgehen können - Javascript kann entweder mit Seiten in seiner eigenen Domain oder mit Seiten kommunizieren, die iframed hat, aber niemals mit Seiten, in denen es eingerahmt ist, z.

 www.foo.com/home.html, which iframes
 |-> www.bar.net/framed.html, which iframes
     |-> www.foo.com/helper.html

home.htmlkann dann mit framed.html(iframed) und helper.html(derselben Domain) kommunizieren .

 Communication options for each page:
 +-------------------------+-----------+-------------+-------------+
 |                         | home.html | framed.html | helper.html |
 +-------------------------+-----------+-------------+-------------+
 | www.foo.com/home.html   |    N/A    |     YES     |     YES     |
 | www.bar.net/framed.html |    NO     |     N/A     |     YES     |
 | www.foo.com/helper.html |    YES    |     YES     |     N/A     |
 +-------------------------+-----------+-------------+-------------+

framed.htmlkann Nachrichten an helper.html(iframed) senden, aber nicht home.html (Kind kann nicht domänenübergreifend mit Eltern kommunizieren).

Der Schlüssel hier ist , dass helper.htmlempfangen können Nachrichten aus framed.htmlund kann auch kommunizieren mit home.html.

Wenn also framed.htmlgeladen wird, berechnet es im Wesentlichen seine eigene Höhe, sagt helper.html, an welche die Nachricht weitergeleitet wird home.html, und kann dann die Größe des Iframes ändern, in dem er sich framed.htmlbefindet.

Der einfachste Weg, Nachrichten von an framed.htmlzu übergeben, helper.htmlwar ein URL-Argument. Zu diesem framed.htmlZweck wurde ein Iframe mit src=''angegeben. Wenn es onloadausgelöst wird, wertet es seine eigene Höhe aus und setzt den src des iframe an dieser Stelle aufhelper.html?height=N

Hier gibt es eine Erklärung, wie Facebook damit umgeht, die vielleicht etwas klarer ist als meine oben!

Code

In www.foo.com/home.htmlwird der folgende Javascript-Code benötigt (dieser kann übrigens aus einer .js-Datei in einer beliebigen Domain geladen werden ..):

<script>
  // Resize iframe to full height
  function resizeIframe(height)
  {
    // "+60" is a general rule of thumb to allow for differences in
    // IE & and FF height reporting, can be adjusted as required..
    document.getElementById('frame_name_here').height = parseInt(height)+60;
  }
</script>
<iframe id='frame_name_here' src='http://www.bar.net/framed.html'></iframe>

In www.bar.net/framed.html:

<body onload="iframeResizePipe()">
<iframe id="helpframe" src='' height='0' width='0' frameborder='0'></iframe>

<script type="text/javascript">
  function iframeResizePipe()
  {
     // What's the page height?
     var height = document.body.scrollHeight;

     // Going to 'pipe' the data to the parent through the helpframe..
     var pipe = document.getElementById('helpframe');

     // Cachebuster a precaution here to stop browser caching interfering
     pipe.src = 'http://www.foo.com/helper.html?height='+height+'&cacheb='+Math.random();

  }
</script>

Inhalt von www.foo.com/helper.html:

<html> 
<!-- 
This page is on the same domain as the parent, so can
communicate with it to order the iframe window resizing
to fit the content 
--> 
  <body onload="parentIframeResize()"> 
    <script> 
      // Tell the parent iframe what height the iframe needs to be
      function parentIframeResize()
      {
         var height = getParam('height');
         // This works as our parent's parent is on our domain..
         parent.parent.resizeIframe(height);
      }

      // Helper function, parse param from request string
      function getParam( name )
      {
        name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
        var regexS = "[\\?&]"+name+"=([^&#]*)";
        var regex = new RegExp( regexS );
        var results = regex.exec( window.location.href );
        if( results == null )
          return "";
        else
          return results[1];
      }
    </script> 
  </body> 
</html>

ConroyP
quelle

7

voll von Einsicht. Ich habe mich gefragt, warum igoogle.com eine helper.html-Datei hat! Danke

IEnumerator

9

Super, danke! Ich habe ein paar Ergänzungen vorgenommen: Verwenden Sie jQuery, um die Körpergröße in framed.html zu ermitteln (FF-Problem, Körper wächst weiter): var height = $ (document.body) .height (); Verwendete ein Body-Onload-Ereignis, um den Frame in home.html zu erstellen, ähnlich wie bei framed.html. Adressen, die den Frame beim Aktualisieren in FF und Safari nicht aktualisieren.

Abdullah Jibaly

5

Genius! Zusätzlich zu Abdullahs Ergänzungen: Anstatt das Aufrufen des Body-Onloads so einzustellen, dass es aufgerufen wird parentIframeResize(), habe ich JQuery verwendet, um sowohl das Laden der Seite als auch alle Größenänderungsereignisse zu erfassen: Auf $(document).ready(iframeResizePipe); $(window).resize(iframeResizePipe);diese Weise kann ich den Iframe festlegen width="100%"und wenn sich die Fensterbreite ändert, um einen Textumbruch oder etwas anderes zu erstellen , den Der innere Rahmen erkennt, dass die Größe geändert werden muss.

StriplingWarrior

9

Ich schlage vor, dem iframe id = frame_name_here ein Standardhöhenattribut wie height = "2000" zu geben. Dies bedeutet, dass beim Laden der Seite der gerahmte Inhalt sichtbar ist. Wenn die Größenänderung erfolgt, gibt es kein "Flimmern". Die Größenänderung wird unterhalb der Seitenfalte verkleinert / vergrößert. Wenn Sie die maximale Höhe Ihres iframed-Inhalts kennen, verwenden Sie diesen Wert. Dies führt auch zu einer besseren Noscript-Erfahrung.

Chris Jacob

3

Sieben Jahre später immer noch die beste browser- und domänenübergreifende Lösung, die ich gefunden habe. Bravo.

FurryWombat

81

Wenn Sie keine Iframe-Inhalte aus einer anderen Domäne verarbeiten müssen, probieren Sie diesen Code aus. Dadurch wird das Problem vollständig gelöst und es ist ganz einfach:

<script language="JavaScript">
<!--
function autoResize(id){
    var newheight;
    var newwidth;

    if(document.getElementById){
        newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
        newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
    }

    document.getElementById(id).height= (newheight) + "px";
    document.getElementById(id).width= (newwidth) + "px";
}
//-->
</script>

<iframe src="usagelogs/default.aspx" width="100%" height="200px" id="iframe1" marginheight="0" frameborder="0" onLoad="autoResize('iframe1');"></iframe>

Ahmy
quelle

9

Es kann optimaler sein, das Element selbst an die Funktion zu übergeben, um alle vorhandenen Elemente zu vermeiden document.getElementById(id)und den Code zu vereinfachen.

Muhd

1

Dies funktioniert bei mir nicht, da contentWindow.document.body.scrollHeight 0 und nicht die tatsächliche Höhe enthält.

Kroiz

4

Diese Lösung funktioniert, wie alle anderen, die ich ausprobiert habe, nur, wenn die Höhe zunimmt. Wenn Sie von einer hohen Seite zu einer kürzeren navigieren, wird die Höhe immer noch entsprechend der Höhe der ersten Seite festgelegt. Hat jemand eine Lösung für dieses Problem gefunden?

Eugenio

6

@Eugenio und alle anderen, einschließlich mir, um dieses letzte Problem zu beheben: Siehe stackoverflow.com/questions/3053072/… Bevor Sie nach der Höhe des Dokuments im iframe fragen, sollten Sie die Höhe des iframe-Objekts auf "auto" setzen. Beachten Sie, dass Sie style.height verwenden sollten, nicht nur height wie in der obigen Antwort

Kyle

7

Ich verstehe es nicht ... Sie überprüfen, ob document.getElementById vorhanden ist, und rufen es dann trotzdem außerhalb des überprüften Bereichs auf?

Legolas

41

https://developer.mozilla.org/en/DOM/window.postMessage

window.postMessage ()

window.postMessage ist eine Methode zur sicheren Aktivierung der Kommunikation zwischen verschiedenen Ursprüngen. Normalerweise dürfen Skripte auf verschiedenen Seiten nur dann aufeinander zugreifen, wenn sich die Seiten, auf denen sie ausgeführt wurden, an Orten mit demselben Protokoll (normalerweise beide http), Portnummer (80 ist die Standardeinstellung für http) und Host (modulo) befinden document.domain wird von beiden Seiten auf den gleichen Wert gesetzt). window.postMessage bietet einen kontrollierten Mechanismus, um diese Einschränkung auf eine Weise zu umgehen, die bei ordnungsgemäßer Verwendung sicher ist.

Zusammenfassung

Wenn window.postMessage aufgerufen wird, wird ein MessageEvent im Zielfenster ausgelöst, wenn ein ausstehendes Skript abgeschlossen ist, das ausgeführt werden muss (z. B. verbleibende Ereignishandler, wenn window.postMessage von einem Ereignishandler aufgerufen wird, zuvor festgelegte ausstehende Zeitüberschreitungen usw.). ). Das MessageEvent hat den Typ message, eine Dateneigenschaft, die auf den Zeichenfolgenwert des ersten Arguments festgelegt ist, das window.postMessage zur Verfügung gestellt wird, eine Ursprungseigenschaft, die dem Ursprung des Hauptdokuments im Fenster entspricht, das window.postMessage im Zeitfenster aufruft. postMessage wurde aufgerufen und eine Quelleigenschaft, die das Fenster ist, von dem window.postMessage aufgerufen wird. (Andere Standardeigenschaften von Ereignissen sind mit ihren erwarteten Werten vorhanden.)

Die iFrame-Resizer- Bibliothek verwendet postMessage, um die Größe eines iFrame auf seinen Inhalt zu beschränken, und MutationObserver , um Änderungen am Inhalt zu erkennen, und hängt nicht von jQuery ab.

https://github.com/davidjbradshaw/iframe-resizer

jQuery: Domainübergreifende Scripting-Qualität

http://benalman.com/projects/jquery-postmessage-plugin/

Hat eine Demo zum Ändern der Größe des Iframe-Fensters ...

http://benalman.com/code/projects/jquery-postmessage/examples/iframe/

Dieser Artikel zeigt, wie Sie die Abhängigkeit von jQuery entfernen ... Plus enthält viele nützliche Informationen und Links zu anderen Lösungen.

http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/

Barebones Beispiel ...

http://onlineaspect.com/uploads/postmessage/parent.html

HTML 5-Arbeitsentwurf für window.postMessage

http://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html#crossDocumentMessages

John Resig über Cross-Window Messaging

http://ejohn.org/blog/cross-window-messaging/

Chris Jacob
quelle

postMessage allein ist kein browserübergreifender Vorgang, aber das jQuery-Plugin scheint gute Arbeit zu leisten, wenn es erforderlich ist. Das einzige wirkliche Problem ist der "Junk", der der URL-Leiste hinzugefügt wird, wenn postMessage nicht unterstützt wird.

Herms

2

postMessage scheint X-Browser zu sein. Nur der IE muss Fehler oder Dinge beachten: 1. Kommunikation nur zwischen Frames oder Iframes 2. Nur in der Lage, Zeichenfolgen zu veröffentlichen. Siehe: caniuse.com/x-doc-messaging

Christian Kuetbach

3

Es wäre schön gewesen, wenn Sie die Frage beantwortet hätten, anstatt eine unterstützende Technologie zu erläutern, die bei einer Lösung hilft.

hitautodestruct

periscopedata verwendet postMessage. Wenn es für sie gut genug ist, ist es für uns gut genug. Hier sind ihre Dokumente: doc.periscopedata.com/docv2/embed-api-options

Yevgeniy

8

Der einfachste Weg mit jQuery:

$("iframe")
.attr({"scrolling": "no", "src":"http://www.someotherlink.com/"})
.load(function() {
    $(this).css("height", $(this).contents().height() + "px");
});

Omer Arshad
quelle

14

Nicht domänenübergreifend wie gewünscht.

Willem

6

Die Lösung auf http://www.phinesolutions.com/use-jquery-to-adjust-the-iframe-height.html funktioniert hervorragend (verwendet jQuery):

<script type=”text/javascript”>
  $(document).ready(function() {
    var theFrame = $(”#iFrameToAdjust”, parent.document.body);
    theFrame.height($(document.body).height() + 30);
  });
</script>

Ich weiß nicht, dass Sie 30 zur Länge hinzufügen müssen ... 1 hat für mich gearbeitet.

Zu Ihrer Information: Wenn Ihr iFrame bereits ein Attribut "height" enthält, wird nur style = "height: xxx" hinzugefügt. Dies ist möglicherweise nicht das, was Sie wollen.

Macho Matt
quelle

7

Nicht domänenübergreifend, nein.

Volomike

Genau das, was ich brauchte, da ich nicht domänenübergreifend bin, +1 für gültiges HTML.

WildJoe

4

kann etwas spät sein, da alle anderen Antworten älter sind :-) aber ... hier ist meine Lösung. Getestet in FF, Chrome und Safari 5.0.

CSS:

iframe {border:0; overflow:hidden;}

Javascript:

$(document).ready(function(){
    $("iframe").load( function () {
        var c = (this.contentWindow || this.contentDocument);
        if (c.document) d = c.document;
        var ih = $(d).outerHeight();
        var iw = $(d).outerWidth();
        $(this).css({
            height: ih,
            width: iw
        });
    });
});

Hoffe das wird jedem helfen.

ddlab
quelle

@pashute - meinst du "domänenübergreifend"?

Luke

Es tut uns leid. Gemeint: Funktioniert nicht plattformübergreifend ... Hier ist ein öffentlicher Kern: gist.github.com/pashute/c4705ce7f767f50fdf56d0030ecf9192 Ruft einen Fehler ab, der zur Ausführung abgelehnt wurde. Das Ändern des Skripts auf type = "text / javascript" hilft nicht. Sie können auch die Breite und Höhe des Iframes nicht einstellen (z. B. 80%).

Pashute

4

Schließlich habe ich eine andere Lösung gefunden, um Daten von iframe mit an die übergeordnete Website zu senden window.postMessage(message, targetOrigin);. Hier erkläre ich, wie ich es gemacht habe.

Site A = http://foo.com Site B = http://bar.com

SiteB wird auf der Website siteA geladen

SiteB-Website haben diese Zeile

window.parent.postMessage("Hello From IFrame", "*");

oder

window.parent.postMessage("Hello From IFrame", "http://foo.com");

Dann hat siteA diesen folgenden Code

// Here "addEventListener" is for standards-compliant web browsers and "attachEvent" is for IE Browsers.
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];


var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child IFrame window
eventer(messageEvent, function (e) {
   alert(e.data);
   // Do whatever you want to do with the data got from IFrame in Parent form.
}, false);

Wenn Sie eine Sicherheitsverbindung hinzufügen möchten, können Sie diese if-Bedingung in verwenden eventer(messageEvent, function (e) {})

if (e.origin == 'http://iframe.example.com') {
    alert(e.data); 
    // Do whatever you want to do with the data got from IFrame in Parent form.
}

Für IE

Innerhalb von IFrame:

 window.parent.postMessage('{"key":"value"}','*');

Draußen:

 eventer(messageEvent, function (e) {
   var data = jQuery.parseJSON(e.data);
   doSomething(data.key);
 }, false);

Selvamani
quelle

2

Hier ist eine einfache Lösung, bei der ein dynamisch generiertes Stylesheet verwendet wird, das vom selben Server wie der Iframe-Inhalt bereitgestellt wird. Ganz einfach "weiß" das Stylesheet, was sich im Iframe befindet, und kennt die Abmessungen, die zum Stylen des Iframes verwendet werden sollen. Dies führt zu den gleichen Einschränkungen der Ursprungsrichtlinien.

http://www.8degrees.co.nz/2010/06/09/dynamically-resize-an-iframe-depending-on-its-content/

Der mitgelieferte Iframe-Code hätte also ein begleitendes Stylesheet wie dieses ...

<link href="http://your.site/path/to/css?contents_id=1234&dom_id=iframe_widget" rel="stylesheet" type="text/css" />  <iframe id="iframe_widget" src="http://your.site/path/to/content?content_id=1234" frameborder="0" width="100%" scrolling="no"></iframe>

Dies setzt voraus, dass die serverseitige Logik die Abmessungen des gerenderten Inhalts des Iframes berechnen kann.

Vaughan Rowsell
quelle

Der Link ist ausgefallen. Könnten Sie bitte den relevanten Code in Ihrer Antwort teilen, damit er für diesen Thread relevant bleibt?

Zed

2

Diese Antwort gilt nur für Websites, die Bootstrap verwenden. Die reaktionsschnelle Einbettungsfunktion des Bootstraps erledigt den Job. Es basiert auf der Breite (nicht Höhe) des Inhalts.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/WsFWhL4Y84Y"></iframe>
</div>

jsfiddle: http://jsfiddle.net/00qggsjj/2/

http://getbootstrap.com/components/#responsive-embed

Razan Paul
quelle

Dies funktioniert zum Einbetten von Videos, aber wenn ich eine Webseite mit einer Höhe einbetten möchte, wird ein Bildlauf und eine seltsame Höhe angezeigt.

cabaji99

1

Ich implementiere die Frame-in-Frame-Lösung von ConroyP, um eine Lösung zu ersetzen, die auf dem Festlegen von document.domain basiert. Es war jedoch ziemlich schwierig, die Höhe des Iframe-Inhalts in verschiedenen Browsern korrekt zu bestimmen (derzeit mit FF11, Ch17 und IE9 testen) ).

ConroyP verwendet:

var height = document.body.scrollHeight;

Dies funktioniert jedoch nur beim ersten Laden der Seite. Mein Iframe hat dynamischen Inhalt und ich muss die Größe des Iframes bei bestimmten Ereignissen ändern.

Am Ende habe ich verschiedene JS-Eigenschaften für die verschiedenen Browser verwendet.

function getDim () {
    var body = document.body,
        html = document.documentElement;

    var bc = body.clientHeight;
    var bo = body.offsetHeight;
    var bs = body.scrollHeight;
    var hc = html.clientHeight;
    var ho = html.offsetHeight;
    var hs = html.scrollHeight;

    var h = Math.max(bc, bo, bs, hc, hs, ho);

    var bd = getBrowserData();

    // Select height property to use depending on browser
    if (bd.isGecko) {
        // FF 11
        h = hc;
    } else if (bd.isChrome) {
        // CH 17
        h = hc;
    } else if (bd.isIE) {
        // IE 9
        h = bs;
    }

    return h;
}

getBrowserData () ist eine Browser-Erkennungsfunktion, die von Ext Core's http://docs.sencha.com/core/source/Ext.html#method-Ext-apply "inspiriert" wurde

Das hat für FF und IE gut funktioniert, aber dann gab es Probleme mit Chrome. Eines der Probleme war das Timing. Anscheinend dauert es eine Weile, bis Chrome die Höhe des Iframes eingestellt / erkannt hat. Und dann hat Chrome auch nie die Höhe des Inhalts im Iframe korrekt zurückgegeben, wenn der Iframe höher als der Inhalt war. Dies würde bei dynamischen Inhalten nicht funktionieren, wenn die Höhe verringert wird.

Um dies zu lösen, setze ich den Iframe immer auf eine niedrige Höhe, bevor ich die Höhe des Inhalts erkenne und dann die Iframe-Höhe auf den richtigen Wert setze.

function resize () {
    // Reset the iframes height to a low value.
    // Otherwise Chrome won't detect the content height of the iframe.
    setIframeHeight(150);

    // Delay getting the dimensions because Chrome needs
    // a few moments to get the correct height.
    setTimeout("getDimAndResize()", 100);
}

Der Code ist nicht optimiert, er stammt aus meinen Entwicklungstests :)

Hoffe jemand findet das hilfreich!

Tor Händevik
quelle

1

<html>
<head>
<script>
function frameSize(id){
var frameHeight;

document.getElementById(id).height=0 + "px";
if(document.getElementById){
    newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;    
}

document.getElementById(id).height= (frameHeight) + "px";
}
</script>
</head>

<body>

<iframe id="frame"  src="startframe.html" frameborder="0" marginheight="0" hspace=20     width="100%" 

onload="javascript:frameSize('frame');">

<p>This will work, but you need to host it on an http server, you can do it locally.    </p>
</body>
</html>

webd3sign
quelle

0

iGoogle-Gadgets müssen die Größenänderung aktiv implementieren. Ich vermute also, dass Sie dies in einem domänenübergreifenden Modell nicht tun können, ohne dass der Remote-Inhalt in irgendeiner Weise beteiligt ist. Wenn Ihr Inhalt mithilfe typischer domänenübergreifender Kommunikationstechniken eine Nachricht mit der neuen Größe an die Containerseite senden kann, ist der Rest einfach.

Joeri Sebrechts
quelle

0

Wenn Sie eine Webseite verkleinern möchten, um sie an die Iframe-Größe anzupassen:

Sie sollten die Größe des Iframes so ändern , dass er zum Inhalt passt
Dann sollten Sie den gesamten Iframe mit dem geladenen Webseiteninhalt verkleinern

Hier ist ein Beispiel:

<div id="wrap">
   <IFRAME ID="frame" name="Main" src ="http://www.google.com" />
</div>

<style type="text/css">
    #wrap { width: 130px; height: 130px; padding: 0; overflow: hidden; }
    #frame { width: 900px; height: 600px; border: 1px solid black; }
    #frame { zoom:0.15; -moz-transform:scale(0.15);-moz-transform-origin: 0 0; }
</style>

kaw
quelle

0

Hier ist ein jQuery-Ansatz, der die Informationen in json über das src-Attribut des iframe hinzufügt. Hier ist eine Demo, ändern Sie die Größe und scrollen Sie durch dieses Fenster. Die resultierende URL mit json sieht so aus ... http://fiddle.jshell.net/zippyskippy/RJN3G/show/#{docHeight:5124,windowHeight:1019,scrollHeight: 571} #

Hier ist die Quellcode-Geige http://jsfiddle.net/zippyskippy/RJN3G/

function updateLocation(){

    var loc = window.location.href;
    window.location.href = loc.replace(/#{.*}#/,"") 
        + "#{docHeight:"+$(document).height() 
        + ",windowHeight:"+$(window).height()
        + ",scrollHeight:"+$(window).scrollTop()
        +"}#";

};

//setInterval(updateLocation,500);

$(window).resize(updateLocation);
$(window).scroll(updateLocation);

Chad Steele
quelle

0

Holen Sie sich die Höhe des Iframe-Inhalts und geben Sie ihn diesem Iframe

 var iframes = document.getElementsByTagName("iframe");
 for(var i = 0, len = iframes.length; i<len; i++){
      window.frames[i].onload = function(_i){
           return function(){
                     iframes[_i].style.height = window.frames[_i].document.body.scrollHeight + "px";
                     }
      }(i);
 }

YellowGlue
quelle

1

Können Sie bitte eine Beschreibung hinzufügen, warum Ihr Code die Frage beantwortet?

Rhughes

0

Arbeiten Sie mit jquery on load (browserübergreifend):

 <iframe src="your_url" marginwidth="0"  marginheight="0" scrolling="No" frameborder="0"  hspace="0" vspace="0" id="containiframe" onload="loaderIframe();" height="100%"  width="100%"></iframe>

function loaderIframe(){
var heightIframe = $('#containiframe').contents().find('body').height();
$('#frame').css("height", heightFrame);
 }

beim Ändern der Größe auf der Antwortseite:

$(window).resize(function(){
if($('#containiframe').length !== 0) {
var heightIframe = $('#containiframe').contents().find('body').height();
 $('#frame').css("height", heightFrame);
}
});

Mario Gonzales Flores
quelle

-1

Verwenden von jQuery:

parent.html

<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<style>
iframe {
    width: 100%;
    border: 1px solid black;
}
</style>
<script>
function foo(w, h) {
    $("iframe").css({width: w, height: h});
    return true;  // for debug purposes
}
</script>
<iframe src="child.html"></iframe>
</body>

child.html

<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(function() {
    var w = $("#container").css("width");
    var h = $("#container").css("height");

    var req = parent.foo(w, h);
    console.log(req); // for debug purposes
});
</script>
<style>
body, html {
    margin: 0;
}
#container {
    width: 500px;
    height: 500px;
    background-color: red;
}
</style>
<div id="container"></div>
</body>

Nino Škopac
quelle

-2

Dies ist etwas schwierig, da Sie wissen müssen, wann die Iframe-Seite geladen wurde. Dies ist schwierig, wenn Sie nicht die Kontrolle über den Inhalt haben. Es ist möglich, dem Iframe einen Onload-Handler hinzuzufügen, aber ich habe dies in der Vergangenheit versucht und es hat ein sehr unterschiedliches Verhalten zwischen den Browsern (nicht erraten, wer am nervigsten ist ...). Sie müssten wahrscheinlich der iframe-Seite eine Funktion hinzufügen, die die Größenänderung ausführt, und ein Skript in den Inhalt einfügen, das entweder auf das Laden von Ereignissen wartet oder Ereignisse in der Größe ändert, die dann die vorherige Funktion aufrufen. Ich denke, der Seite eine Funktion hinzuzufügen, da Sie sicherstellen möchten, dass sie sicher ist, aber ich habe keine Ahnung, wie einfach dies sein wird.

roryf
quelle

-2

Etwas in der Art, wie ich glaube, sollte funktionieren.

parent.document.getElementById(iFrameID).style.height=framedPage.scrollHeight;

Laden Sie dies mit Ihrem Körper auf den Iframe-Inhalt.

Ólafur Waage
quelle

3

Dies ist nicht möglich, da der Inhalt in den iFrames aus anderen Domänen geladen wird. Wenn Sie dies versuchen, führt dies zu einem Fehler wie dem von Firefox: "Berechtigung zum Abrufen der Eigenschaft Window.document verweigert".

Larssg

-4

Ich habe eine einfache Lösung und fordere Sie auf, die Breite und Höhe des Links zu bestimmen. Bitte versuchen Sie es (es funktioniert mit den meisten Browsern):

<a href='#' onClick=" document.getElementById('myform').src='t2.htm';document.getElementById('myform').width='500px'; document.getElementById('myform').height='400px'; return false">500x400</a>

فيصل خلبوص
quelle

Ändern der Größe eines Iframes basierend auf dem Inhalt

Antworten:

Holen Sie sich die Höhe des Iframe-Inhalts und geben Sie ihn diesem Iframe