HTML - Web Messaging

Hallo, zukünftige Web-Entwickler! Heute tauchen wir in ein aufregendes Thema ein, das darum geht, verschiedene Teile Ihrer Webanwendungen miteinander kommunizieren zu lassen. Es ist, als ob Sie您的Webseiten lehren, ein Gespräch zu führen! Lassen Sie uns gemeinsam die Welt der Web Messaging erkunden.

Einführung in Web Messaging

Bevor wir uns in den Code stürzen, lassen Sie uns verstehen, worum es bei Web Messaging geht. Stellen Sie sich vor, Sie haben zwei Webseiten in verschiedenen Tabs Ihres Browsers geöffnet. Normalerweise können diese Seiten nicht direkt miteinander kommunizieren. Aber was wäre, wenn Sie sie信息的共享？Dann kommt Web Messaging ins Spiel!

Web Messaging ermöglicht es verschiedenen Teilen einer Webanwendung, sich gegenseitig Nachrichten zu senden, selbst wenn sie aus verschiedenen Ursprungsorten (wie unterschiedlichen Domains) stammen. Es ist, als ob Sie您的Webseiten ihre eigene spezielle Telefonleitung zum Chatten geben!

Das Message-Event

Im Herzen des Web Messaging steht das message-Event. Dieses Event wird ausgelöst, wenn eine Nachricht empfangen wird. Lassen Sie uns das Schritt für Schritt auseinandernehmen.

Grundstruktur

Hier ist ein einfaches Beispiel, wie man auf eine Nachricht hört:

<script>
window.addEventListener("message", function(event) {
console.log("Nachricht von " + event.origin + " empfangen");
console.log("Nachrichteninhalt: " + event.data);
});
</script>

Lassen Sie uns dies entschlüsseln:

Wir verwenden window.addEventListener, um auf das "message"-Event zu hören.
Wenn eine Nachricht eintrifft, wird unsere Funktion aufgerufen.
Die Funktion empfängt ein event-Objekt, das Informationen über die Nachricht enthält.
Wir protokollieren die Quelle der Nachricht und deren Inhalt.

Eine Nachricht senden

Nun sehen wir, wie man eine Nachricht sendet:

<script>
// Angenommen, wir möchten eine Nachricht an ein iframe mit der ID 'myFrame' senden
var iframe = document.getElementById('myFrame');
iframe.contentWindow.postMessage("Hallo von der übergeordneten Seite!", "*");
</script>

In diesem Beispiel:

Wir erhalten einen Verweis auf ein iframe auf unserer Seite.
Wir verwenden postMessage, um eine Nachricht an dieses iframe zu senden.
Das erste Argument ist der Nachrichteninhalt.
Das zweite Argument "*" bedeutet, dass wir die Nachricht an jeden Ursprungsort senden dürfen. In realen Anwendungen möchten Sie den genauen Ursprungsort aus Sicherheitsgründen angeben.

Sicherheitsüberlegungen

Denken Sie immer daran, die Quelle der eingehenden Nachrichten zu überprüfen! Hier ist eine sicherere Version unseres Nachrichtenlisteners:

<script>
window.addEventListener("message", function(event) {
// Überprüfen, ob die Nachricht von einer vertrauenswürdigen Quelle stammt
if (event.origin !== "https://vertrauenswuerdige-seite.com") return;

console.log("Vertrauenswürdige Nachricht empfangen: " + event.data);
});
</script>

Diese zusätzliche Überprüfung stellt sicher, dass wir nur Nachrichten von Quellen, die wir vertrauen, verarbeiten.

Praktische Beispiele

Schauen wir uns einige realistische Szenarien an, in denen Web Messaging seine Stärken zeigt!

Beispiel 1: Kommunikation zwischen einer Seite und einem iframe

Stellen Sie sich vor, Sie haben eine Hauptseite, die ein Spiel in einem iframe lädt. Sie möchten, dass die Hauptseite das Spiel startet, wenn ein Knopf gedrückt wird.

Hauptseite (parent.html):

<!DOCTYPE html>
<html>
<body>
<button onclick="startGame()">Spiel starten</button>
<iframe id="gameFrame" src="game.html"></iframe>

<script>
function startGame() {
var gameFrame = document.getElementById('gameFrame');
gameFrame.contentWindow.postMessage("start", "*");
}

window.addEventListener("message", function(event) {
if (event.data === "gameOver") {
alert("Spiel beendet! Ihre Punktzahl wurde gespeichert.");
}
});
</script>
</body>
</html>

Spielseite (game.html):

<!DOCTYPE html>
<html>
<body>
<h1>Awesome Game</h1>
<div id="gameArea">Spiel beginnt gleich...</div>

<script>
window.addEventListener("message", function(event) {
if (event.data === "start") {
document.getElementById('gameArea').innerHTML = "Spiel läuft!";
// Simuliere Spielende nach 5 Sekunden
setTimeout(function() {
window.parent.postMessage("gameOver", "*");
}, 5000);
}
});
</script>
</body>
</html>

In diesem Beispiel:

Die Hauptseite hat einen Knopf zum Starten des Spiels.
Wenn dieser gedrückt wird, sendet sie eine "start"-Nachricht an das iframe.
Die Spielseite hört auf diese Nachricht und startet das Spiel.
Wenn das Spiel beendet ist, sendet sie eine "gameOver"-Nachricht zurück an die Elternseite.
Die Elternseite zeigt eine Warnung an, wenn sie die "gameOver"-Nachricht empfängt.

Beispiel 2: Kommunikation zwischen Fenstern

Angenommen, Sie haben einen Warenkorb auf einer Seite und Produktdetails auf einer anderen. Sie möchten Artikel aus der Produktseite in den Warenkorb hinzufügen.

Produktseite (product.html):

<!DOCTYPE html>
<html>
<body>
<h1>Phänomenales Produkt</h1>
<button onclick="addToCart()">In den Warenkorb</button>

<script>
function addToCart() {
window.opener.postMessage({
action: "addToCart",
product: "Phänomenales Produkt",
price: 19.99
}, "https://shop.example.com");
}
</script>
</body>
</html>

Warenkorbseite (cart.html):

<!DOCTYPE html>
<html>
<body>
<h1>Ihr Warenkorb</h1>
<ul id="cartItems"></ul>

<script>
window.addEventListener("message", function(event) {
if (event.origin !== "https://shop.example.com") return;

if (event.data.action === "addToCart") {
var cartList = document.getElementById('cartItems');
var newItem = document.createElement('li');
newItem.textContent = event.data.product + " - $" + event.data.price;
cartList.appendChild(newItem);
}
});
</script>
</body>
</html>

In diesem Szenario:

Die Produktseite hat einen "In den Warenkorb"-Knopf.
Wenn dieser gedrückt wird, sendet sie eine Nachricht an die Warenkorbseite (angenommen, es ist das Öffner-Fenster).
Die Warenkorbseite hört auf Nachrichten und fügt das Produkt zur Liste hinzu, wenn eine empfangen wird.

Fazit

Web Messaging eröffnet eine Welt der Möglichkeiten für die Erstellung interaktiver und dynamischer Webanwendungen. Es ermöglicht verschiedenen Teilen Ihres Webökosystems, nahtlos miteinander zu kommunizieren, was das Benutzererlebnis und die Funktionalität verbessert.

Denken Sie daran, mit großer Macht kommt große Verantwortung! Validieren Sie immer die Quelle der Nachrichten und akzeptieren Sie nur solche von vertrauenswürdigen Quellen. Viel Spaß beim Coden und mögen Ihre Webseiten stets fesselnde Gespräche führen!

Methode	Beschreibung
`window.postMessage(message, targetOrigin)`	Sendet eine Nachricht an ein anderes Fenster
`window.addEventListener("message", function(event) { ... })`	Hört auf eingehende Nachrichten
`event.data`	Enthält die mit der Nachricht gesendeten Daten
`event.origin`	Gibt den Ursprungsort des Senders an
`event.source`	Bietet einen Verweis auf das Fenster des Senders

Diese Tabelle zusammenfasst die wichtigsten Methoden und Eigenschaften, die wir in unserer Web Messaging-Reise besprochen haben. Halten Sie es bereit, während Sie mit Ihren eigenen Messaging-Implementierungen experimentieren!

Credits: Image by storyset