Web Messaging – HTML5 – What?

View Github Repository Open presentation in a new window

LukasBrin

See all presentation from LukasBrin

Web Messaging – HTML5 – What?

0 0

HTML5-WebMessaging

Presentation of Web Messaging in HTML

On Github LukasBrin / HTML5-WebMessaging

Web Messaging

HTML5

Created by Lukas Brinkmann

What?

Kommunikation zwischen Browserkontexten

  • Datenaustausch
  • verschiedene Quellen

Mechanismen

  • Cross-Document Messaging
  • Channel Messaging

Why?

  • Cross-Site-Scripting ➞ Same-origin Policy
  • Problem: verhindert friedliche Kommunikation ➞ Messaging-System benötigt

How?

Das Message-Event

von allen Mechanismen verwendet

Attribut Inhalt data Strings, Arrays, Objekte, ... origin Quelle des Dokuments ports Array mit Message-Ports

Cross-Document Messaging

⇒ zwei Browserkontexte mit unterschiedlicher Domäne

Senden
otherWindow.postMessage(message, targetOrigin, [transfer]);
Empfangen
window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
  if (event.origin !== "http://example.org:8080")
    return;

  // ...
}

Channel Messaging

⇒ direkte Kommunikation über mehrere Quellen

Einrichten der Verbindung

1.)Empfänger
  • Message-Channel erstellen
  • erzeugten Port an Parent senden
  • eigenen Port öffnen und Event-Handler hinzufügen
2.)Parent
  • Port weiterreichen
3.)Sender
  • Port entgegennehmen

Hier gehts zum Coding.

Senden

port.postMessage(msg);

Demo

Deine Nachricht: Alternativtext

THE END

Fragen?

Web Messaging HTML5 Created by Lukas Brinkmann