Meta tags:
description=Fensterübergreifende Kommunikation in JavaScript: postMessage, Same-Origin-Policy, Fensterreferenzen, localStorage-Events und die Broadcast Channel API mit…;

Headings (most frequently used words):

kommunikation, fensterübergreifende, die, verwenden, storage, javascript, verstehen, methoden, der, fensterübergreifenden, richtige, methode, wählen, best, practices, fazit, übungen, same, origin, policy, wann, wird, es, benötigt, window, postmessage, auf, fensterreferenzen, zugreifen, local, und, session, broadcast, channel, api,

Text of the page (most frequently used words):
und (82), die (55), window (40), #origin (37), event (34), html (33), der (28), api (27), postmessage (25), iframe (24), dom (24), ein (23), document (23), kommunikation (21), auf (21), javascript (20), ist (20), fenster (20), div (20), das (19), data (18), body (17), popup (16), head (16), title (16), für (15), lernen (15), fensterübergreifende (15), wird (15), storage (15), message (15), mit (15), button (15), getelementbyid (15), methoden (13), den (12), channel (12), tabs (12), script (12), parent (12), eine (11), von (11), broadcast (10), nur (9), zwischen (9), nicht (9), einem (9), addeventlistener (9), open (9), über (8), json (8), web (8), kann (8), werden (8), iframes (8), nachricht (8), hello (8), childwindow (8), oder (8), const (8), events (8), anderen (8), from (8), innertext (8), example (8), utf (8), charset (8), meta (8), lang (8), doctype (8), the (8), methode (7), popups (7), wenn (7), kopieren (7), child (7), einen (7), tab (7), sie (7), localstorage (7), w3docs (6), alle (6), tools (6), können (6), fensterreferenzen (6), diesem (6), beispiel (6), for (6), childiframe (6), browser (6), probier (5), übungen (5), was (5), frames (5), aus (5), direkt (5), content (5), objekte (5), funktioniert (5), daten (5), verwenden (5), ohne (5), gesendet (5), sollte (5), zwei (5), selbst (5), click (5), same (5), policy (5), contentwindow (5), kontexte (5), location (5), cross (5), string (5), formatter (5), color (5), generator (4), css (4), best (4), practices (4), this (4), bei (4), fenstern (4), local (4), als (4), origins (4), gleicher (4), direkte (4), übergeordnete (4), nachrichten (4), inhalt (4), onload (4), width (4), height (4), style (4), communication (4), seite (4), objekt (4), shadow (4), fetch (4), async (4), einführung (4), code (3), encoder (3), editor (3), quizze (3), php (3), page (3), arrays (3), verwendet (3), sich (3), derselben (3), verschiedenen (3), diese (3), einer (3), immer (3), send (3), error (3), try (3), übertragen (3), einzige (3), gleichursprünglichen (3), nein (3), drittanbieter (3), sind (3), dieses (3), new (3), kontext (3), öffnet (3), kontexten (3), dem (3), hat (3), storagedisplay (3), shareddata (3), updated (3), sessionstorage (3), des (3), srcdoc (3), manipulation (3), sop (3), opener (3), settimeout (3), write (3), scripts (3), source (3), return (3), replace (3), with (3), https (3), com (3), wer (3), lesen (3), host (3), variablen (3), flag (3), and (3), eigenschaften (3), promise (3), funktionen (3), function (3), operatoren (3), entwickler (2), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), python (2), java (2), git (2), bücher (2), beispiele (2), snippets (2), fazit (2), richtige (2), wählen (2), fensterübergreifenden (2), verstehen (2), arraybuffer (2), binäre (2), befinden (2), trifft (2), durch (2), wie (2), datenaustausch (2), sichere (2), nutze (2), techniken (2), deine (2), prüfe (2), empfängerseite (2), bevor (2), eval (2), validieren (2), console (2), catch (2), wirft (2), fehler (2), stringify (2), type (2), greeting (2), aber (2), klar (2), strings (2), komplexe (2), many (2), messaging (2), andere (2), eng (2), gekoppelte (2), standard (2), überall (2), grenze (2), geeignet (2), fremder (2), sodass (2), zum (2), broadcastchannel (2), klicke (2), dann (2), empfangen (2), element (2), angezeigt (2), sendmessage (2), broadcastdisplay (2), kanal (2), erforderlich (2), ruft (2), dass (2), browsing (2), ausgelöst (2), änderung (2), retrievedata (2), storedata (2), windows (2), genutzt (2), ihn (2), weg (2), verwendung (2), geladen (2), sicher (2), domcontentloaded (2), hinweis (2), fremde (2), eingebetteten (2), childiframecontent (2), iframedoc (2), 1000 (2), initial (2), 600 (2), 400 (2), openchild (2), direct (2), margin (2), top (2), black (2), solid (2), border (2), 200 (2), 100 (2), gleich (2), seiten (2), denselben (2), haben (2), blob (2), sowohl (2), auch (2), übergeordneten (2), kommunizieren (2), parentpopupdisplay (2), iframedisplay (2), handle (2), popupdisplay (2), note (2), contexts (2), hardcoded (2), openpopup (2), childiframedisplay (2), darf (2), targetorigin (2), empfänger (2), widgets (2), muss (2), wann (2), protokoll (2), port (2), jeweils (2), tun (2), browserumgebung (2), workers (2), file (2), suche (2), muster (2), quantoren (2), anker (2), flags (2), components (2), animationen (2), url (2), microtasks (2), formulare (2), benutzerdefinierte (2), ereignisse (2), styles (2), klassen (2), generatoren (2), advanced (2), await (2), fehlerbehandlung (2), promises (2), chaining (2), erweitern (2), handling (2), class (2), prototypes (2), interaktive (2), elemente (2), property (2), object (2), arrow (2), syntax (2), functions (2), objects (2), hash (2), 2026, rechte, vorbehalten, gemacht, sprache, datenschutzrichtlinie, kontakt, uns, unternehmen, üben, kostenlose, tutorials, seit, 2014, next, previous, yes, helpful, prüfen, eigenschaft, verschachtelte, browserfenster, abzurufen, erlaubt, domain, herzustellen, handelt, standardtechnologie, domains, übung, leistungsstarke, funktion, korrekter, anwendung, interaktivität, benutzererfahrung, webanwendungen, erheblich, verbessern, einsatz, effizient, verwalten, befolge, robuste, gewährleisten, bereitgestellten, projekte, integrieren, gegen, erlaubnisliste, reagierst, führe, niemals, eingehenden, absender, failed, closed, vom, benutzer, geschlossen, fremdursprüngliches, angesprochen, schütze, aufrufe, geschlossene, zugängliche, ziele, behandeln, produces, übergeben, explizites, hält, vertrag, structured, clone, algorithm, serialisieren, zweifelsfall, hinweg, eingebauten, sicherheitsmodell, sauberes, zustandsänderungen, zusätzliche, gleichursprüngliche, vollständig, kontrolliert, dort, existiert, besten, ausgelegt, gleichen, geöffnet, fall, dieselbe, datei, erscheinen, zweimal, schaltfläche, yourself, beispielseite, öffnen, testest, korrekt, erstellt, geklickt, another, context, received, onmessage, example_channel, zweckmäßig, entwickelte, werkzeug, jeder, demselben, namen, empfängt, jede, daran, umwege, damit, überschritten, weiterhin, speichert, per, klick, synchronisation, ermöglichen, listener, hinzugefügt, beachte, veranlasst, stored, getitem, shared, setitem, newvalue, key, listen, changes, triggered, other, retrieve, store, jedem, gemeinsam, schreiben, löst, macht, einfachen, spezifisch, weitergegeben, daher, übergreifende, genaueren, blick, findest, unter, allen, session, asynchron, handler, stellt, bereit, szenarien, innerhalb, eingeschränkt, zuverlässige, bevorzugt, gleichem, alternative, zuzugreifen, warnung, untergeordnetes, ändert, dessen, sobald, wurde, außerdem, eines, aktualisiert, adjust, timeout, duration, necessary, innerhtml, ensure, after, has, fully, loaded, childcontent, parentchilddisplay, neues, öffnest, rückgabewert, referenz, geöffnete, seinen, öffner, zurückgreifen, übergeordnetes, erreichen, andernfalls, sicherheitsfehler, ursprüngliche, greife, zurück, involviert, direkten, referenzen, funktionieren, beide, zugreifen, obwohl, einfache, demos, empfehlen, moderne, urls, inhalte, einzufügen, domparser, kombinierten, bettet, jeweiligen, elementen, else, exact, target, popupwindow, examples, childpopup, gibt, vertraust, lehnst, vertrauenswürdigen, zweite, argument, schränkt, übergebe, genauen, erwarteten, verwende, platzhalter, sensibel, jedes, ziel, argumente, sicherheit, entscheidend, sicherste, portabelste, senden, gleiche, sender, lauscht, targetwindow, app, müssen, möglicherweise, synchron, bleiben, logout, ausloggen, eingebettete, zahlungsformulare, karten, player, tauschen, geöffnetes, häufig, ergebnisse, aufrufende, zurücksenden, oauth, login, dateiauswahl, dialog, benötigt, deshalb, fast, empfohlene, vorgehensweise, egal, zwingt, dazu, explizit, anzugeben, wem, man, vertraut, irgendein, teil, weicht, direkter, zugriff, gesperrt, erlaubte, identisches, uneingeschränkt, nutzen, regel, bestimmt, alles, eigenes, besitzt, kontrollierte, miteinander, viel, dürfen, hängt, ihrem, kombination, www, 443, kapitel, behandelt, regelt, sowie, vier, praktische, baut, noch, keine, erfahrung, modell, beginnen, übersicht, bezeichnet, separaten, geöffneten, website, isoliert, absichtlich, sicherheitsgründen, frei, stattdessen, bietet, kleine, reihe, definierter, kanäle, ihnen, auszutauschen, beispielen, intl, vibration, notifications, audio, webrtc, geolocation, websockets, service, midi, validation, fullscreen, history, screen, orientation, push, webgl, battery, animations, apis, regexp, sticky, position, katastrophales, backtracking, lookahead, lookbehind, alternation, rückwärtsreferenzen, name, erfassungsgruppen, gierige, faule, sets, ranges, escaping, sonderzeichen, wortgrenze, mehrzeiliger, modus, anfang, ende, unicode, klasse, zeichenklassen, regex, regular, expressions, styling, slots, komposition, template, custom, elements, animation, indexeddb, cookies, cookie, storing, wiederaufnehmbarer, dateiupload, server, sent, xmlhttprequest, ursprungsübergreifende, anfragen, abbruch, download, fortschritt, formdata, network, requests, canvas, references, loop, macrotasks, selection, range, resizeobserver, intersectionobserver, mutation, observer, various, ressourcen, laden, onerror, defer, load, beforeunload, unload, resource, loading, ereignis, submit, clipboard, change, input, cut, copy, paste, fokussierung, focus, blur, formulareigenschaften, forms, controls, scrolling, tastatur, keydown, keyup, drag, drop, mausbewegungen, mausereignisse, grundlagen, auslösen, browseraktionen, delegation, bubbling, capturing, introduction, koordinaten, fenstergrößen, scrollen, dokument, verändern, attribute, knoteneigenschaften, typ, tag, getelement, queryselector, spezifikationen, streams, filereader, textdecoder, textencoder, binary, files, polyfills, transpiler, bigint, currying, proxy, reflect, miscellaneous, dynamische, imports, export, import, module, modules, iteratoren, generators, iteration, promisification, callbacks, mixins, checking, instanceof, eingebaute, private, geschützte, statische, klassenvererbung, grundsyntax, classes, prototyp, __proto__, native, prototypale, vererbung, inheritance, performance, optimierung, debugging, barrierefreiheit, kompatibilität, manipulationsbibliotheken, fortgeschrittene, manipulationstechniken, traversieren, arbeiten, manipulieren, auswählen, knoten, getter, setter, deskriptoren, properties, configuration, closures, vertieft, binding, debounce, throttle, dekoratoren, weiterleitung, call, apply, setinterval, nfe, globales, alte, var, scope, rest, parameter, spread, rekursion, stack, tojson, datum, uhrzeit, destructuring, assignment, keys, values, entries, weakmap, weakset, map, set, iterables, array, math, zahlen, primitiven, types, optional, konstruktor, operator, primitiv, konvertierung, symbol, typen, garbage, collection, objektmethoden, basics, es6, funktionsausdrücke, schleifen, switch, bedingte, nullish, coalescing, logische, vergleichsoperatoren, typkonvertierungen, datentypen, use, strict, kommentare, basic, anmelden, durchsuchen, formatters, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, kurse,

Text of the page (random words):
e elemente und widgets prototypes inheritance js prototypale vererbung js native prototypes js prototyp methoden objekte ohne __proto__ classes js class grundsyntax js klassenvererbung statische eigenschaften und methoden private und geschützte eigenschaften in js js eingebaute klassen erweitern js class checking instanceof js mixins error handling js fehlerbehandlung try catch js benutzerdefinierte fehler error erweitern promises async await js einführung callbacks js promise js promise chaining js fehlerbehandlung mit promises promise api promisification microtasks async await generators advanced iteration generatoren async iteratoren und generatoren modules module export und import dynamische imports miscellaneous proxy und reflect eval currying bigint js polyfills transpiler frames and windows popups und window methoden fensterübergreifende kommunikation binary data files arraybuffer binäre arrays textdecoder und textencoder blob file und filereader js streams api document browserumgebung spezifikationen suche getelement queryselector knoteneigenschaften typ tag und inhalt attribute und eigenschaften das dokument verändern styles und klassen fenstergrößen und scrollen koordinaten introduction to events javascript einführung in browser ereignisse bubbling und capturing event delegation standard browseraktionen benutzerdefinierte ereignisse auslösen ui events mausereignisse grundlagen mausbewegungen drag and drop tastatur keydown und keyup scrolling forms controls formulareigenschaften und methoden fokussierung focus blur events change input cut copy paste js clipboard api formulare ereignis und methode submit document and resource loading page domcontentloaded load beforeunload unload scripts async defer ressourcen laden onload und onerror various mutation observer js intersectionobserver js resizeobserver selection und range event loop microtasks und macrotasks javascript references canvas network requests fetch api formdata fetch download fortschritt fetch abbruch fetch ursprungsübergreifende anfragen url objekte xmlhttprequest js server sent events wiederaufnehmbarer dateiupload storing data in the browser cookies document cookie localstorage sessionstorage indexeddb animation css animationen javascript animationen web components web components custom elements shadow dom template element shadow dom slots komposition shadow dom styling shadow dom und events regular expressions js regex muster und flags zeichenklassen unicode flag u und klasse p anker string anfang und ende mehrzeiliger modus der anker flag m wortgrenze b escaping sonderzeichen sets und ranges quantoren und n gierige und faule quantoren erfassungsgruppen rückwärtsreferenzen im muster n und k name javascript alternation or lookahead und lookbehind katastrophales backtracking sticky flag y suche an position methoden von regexp und string javascript apis web animations api file api battery api webgl push api screen orientation api history api console api fullscreen api validation api web storage api web midi api js web workers service workers websockets geolocation webrtc web audio api notifications api die vibration api js intl api javascript fensterübergreifende kommunikation fensterübergreifende kommunikation in javascript postmessage same origin policy fensterreferenzen localstorage events und die broadcast channel api mit beispielen fensterübergreifende kommunikation bezeichnet den datenaustausch zwischen separaten browser kontexten einer übergeordneten seite und einem geöffneten popup einer seite und einem eingebetteten iframe oder zwei tabs derselben website der browser isoliert diese kontexte absichtlich aus sicherheitsgründen sodass sie nicht frei die variablen oder das dom des jeweils anderen lesen können stattdessen bietet javascript eine kleine reihe klar definierter kanäle um nachrichten zwischen ihnen auszutauschen dieses kapitel behandelt wann fensterübergreifende kommunikation erforderlich ist die same origin policy die sie regelt sowie vier praktische methoden postmessage direkte fensterreferenzen storage events und die broadcast channel api es baut auf window open und popups auf wer noch keine erfahrung mit dem browser modell hat sollte mit der übersicht der browserumgebung beginnen fensterübergreifende kommunikation verstehen ein browsing kontext ist alles was ein eigenes window objekt besitzt ein tab ein popup oder ein iframe zwei kontexte können nur über eine kontrollierte api miteinander kommunizieren und wie viel sie tun dürfen hängt von ihrem origin ab der kombination aus protokoll host und port zum beispiel https www w3docs com 443 die same origin policy die same origin policy sop ist die regel die bestimmt was ein kontext mit einem anderen tun darf gleicher origin identisches protokoll host und port kontexte können das dom des jeweils anderen direkt lesen und postmessage uneingeschränkt nutzen fremder origin irgendein teil weicht ab direkter dom zugriff ist gesperrt der einzige erlaubte kanal ist postmessage den der empfänger validieren muss deshalb ist postmessage fast überall die empfohlene vorgehensweise es funktioniert gleich egal ob die fenster denselben origin haben oder nicht und es zwingt dazu explizit anzugeben wem man vertraut wann wird es benötigt popup fenster ein mit window open geöffnetes fenster muss häufig ergebnisse an die aufrufende seite zurücksenden ein oauth login popup ein dateiauswahl dialog iframes eingebettete widgets zahlungsformulare karten drittanbieter player tauschen daten mit der host seite aus tabs und andere kontexte zwei tabs derselben app müssen möglicherweise synchron bleiben ein logout in einem tab sollte alle anderen ausloggen methoden der fensterübergreifenden kommunikation window postmessage verwenden die methode window postmessage ist der sicherste und portabelste weg daten zwischen fenstern oder frames zu senden sie funktioniert sowohl für gleiche als auch für fremde origins der sender ruft targetwindow postmessage data targetorigin auf und der empfänger lauscht auf ein message event zwei argumente sind für die sicherheit entscheidend targetorigin das zweite argument von postmessage schränkt ein wer die nachricht empfangen darf übergebe den genauen erwarteten origin https example com verwende den platzhalter nur wenn die daten nicht sensibel sind da jedes fenster an diesem ziel sie dann lesen kann event origin auf der empfängerseite gibt an wer die nachricht gesendet hat prüfe ihn immer bevor du event data vertraust so lehnst du nachrichten von nicht vertrauenswürdigen seiten ab doctype html html lang en head meta charset utf 8 title cross window communication title style childiframe childpopup width 100 height 200 px border 1 px solid black margin top 20 px style head body h1 cross window communication examples h1 button to open popup button id openpopup open popup button div id parentpopupdisplay div iframe iframe id childiframe srcdoc doctype html html lang en head meta charset utf 8 title child iframe title head body div id childiframedisplay div script window addeventlistener message event note for cross origin contexts replace window location origin with the hardcoded parent origin if event origin window location origin return document getelementbyid childiframedisplay innertext message from parent event data event source postmessage hello parent window event origin script body html iframe div id iframedisplay div scripts for parent window script handle popup communication document getelementbyid openpopup addeventlistener click const popup window open popupwindow width 600 height 400 popup document write doctype html html lang en head meta charset utf 8 title popup window title head body div id popupdisplay div script window addeventlistener message event note for cross origin contexts replace window location origin with the hardcoded parent origin if event origin window location origin return document getelementbyid popupdisplay innertext message from parent event data event source postmessage hello parent window event origin script body html settimeout for cross origin replace with the exact target origin e g https example com popup postmessage hello from parent 1000 handle iframe communication const iframe document getelementbyid childiframe iframe onload iframe contentwindow postmessage hello from parent window window addeventlistener message event if event origin window location origin return if event source iframe contentwindow document getelementbyid iframedisplay innertext message from iframe event data else document getelementbyid parentpopupdisplay innertext message from popup event data script body html kopieren probier es selbst in diesem kombinierten beispiel öffnet das übergeordnete fenster ein popup und bettet einen iframe ein sowohl das popup als auch der iframe können über postmessage mit dem übergeordneten fenster kommunizieren nachrichten werden in den jeweiligen div elementen angezeigt hinweis obwohl document write für einfache demos funktioniert empfehlen moderne best practices die verwendung von domparser oder blob urls um inhalte sicher in popups einzufügen auf fensterreferenzen zugreifen wenn du ein neues fenster mit window open öffnest ist der rückgabewert eine referenz auf dieses fenster das geöffnete fenster kann über window opener auf seinen öffner zurückgreifen und ein übergeordnetes fenster kann einen iframe über iframe contentwindow erreichen diese direkten referenzen funktionieren nur wenn beide kontexte denselben origin haben andernfalls wirft die sop einen sicherheitsfehler nutze sie für eng gekoppelte gleich ursprüngliche seiten greife auf postmessage zurück wenn eine origin grenze involviert ist doctype html html lang en head meta charset utf 8 title direct manipulation example title style childiframe width 100 height 200 px border 1 px solid black margin top 20 px style head body h1 direct manipulation example h1 button to open popup button id openchild open child window button div id parentchilddisplay div iframe iframe id childiframe srcdoc doctype html html lang en head meta charset utf 8 title child iframe title head body div id childiframecontent initial content div body html iframe scripts for parent window script document getelementbyid openchild addeventlistener click const childwindow window open childwindow width 600 height 400 childwindow document write doctype html html lang en head meta charset utf 8 title child window title head body div id childcontent initial content div body html ensure the content is updated after the window has fully loaded settimeout childwindow document body innerhtml p message from parent window p 1000 adjust the timeout duration as necessary const iframe document getelementbyid childiframe iframe onload const iframedoc iframe contentwindow document iframedoc getelementbyid childiframecontent innertext updated by parent window script body html kopieren probier es selbst in diesem beispiel öffnet das übergeordnete fenster ein untergeordnetes fenster und ändert dessen inhalt direkt sobald es geladen wurde außerdem wird der inhalt eines eingebetteten iframes aktualisiert warnung die direkte dom manipulation über contentwindow document oder window opener ist durch die same origin policy sop für fremde origins eingeschränkt für sichere und zuverlässige kommunikation sollte immer postmessage bevorzugt werden bei popups mit gleichem origin kann window opener als alternative genutzt werden um direkt auf das übergeordnete fenster zuzugreifen hinweis bei der verwendung von srcdoc wird der iframe inhalt asynchron geladen der onload handler stellt sicher dass das dom bereit ist aber für komplexe szenarien sollte die kommunikation über ein domcontentloaded event ausgelöst werden das innerhalb des iframes gesendet wird local storage und session storage verwenden localstorage wird von jedem gleichursprünglichen tab und fenster gemeinsam genutzt und das schreiben in ihn löst ein storage event in allen anderen kontexten aus das macht es zu einem einfachen weg eine änderung zwischen tabs zu übertragen ohne direkte fensterreferenzen sessionstorage ist tab spezifisch und wird nicht weitergegeben daher ist er für tab übergreifende nachrichten nicht geeignet einen genaueren blick auf die storage objekte selbst findest du unter localstorage und sessionstorage doctype html html lang en head meta charset utf 8 title local storage example title head body h1 local storage example h1 button id storedata store data button button id retrievedata retrieve data button div id storagedisplay div script listen for changes triggered by other windows tabs window addeventlistener storage event if event key shareddata document getelementbyid storagedisplay innertext updated data event newvalue document getelementbyid storedata addeventlistener click localstorage setitem shareddata this is shared data document getelementbyid retrievedata addeventlistener click const data localstorage getitem shareddata document getelementbyid storagedisplay innertext stored data data script body html kopieren probier es selbst in diesem beispiel speichert das übergeordnete fenster daten in localstorage und ruft sie per klick auf einen button ab um die fensterübergreifende synchronisation zu ermöglichen wird ein storage event listener hinzugefügt beachte dass das storage event nur in anderen browsing kontexten ausgelöst wird nicht in dem der die änderung veranlasst hat broadcast channel api die broadcast channel api ist das zweckmäßig entwickelte werkzeug für das messaging zwischen gleichursprünglichen tabs fenstern und iframes jeder kontext der einen kanal mit demselben namen öffnet empfängt jede nachricht die daran gesendet wird ohne fensterreferenzen und ohne storage event umwege origins können damit nicht überschritten werden für drittanbieter iframes ist weiterhin postmessage erforderlich doctype html html lang en head meta charset utf 8 title broadcast channel example title head body h1 broadcast channel example h1 button id sendmessage send message button div id broadcastdisplay div script const channel new broadcastchannel example_channel channel onmessage event document getelementbyid broadcastdisplay innertext broadcast message received event data document getelementbyid sendmessage addeventlistener click channel postmessage hello from another context script body html kopieren probier es selbst in diesem beispiel wird ein broadcast channel erstellt und eine nachricht gesendet wenn der button geklickt wird die nachricht wird empfangen und in einem div element angezeigt so testest du dieses beispiel korrekt klicke zweimal auf die schaltfläche try it yourself um die beispielseite in zwei verschiedenen tabs zu öffnen klicke dann auf den button send message in einem der tabs fenster die nachricht sollte im anderen tab fenster erscheinen die broadcastchannel api ist für die kommunikation zwischen tabs ausgelegt sodass die nachricht von einem tab fenster an alle anderen gesendet wird die zum gleichen origin geöffnet sind in diesem fall dieselbe html...