JavaScript - Dynamisch Größenänderung iframe cross-domain mit URL-fragment

Habe ich gefunden,Technik, die Dokumente der cross-domain-Kommunikation mit iframes, und ich beschloss, dass ich versuchen würde, dies zu nutzen, zu erreichen erhabene Ziel, immer ein iframe Größe automatisch, wenn sich der Inhalt ändert.

Grundsätzlich, hier mein plan (ich weiß, es ist ein bisschen hacky).

  • Ich habe die Kontrolle über sowohl die übergeordnete Seite und der untergeordneten Seite, aber Sie sind geladen werden sollen, auf unterschiedlichen domains (und in der Tat, man wird von http und das andere https).

  • Innerhalb des iframe, ich habe eine Funktion, die ausgeführt werden, wenn das Dokument geladen wird, und dann in regelmäßigen Abständen, um das Dokument in der Höhe, und festgelegt, dass als Wert des URL-fragment (dh so etwas wie https://blahblah.com/#h-768)

  • In das übergeordnete Fenster, ich habe eine Funktion, der Sie in regelmäßigen Abständen überprüfen Sie die URL des iframe greifen Sie den hash-tag", analysiert die Höhe, und ändern Sie den iframe-Höhe entsprechend.

Der große Haken ist: der iframe nicht über eine ID oder ein name zugeordnet, und kann ich wohl nicht ändern.

In der Realität, der iframe ist zunächst zu auf der gleichen domain. Es werde Dokuments verwenden.schreiben Sie zum erstellen der iframe-polling-Funktion in das übergeordnete Fenster (weil ich eigentlich gelogen, vorhin, als ich sagte, ich hatte die Kontrolle über die übergeordnete Seite), und dann wird Sie navigieren Sie zu der Seite, die ich bin wirklich interessiert.

So, die eigentliche Frage ist, wie kann ein iframe geben, sich selbst einen Namen oder eine ID?

Ich habe versucht, Dinge wie diese (mit jQuery):

$(document).ready(function() {
        //Try changing the name            
        $(self).attr("name", "myframe");
        $(self).attr("id", "myframe");      
});

Problem ist, es scheint nicht zu funktionieren.

Irgendwelche Gedanken?

KLÄRUNG

Der übergeordneten Seite wird so etwas wie http://mysite.com, und das iframe wird zunächst werden http://mysite.com/iframe.

Dass die ersten iframe-Seite ist nur eine dummy-Seite, dass:

  • Gibt dem <iframe> - element auf der parent-Seite eine ID
  • Erstellt eine neue <script> - element auf der parent-Seite, die die Größe polling, und dann
  • Hat window.location = "http://my-real-app-location.com"

Die neue Seite wird sich aktualisieren der URL-fragment mit der aktuellen Höhe, so dass die URL des iframe-so etwas wie http://my-real-app-location.com/#h-800 (was bedeutet, dass das Dokument 800 Pixel hoch).

Dem Skript, dass die dummy-Seite erstellt, auf der übergeordneten Seite braucht, um zu greifen, das URL-fragment und ändern Sie den iframe-Höhe entsprechend.

  • gehst du laufen, das JS auf das übergeordnete Fenster? Oder innerhalb der tatsächlichen iframe?
  • Das JavaScript wird ausgeführt, der im Rahmen der übergeordneten Seite, richtig?
  • Gut, das Ziel zu laufen, dass snippets von JavaScript in iframe, so dass auf der übergeordneten Seite kann ich dynamisch eine Funktion erstellen (mit Elternteil.Dokument.schreiben oder etwas wie das), die sich auf Fenster.frames["myframe"]
InformationsquelleAutor Ryan | 2011-04-18
  1. 0

    Gut, die übergeordnete Seite, wird letztlich die Kontrolle die URL des iframe. Der iframe kann nicht aktualisieren, irgendetwas, aber seine URL.

    Dass gesagt wird, ich bin mir nicht sicher, ich verstehe das problem. Warum kannst du nicht gib dem iframe eine ID, wenn Sie es schaffen?

    • Ich aktualisierte die Frage mit einer Klarstellung; ich denke, dass werde Ihre Frage zu beantworten.
    InformationsquelleAutor wesbos
  2. 0

    Einen iframe-Fenster/Dokument können keine Attribute setzen auf eigenen container-tag, denn der tag ist im Besitz des übergeordneten Dokuments. Der tag an sich hat nichts zu tun mit dem Fenster und das Dokument geladen drin.

    Wenn Sie eine id - Attribut, die Sie haben, um es aus dem Eltern-Dokument, und es gibt keine Möglichkeit um ihn herum.

    InformationsquelleAutor Martin Jespersen
  3. 0

    Gut, der folgende code ist der code, den ich ursprünglich gesucht haben. Diese geben dem <iframe> - element ein ID-Attribut, und dieser code läuft im Rahmen des iframe. Natürlich, es funktioniert nur, wenn der iframe auf der gleichen Domäne wie die übergeordnete Seite (die, in meinem Fall, es ist zunächst).

    var foundMyself = false;
$("iframe", parent.document).each(function() {
    if (this.contentWindow == self) {
        $(this).attr("id", "myframe");  
            foundMyself = true; 
    }
});

    Folgenden ist der code, den ich verwende, um den entsprechenden script-tag auf der übergeordneten Seite (beachten Sie, dass meine Anwendung setzt ein fragment #h-xxxxx bezeichnet man die Höhe der Seite):

    if (foundMyself) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.text = "function resizeApp() { var app = document.getElementById(\"myframe\"); var hash = app.contentWindow.location.hash; app.style.height = hash.substring(3); } setInterval('resizeApp();', 500);";

    parent.document.body.appendChild(script);
}

window.location = "https://my-app-real-location.com"

    Neues problem ich bin jetzt in ist, dass, sobald das iframe hat navigiert Weg, ich bin keine Zugriffsrechte auf die contentWindow Eigenschaft.

    InformationsquelleAutor Ryan
  4. 0

    Einen schönen cross-domain-Lösung, wenn Sie suchen, ist von hier aus ein ganzes Forschung post

    Noch ein Weiteres cross-domain-iframe-Größe Q&A

    InformationsquelleAutor Piotr Kula
Schreibe einen Kommentar