domänenübergreifende Iframe-Größenänderung

85

Wie ändere ich die Größe eines Iframes aus einer anderen Domain?

-Bearbeiten

Scrollen Sie nach unten, um einige Lösungen zu finden. Oder lesen Sie, wie Sie dies NICHT tun können: D.

Nach vielen Stunden Code-Hacking ist die Schlussfolgerung, dass auf alles im Iframe nicht zugegriffen werden kann, selbst auf die Bildlaufleisten, die auf meiner Domain gerendert werden. Ich habe viele Techniken ohne Erfolg ausprobiert.

Um Zeit zu sparen, gehen Sie nicht einmal diesen Weg, sondern verwenden Sie sendMessages für die domänenübergreifende Kommunikation. Es gibt Plug-Ins für HTML <5, die ich benutze. Ein schönes Beispiel finden Sie unten :)


In den letzten Tagen habe ich versucht, einen Iframe in eine Site zu integrieren. Dies ist eine kurzfristige Lösung, während sich die andere Seite entwickelt und eine API (kann Monate dauern ...). Und da dies eine kurzfristige Lösung ist, die wir gemacht haben, möchten wir easyXDM verwenden. Ich habe Zugriff auf die andere Domain, aber es ist schwierig genug, sie darum zu bitten Fügen Sie den p3p-Header so hinzu, wie er ist .....

3 iframes

Die naheliegendste Lösung, die ich gefunden habe, waren die 3 Iframes - aber es geht um Chrom und Safari, also kann ich das nicht verwenden.

offen in Chrom

http://css-tricks.com/examples/iFrameResize/crossdomain.php#frameId=frame-one&height=1179

Messen Sie die Bildlaufleisten

Ich habe einen anderen Beitrag darüber gefunden, wie man die Bildlaufhöhe verwendet, um die Größe des Formulars zu ändern. Theoretisch funktioniert es gut, aber ich konnte es mit der Bildlaufhöhe des Iframes nicht richtig anwenden.

document.body.scrollHeight

Das verwendet offensichtlich die Körperhöhe (kann nicht zu 100% auf diese Eigenschaften zugreifen, basiert auf der Anzeige von canvaz des Clients und nicht auf der Höhe des X-Domains-Dokuments).

Ich habe versucht, mit jquery die Höhe des Iframes zu ermitteln

$('#frameId').Height()

$('#frameId').clientHeight

$('#frameId').scrollHeight

Rückgabewerte, die sich in Chrom und dh unterscheiden - oder überhaupt keinen Sinn ergeben. Das Problem ist, dass alles im Rahmen verweigert wird - sogar die Bildlaufleiste ...

Berechnete Stile

Aber wenn ich den Iframe inspiziere und in Chrom verteile, zeigt mir bladdy die Dokumentabmessungen innerhalb des Iframes (unter Verwendung der jquery x-domain, um iframe.heigh zu erhalten - Zugriff verweigert). Das berechnete CSS enthält nichts Geben Sie hier die Bildbeschreibung ein

Wie berechnet Chrom das? (Der Bearbeitungsbrowser rendert die Seite mithilfe der integrierten Rendering-Engine neu, um alle diese Einstellungen zu berechnen. Sie werden jedoch nirgendwo angehängt, um domänenübergreifenden Betrug zu verhindern. Also.)

HTML4

Ich habe die Spezifikation von HTML4.x gelesen und dort steht, dass schreibgeschützte Werte über document.element verfügbar gemacht werden sollen, der Zugriff jedoch über jquery verweigert wird

Proxy-Frame

Ich bin den Weg gegangen, die Site zurückzusenden und zu berechnen, was in Ordnung ist. Bis sich ein Benutzer über den Iframe anmeldet und der Proxy anstelle des eigentlichen Inhalts eine Anmeldeseite erhält. Auch für manche ist es nicht akzeptabel, die Seite zweimal aufzurufen

http://www.codeproject.com/KB/aspnet/asproxy.aspx

http://www.johnchapman.name/aspnet-proxy-page-cross-domain-requests-from-ajax-and-javascript/

Rendern Sie die Seite erneut

Ich bin nicht so weit gegangen, aber es gibt JScript-Engines, die sich die Quelle ansehen und die Seite basierend auf der Quelldatei neu rendern. Aber es würde das Hacken dieser JSkripte erfordern ... und das ist keine ideale Situation für kommerzielle Einheiten ... und einige greifen reine Java-Applets oder serverseitiges Rendering ein

http://en.wikipedia.org/wiki/Server-side_JavaScript

http://htmlunit.sourceforge.net/ <-java nicht jscript

http://maxq.tigris.org/


EDIT 09-2013 UPDATE

All dies kann mit HTML5-Sockets durchgeführt werden. EasyXDM ist jedoch ein großartiger Fallback für Nicht-HTML5-Beschwerdeseiten.

Lösung 1 Sehr gute Lösung!

Mit easyXDM

Auf Ihrem Server richten Sie eine Seite in Form von ein

<html>
<head>
<script src="scripts/easyXDM.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">

    var transport = new easyXDM.Socket(/** The configuration */{
    remote: "http://www.OTHERDOMAIN.com/resize_intermediate.html?url=testpages/resized_iframe_1.html",

    //ID of the element to attach the inline frame to
    container: "embedded",
    onMessage: function (message, origin) {
        var settings = message.split(",");
        //Use jquery on a masterpage.
        //$('iframe').height(settings[0]);
        //$('iframe').width(settings[1]);

        //The normal solution without jquery if not using any complex pages (default)
        this.container.getElementsByTagName("iframe")[0].style.height = settings[0];
        this.container.getElementsByTagName("iframe")[0].style.width = settings[1];
    }
});

</script>

</head>

<body>
    <div id="embedded"></div>
</body>

und in der Anruferdomäne müssen sie nur die HTML-Dateien intermiedate_frame und easyXDM.js an derselben Stelle hinzufügen. Wie ein übergeordneter Ordner - dann können Sie nur für Sie auf relative Verzeichnisse oder einen enthaltenen Ordner zugreifen.

OPTION 1

Wenn Sie nicht allen Seiten Skripte hinzufügen möchten, sehen Sie sich Option 2 an!

Dann können sie einfach ein einfaches jscript am Ende jeder Seite hinzufügen, für die die Größenänderung erforderlich ist. Das easyxdm muss nicht in jede dieser Seiten aufgenommen werden.

 <script type="text/javascript">
            window.onload = function(){ parent.socket.postMessage( (parseInt(document.body.clientHeight)) + "," + ( document.body.clientWidth ) );  };
        </script>

Ich habe die gesendeten Parameter geändert. Wenn die Breite ordnungsgemäß funktionieren soll, müssen die Seiten in der anderen Domäne die Breite der Seite in einem Stil enthalten, der ungefähr so ​​aussieht wie:

<style type="text/css">
            html, body {
                overflow: hidden;
                margin: 0px;
                padding: 0px;
                background-color: rgb(75,0,85);
                color:white;
                width:660px
            }
            a {
            color:white;
            visited:white;
            }
        </style>

Das funktioniert gut für mich. Wenn die Breite nicht enthalten ist, verhält sich der Rahmen etwas seltsam und versucht zu erraten, was er sein soll. Er wird nicht verkleinert, wenn Sie es brauchen.

OPTION 2

Ändern Sie den Zwischenrahmen, um nach Änderungen zu suchen

Ihr Zwischenrahmen sollte ungefähr so ​​aussehen.

    <!doctype html>
<html>
    <head>

        <title>Frame</title>
        <script type="text/javascript" src="easyXDM.js">
        </script>
        <script type="text/javascript">
            var iframe;
            var socket = new easyXDM.Socket({
                //This is a fallback- not needed in many cases
                swf: "easyxdm.swf",
                onReady: function(){
                    iframe = document.createElement("iframe");
                    iframe.frameBorder = 0;
                    document.body.appendChild(iframe);
                    iframe.src = "THE HOST FRAME";
            iframe.onchange = messageBack();

                },
                onMessage: function(url, origin){
                    iframe.src = url;
                }
            });

            //Probe child.frame for dimensions.
            function messageBack(){
                socket.postMessage ( iframe.contentDocument.body.clientHeight + "," + iframe.contentDocument.body.clientWidth); 
            };

            //Poll for changes on children every 500ms.
            setInterval("messageBack()",500); 

        </script>
        <style type="text/css">
            html, body {
                overflow: hidden;
                margin: 0px;
                padding: 0px;
                width: 100%;
                height: 100%;
            }

            iframe {
                width: 100%;
                height: 100%;
                border: 0px;
            }
        </style>
    </head>
    <body>

    </body>
</html>

Das Intervall könnte effizienter gestaltet werden, um zu überprüfen, ob sich die Größe geändert hat, und nur dann zu senden, wenn sich die Abmessungen ändern, anstatt alle 500 ms Nachrichten zu veröffentlichen. Wenn Sie diese Prüfung durchführen, können Sie die Abfrage auf nur 50 ms ändern! habe Spaß


Arbeiten Sie browserübergreifend und schnell. Tolle Debugging-Funktionen !!

Excellent Work to  Sean Kinsey  who made the script!!!

Lösung 2 (funktioniert aber nicht so gut)

Wenn Sie also eine gegenseitige Vereinbarung mit der anderen Domain haben, können Sie eine Bibliothek hinzufügen, um sendmessage zu verarbeiten. Wenn Sie keinen Zugriff auf die andere Domain haben, suchen Sie weiter nach weiteren Hacks, da ich diese gefunden oder nicht vollständig rechtfertigen konnte.

Die andere Domain wird diese also in das Head-Tag aufnehmen

<script src="scripts/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.postmessage.min.js" type="text/javascript"></script>
<script src="scripts/club.js" type="text/javascript"></script>

In der club.js sind nur einige benutzerdefinierte Anrufe, die ich für Größenänderungsanrufe getätigt habe und enthält ..

 $(document).ready(function () {   
    var parent_url = decodeURIComponent( document.location.hash.replace( /^#/, '' ) ),link;
//Add source url hash to each url to authorise callback when navigating inside the frame.Without this clicking any links will break the communication and no messages will be received
$('a[href]').each(function(){ 
     this.href = this.href + document.location.hash ;
});
//Get the dimensions and send back to calling page.
var h1 = document.body.scrollHeight;
var w1 = document.body.scrollWidth;
$.postMessage({ if_height: h1, if_width: w1 }, parent_url, parent );
  });

Und Ihre Seite wird die ganze harte Arbeit erledigen und hat ein schönes Skript ...

  //This is almost like request.querystring used to get the iframe data
  function querySt(param, e) {
         gy = e.split("&");
         for (i = 0; i < gy.length; i++) {
             ft = gy[i].split("=");
             if (ft[0] == param) {
                 return ft[1];
             }
         }
     }


     $(function () {
         // Keep track of the iframe dimensions.
         var if_height;
         var if_width;
         // Pass the parent page URL into the Iframe in a meaningful way (this URL could be
         // passed via query string or hard coded into the child page, it depends on your needs).
         src = 'http://www.OTHERDOAMIN.co.uk/OTHERSTARTPAGE.htm' + '#' + encodeURIComponent(document.location.href),
         // Append the Iframe into the DOM.
         iframe = $('<iframe " src="' + src + '" width="100%" height="100%" scrolling="no" frameborder="0"><\/iframe>').appendTo('#iframe');

         // Setup a callback to handle the dispatched MessageEvent event. In cases where
         // window.postMessage is supported, the passed event will have .data, .origin and
         // .source properties. Otherwise, this will only have the .data property.
         $.receiveMessage(function (e) {
             // Get the height from the passsed data.
             //var h = Number(e.data.replace(/.*if_height=(\d+)(?:&|$)/, '$1'));
             var h = querySt("if_height", e.data);
             var w = querySt("if_width", e.data);


             if (!isNaN(h) && h > 0 && h !== if_height) {
                 // Height has changed, update the iframe.
                 iframe.height(if_height = h);
             }
             if (!isNaN(w) && w > 0 && w !== if_width) {
                 // Height has changed, update the iframe.
                 iframe.width(if_width = w);
             }
             //For debugging only really- can remove the next line if you want
             $('body').prepend("Recieved" + h + "hX" + w + "w .. ");
             // An optional origin URL (Ignored where window.postMessage is unsupported).
           //Here you must put the other domain.com name only! This is like an authentication to prevent spoofing and xss attacks! 
         }, 'http://www.OTHERDOMAIN.co.uk');
     });

OPTION 3

Es handelt sich jetzt um eine kleine JS-Bibliothek zum Verwalten der Größenänderung domänenübergreifender iFrames. Der iFrame muss weiterhin über etwas JavaScript verfügen. Dies sind jedoch nur 2,8 KB (765 Byte Gzipped) nativer JS, die keine Abhängigkeiten aufweisen und es macht nichts, bis es von der übergeordneten Seite aufgerufen wird. Dies bedeutet, dass es ein netter Gast auf anderen Personensystemen ist.

Dieser Code verwendet mutationsObserver, um DOM-Änderungen zu erkennen, und sucht auch nach Größenänderungsereignissen, damit der iFrame an den Inhalt angepasst bleibt. Funktioniert in IE8 +.

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

ppumkin
quelle
4
Das easyXDM-Beispiel hat tatsächlich viel weniger Code, ist nicht auf externe Bibliotheken angewiesen und funktioniert auch in älteren Browsern :) Und ja, ich bin voreingenommen, da ich der Autor bin, aber immer noch ..
Sean Kinsey
Ich habe easyXDM ausprobiert, aber ich konnte kein internes Frame-Browsing zu anderen Links zum Laufen bringen. Ich habe nach Beispielen gesucht. Es gab Links, die kaputt waren und die Beispielseite war nicht zu löschen. Es hat funktioniert! und war meine ursprüngliche Antwort .. aber ich habe dies verwendet. Können Sie bitte einen Weg für das interne Surfen posten? Ich habe geschaut und geschaut.
Piotr Kula
@ppumkin Das mit dem Download gelieferte Beispiel unterstützt das interne Surfen vollständig. Die unterbrochene Verbindung ist wahrscheinlich auf ein Experiment zurückzuführen, das ich durchgeführt habe, aber der Server wurde irgendwann gelöscht.
Sean Kinsey
1
Yea schaute sich das an - und schaute und schaute: D Aus irgendeinem Grund konnte ich es mit meiner Site nicht zum Laufen bringen. Ich werde es nochmal versuchen.
Piotr Kula
1
Es funktioniert - aber wenn ich auf einen Link in dieser Domain klicke, wird die Seite mit Ihrer Bibliothek neu geladen - aber ich kann keine Nachricht erhalten. Wie kann ich dafür sorgen, dass Anfragen akzeptiert werden, unabhängig davon, woher sie kommen? Und wofür ist diese easyxdm.swf? :)
Piotr Kula

Antworten:

10

Die Sache ist - es gibt keinen anderen Weg als die Verwendung von domänenübergreifendem Messaging, da Sie die berechnete Höhe von einem Dokument in einer Domäne zu einem Dokument in einer anderen Domäne abrufen müssen.

Entweder tun Sie dies mit postMessage(funktioniert in allen moderaten Browsern) oder Sie verbringen 5 Minuten damit, das Beispiel für die Größenänderung des Iframes von easyXDM anzupassen.

Die andere Partei muss wirklich nur ein paar Dateien in ihre Domain kopieren und ihrem Dokument eine einzige Codezeile hinzufügen.

Sean Kinsey
quelle
Im Gegenteil mein Freund. Ich habe eine Möglichkeit gefunden, die Größe des Iframes von einer doppelübergreifenden Seite auf die Größe des Iframes-Dokuments und ohne Bildlaufleisten zu ändern. Es ist ein bisschen hackig, wird aber später veröffentlicht. Es ist einfach so einfach, es ist unglaublich.
Piotr Kula
ja ... ich habe das sendmessage jquwery plugin verwendet, obwohl ich ein anderes hack-falsch-positives gefunden habe ..;) danke für den guten tipp!
Piotr Kula
Nun, manchmal ist es das Beste, deinen Kollegen zuzuhören - die Wahrscheinlichkeit, dass du einen magischen Hack
Sean Kinsey
Stellen Sie sich vor, ich wäre fantastisch. Aber ja, schlank: D Danke
Piotr Kula
Richtig - wenn nichts anderes, haben Sie zumindest versucht, experimentiert und vielleicht auch etwas Neues gelernt :)
Sean Kinsey
24

Ähnlich wie Sean es erwähnt hat, können Sie postMessage verwenden. Ich habe so viel Zeit damit verbracht, verschiedene Methoden auszuprobieren, um die Größe des Iframes domänenübergreifend zu ändern, aber kein Glück, bis ich auf diesen großartigen Blog-Beitrag von David Walsh gestoßen bin: http://davidwalsh.name/window-iframe

Dies ist eine Kombination aus meinem Code und Davids Lösung. Meine Lösung ist speziell auf die Größenänderung von Iframes ausgerichtet.

Suchen Sie auf der untergeordneten Seite die Höhe der Seite und übergeben Sie sie an die übergeordnete Seite (die den Iframe enthält). Ersetzen Sie element_id durch Ihre Element-ID (HTML, Body, was auch immer).

<script>
function adjust_iframe_height(){
    var actual_height = document.getElementById('element_id).scrollHeight;
    parent.postMessage(actual_height,"*"); 
    //* allows this to post to any parent iframe regardless of domain
}
</script>

<body onload="adjust_iframe_height();"> 
//call the function above after the content of the child loads

Fügen Sie im übergeordneten Fenster diesen Code hinzu. Ersetzen Sie iframe_id durch Ihre iframe-ID:

<script>
// Create IE + others compatible event handler
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child window
eventer(messageEvent,function(e) {
  console.log('parent received message!:  ',e.data);
  document.getElementById('iframe_id').height = e.data + 'px';
},false);
</script>

Wenn Sie die Konsole öffnen, wird die Höhe im Konsolenprotokoll angezeigt. Dies wird Ihnen beim Debuggen helfen, weshalb ich es dort gelassen habe.

Am besten, Baker

Bäcker Humadi
quelle
Das funktioniert super, aber im IE nicht ganz so gut. Ich musste 2 Variablen senden, aber der IE akzeptiert keine "Daten", wenn es sich um ein Array oder Objekt handelt. Ich habe jedoch einfach Daten als data = var1 + "|" erstellt. var2. Auf dem übergeordneten Element teilen Sie einfach die Zeichenfolge auf | und hol deine 2 vars zurück.
Dbonneville
6

Nachdem ich viele verschiedene Lösungen dafür gesucht hatte, schrieb ich eine einfache kleine Bibliothek, um eine Reihe verschiedener Anwendungsfälle zu berücksichtigen. Da ich eine Lösung benötigte, die mehrere benutzergenerierte iFrames auf einer Portalseite unterstützte, änderte der unterstützte Browser die Größe und konnte das Laden von JavaScript auf der Hostseite nach dem iFrame bewältigen. Ich füge auch Unterstützung für die Größenanpassung auf Breite und eine Rückruffunktion hinzu und erlaube das Überschreiben der body.margin, da Sie diese wahrscheinlich auf Null setzen möchten.

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

Der Iframe-Code ist nur ein kleines, in sich geschlossenes JavaScript, sodass er auf anderen Personenseiten ein guter Gast ist.

Das Skript wird dann auf der Hostseite mit den folgenden verfügbaren Optionen initialisiert.

iFrameResize({
    log                    : true,  // For development
    autoResize             : true,  // Trigering resize on events in iFrame
    contentWindowBodyMargin: 8,     // Set the default browser body margin style (in px)
    doHeight               : true,  // Calculates dynamic height
    doWidth                : false, // Calculates dynamic width
    enablePublicMethods    : true,  // Enable methods within iframe hosted page 
    interval               : 32,    // interval in ms to recalculate body height, 0 to disable refreshing
    scrolling              : false, // Enable the scrollbars in the iFrame
    callback               : function(messageData){ // Callback fn when message is received
        $('p#callback').html(
            '<b>Frame ID:</b> '    + messageData.iframe.id +
            ' <b>Height:</b> '     + messageData.height +
            ' <b>Width:</b> '      + messageData.width + 
            ' <b>Event type:</b> ' + messageData.type
        );
    }
});
David Bradshaw
quelle
Gut gemacht Kumpel. Auf jeden Fall etwas, das von vielen Menschen benutzt wird! +1
Piotr Kula
1
Was mache ich, wenn ich keinen Zugriff auf die Remotedomäne habe? Vielen Dank
Bala Peterson
@BalaPeterson: Wenn Sie nicht auf die Remotedomäne zugreifen können, können Sie dies aufgrund der Sicherheitsbeschränkungen im Browser nicht tun.
David Bradshaw
0

Anstatt scroll = no für den Iframe zu verwenden, ändere ich ihn auf "auto". Dann bekomme ich die Größe des tatsächlichen Fensters

$(window).height();

und verwenden Sie dies als iframe height-Attribut.

Nun, das Ergebnis ist ...

Wir werden niemals die Schriftrolle "Seite" haben, sondern nur die Schriftrolle "Iframe". Wenn Sie navigieren, spielt es keine Rolle, wer die Schriftrolle ist, aber wichtig ist, dass es nur 1 gibt.

Nun, es gibt das Problem, dass der Benutzer einfach die Größe des Fensters ändert, während er navigiert. Um das zu lösen, benutze ich:

setInterval(getDocHeight, 1);

Haben Sie gedacht, dass diese Lösung Fehler verursachen wird? Es funktioniert für mich und auf dem iFrame hatte ich einen dynamischen Kontakt, der von PHP generiert wurde. Ich habe Angst vor zukünftigen Fehlern damit ...

Elton Morais
quelle
2
Natürlich hat die Schriftrolle "iframe" immer die gleiche Größe der Seite. Während der Navigation sehen Sie es einfach so, als wäre es die "Seiten" -Rolle.
Elton Morais
0

Heutzutage gibt es nur 4 Lösungen, die ich kenne:

Nur der dritte kann viele Probleme lösen. Zum Beispiel können Sie ansprechende iFrame erstellen ; Schließen Sie es von innen oder Sie können mit ihm kommunizieren . Dazu benötigen Sie jedoch iFrame in Iframe und die Problemumgehung "Cookies von Drittanbietern" (optional).

Ich habe einen Artikel darüber mit Beispiel erstellt: Ereignisgesteuerter domänenübergreifender iFrame

Kanstantsin Kamkou
quelle
0

Haben Sie sich die HTML5-Attribute "Objektanpassung" angesehen? Skaliert Videos / Bilder auf den Iframe, anstatt den Iframe zu skalieren (schön, wenn Sie ein mittelgroßes Bild mit einer Breite von 5.000 Pixel aufnehmen). Die Option "Anpassen" (andere sind "Cover" und "Füllen") verwendet einen Briefkasten-Ansatz, um die Quelle unter Beibehaltung der Seitenverhältnisse anzupassen. Für die Anzeige mit HTML5-weniger da draußen sieht es so aus, als ob eine ganze Menge Polyfills verfügbar sind. Dieser ist großartig, aber ein Fehler am Ende von Edge hat ihn seit etwa einem Jahr mit Microsoft New Nightmare inkompatibel gemacht: https://github.com/anselmh/object-fit

BEARBEITEN: Um domänenübergreifende Probleme zu umgehen, können Sie die Arbeit immer nur in einem Chrome Extension Content Script ausführen, da es denkt, dass es Teil der Seite ist, auf die Sie Ihren Iframe kleben.

Sparkholiday
quelle
0

HTTPS Ein anderer Link erhält die Höhe zur Autohöhe des Iframes

https://-a.com Inhalt:

 <!DOCTYPE html>
    <html>
    <head>
        <title>Test Page</title>
    </head>
    <body>
        Test Page:
        <hr/>
        <iframe id="iframe" src="https://-b.com" style="width:100%;min-height:600px;border:none;" scrolling="no" ></iframe>
        <script>
        // browser compatibility: get method for event 
        // addEventListener(FF, Webkit, Opera, IE9+) and attachEvent(IE5-8)
        var myEventMethod = 
            window.addEventListener ? "addEventListener" : "attachEvent";
        // create event listener
        var myEventListener = window[myEventMethod];
        // browser compatibility: attach event uses onmessage
        var myEventMessage = 
            myEventMethod == "attachEvent" ? "onmessage" : "message";
        // register callback function on incoming message
        myEventListener(myEventMessage, function (e) {
            // we will get a string (better browser support) and validate
            // if it is an int - set the height of the iframe #my-iframe-id
            if (e.data === parseInt(e.data)) 
                document.getElementById('iframe').height = e.data + "px";
        }, false);
        </script>
    </body>
    </html>

https://-b.com iframe-Inhalt:

<!DOCTYPE html>
<html>
<head>
    <title>Test Iframe Content</title>
    <script type="text/javascript">
    // all content including images has been loaded
    window.onload = function() {
        // post our message to the parent
        window.parent.postMessage(
            // get height of the content
            document.body.scrollHeight
            // set target domain
            ,"*"
        )
    };
</script>
</head>
<body>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>1
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>2
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>3
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>4
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>5
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>6
</body>
</html>

Arbeitstisch:

xcom http> ycom https ARBEITEN

xcom https> ycom https ARBEITEN

xcom http> ycom http ARBEITEN

xcom https> ycom http ARBEITEN

Screenshot der Testarbeit

Grenzenlose isa
quelle
-2

Suchen Sie nach der Höhe der Seite, die im iframe enthalten ist? Ich habe Javascript zum Laufen gebracht, das die Höhe des Iframe-Inhalts überprüft und dann die Höhe des Iframes auf die Höhe des Inhalts setzt.

var Height = document.getElementById('iFrameId').contentWindow.document.body.scrollHeight;

document.getElementById('iFrameId').height = Height;

Dies funktioniert jedoch nur, wenn sich die Seite, die Sie im Iframe anzeigen, in derselben Domäne befindet. Ist dies nicht der Fall, können Sie nicht auf die erforderlichen Informationen zugreifen. Daher verweigerte der Zugriff den Fehler.

Anothershrubery
quelle
Ja, das habe ich schon versucht. Es funktioniert großartig .. auf derselben Domain wie Sie gesagt haben .. Sagen Sie mir - woher weiß ein Browser, wie viel 100% ist, wenn er die Höhe anfänglich berechnet? Warum können wir nicht auch auf diese Werte zugreifen? Chrome speichert dies in berechneten Stilen für jede einzelne Seite in der iframe sogar x-Domain ...
Piotr Kula
Die Höhe wird abhängig vom Inhalt und den Attributen berechnet. Die Höhe eines Elements ist ungewiss, bis die Kinder gerendert sind.
MarioRicalde
Wie kann ich dann die gerenderten Werte erhalten? wie die Inspektion in Chrom?
Piotr Kula
-1 da dies nicht domänenübergreifend funktioniert, worum er gebeten hat.
Sean Kinsey
Sie können die Werte nicht erhalten. Der Inspektor kann, weil er über Berechtigungen auf der Ebene "Browsererweiterung" und nicht über Berechtigungen auf der Ebene "Webseite mit einem anderen Ursprung" verfügt.
Quentin
-2

Um die Größe eines Iframes zu ändern, ist hier ein einfaches Skript:

Das geht in den Kopf: (Dies wurde für ein PHP-Skript geschrieben, für HTML ändern Sie das 'in "und das \" in' ...

<script type='text/javascript'>
<!--
function resizeIframe(id){
/*
this.obj=obj
//this.obj.width=null
//this.obj.width=window.frames[\"sizeframe1\"].document.body.scrollWidth
this.obj.style.height=\"\" // for Firefox and Opera
setTimeout(\"this.obj.style.height=this.obj.contentWindow.document.body.scrollHeight+(notIE?heightOffset:0)\",10) // setTimeout required for Opera
*/

el=document.getElementById(id)
el.style.height='200px' // for Firefox and Opera
setTimeout('el.style.height=el.contentWindow.document.body.scrollHeight+\"px\"',1) // setTimeout required for Opera
}

// -->
</script>"

Kopfende

Dies geht in den Körper (denken Sie daran, dies wurde für ein PHP-Skript geschrieben, für HTML ändern Sie alle 'zu "und die \" zu' ...)

<iframe onload='resizeIframe(this.id)' allowTransparency=\"true\" name='ccpaymentwindow' id='sizeframe1' marginwidth='1' marginheight='1' height='700' width='690' border='0' frameborder='1' scrolling='no' src='ccmslink.php?variable1=" . $variable1 . "'></iframe>

Bonus: Es gibt einige Hinweise oben. Da es für PHP-Scripting eingestellt ist, können Sie viel damit anfangen ... um mehr zu lernen, mehr zu tun ...

Der Schlüssel dazu ist "sizeframe1". Kopieren Sie für mehrere "Resizer" auf derselben Seite dasselbe Skript, ändern Sie jedoch die ID in iframe und den Namen im Skript im Kopf und die Bratsche! Sie haben mehrere Resizer auf derselben Seite ... es funktioniert sehr gut!

habe phun.

user2961151
quelle
Ich glaube nicht, dass Sie sich mit der eigentlichen Frage befassen.
Andrew Barber
Ja, dies ist reines Javascript, um die Größe eines Iframes in derselben Domain zu ändern. Es ist viel einfacher, jQuery zu verwenden. Dies wird nicht standortübergreifend funktionieren und es gibt hier nichts Besonderes, das dies zulässt. Und es gibt kein PHP-Scripting?!
Piotr Kula