Heim >Web-Frontend >CSS-Tutorial >Wie kann ich mit postMessage die Größe eines Iframes aus einer anderen Domäne ändern?
Wie kann ich mit postMessage die Größe eines Iframes aus einer anderen Domäne ändern?
- Mary-Kate OlsenOriginal
- 2024-12-05 18:39:10223Durchsuche
Ändern der Größe eines Iframes aus einer anderen Domäne mit postMessage
Versuche, die Größe eines Iframes aus einer anderen Domäne zu ändern, können eine herausfordernde Aufgabe sein. Während die Verwendung von easyXDM als effektiver Fallback für nicht HTML5-kompatible Seiten dient, gibt es alternative Lösungen, die eine Überlegung wert sind.
Eine solche Lösung ist die Verwendung von postMessage. Bei dieser Methode wird die Höhe der untergeordneten Seite an die übergeordnete Seite übergeben, die dann die Höhe des Iframes entsprechend anpasst.
Implementierungsdetails
Untergeordnete Seite
- Berechnen Sie die Höhe der untergeordneten Seite mit document.getElementById('element_id).scrollHeight.
- Posten Sie die Höhe mit parent.postMessage(actual_height,"*"); auf der übergeordneten Seite. Das Sternchen ermöglicht das Posten in jedem übergeordneten Iframe unabhängig von der Domain.
<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
</body>
Übergeordnete Seite
- Fügen Sie einen Ereignis-Listener zum übergeordneten Fenster hinzu, um Empfangen Sie die Nachricht von der untergeordneten Seite. Ersetzen Sie iframe_id durch Ihre Iframe-ID.
- Aktualisieren Sie die Höhe des Iframes basierend auf der empfangenen Höhe.
<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>
Vorteile der Verwendung von postMessage
- Domänenübergreifende Kommunikation: postMessage ermöglicht die Kommunikation zwischen verschiedenen Domänen und eignet sich daher für Ändern der Größe von Iframes aus einem anderen Ursprung.
- Höhenberechnung: Die untergeordnete Seite berechnet ihre Höhe genau und überträgt sie an die übergeordnete Seite, um die korrekte Größenänderung von Iframes sicherzustellen.
- Einfachheit: Die Implementierung ist unkompliziert und erfordert nur minimale Codeänderungen.
Das obige ist der detaillierte Inhalt vonWie kann ich mit postMessage die Größe eines Iframes aus einer anderen Domäne ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!