window.postMessage în JavaScript

altaFereastra.postMessage(date, origineTinta)
window.addEventListener("message", (e) => { e.origin; e.data; })

Ce face window.postMessage

O pagină nu poate citi direct conținutul unui iframe sau al unei ferestre de pe alt domeniu. postMessage este calea permisă: trimiți date (copiate, ca la structuredClone) către fereastra respectivă, iar aceasta le primește în evenimentul message.

Al doilea parametru este originea permisă a destinatarului (de exemplu "https://plati.exemplu.ro"). La primire, verifică mereu e.origin înainte să folosești e.data.

Parametri

Parametru	Descriere
date	Valoarea trimisă.
origineTinta	Originea destinatarului sau "*" (nesigur).

Ce returnează

undefined.

Exemple

Exemplul 1: Pagina și un iframe de plată

// pe pagina magazinului
const iframe = document.querySelector("#plata");
iframe.contentWindow.postMessage({ suma: 149.9, moneda: "RON" }, "https://plati.exemplu.ro");

window.addEventListener("message", (e) => {
  if (e.origin !== "https://plati.exemplu.ro") return;
  console.log("rezultat plată:", e.data.stare);
});

// în iframe (https://plati.exemplu.ro)
window.addEventListener("message", (e) => {
  if (e.origin !== "https://magazin.exemplu.ro") return;
  e.source.postMessage({ stare: "aprobată" }, e.origin);
});

Rezultat în browser

rezultat plată: aprobată

Greșeli frecvente

• Nu verifici e.origin. Orice site care îți deschide pagina poate trimite mesaje false.
• Trimiți date sensibile cu originea "*". Ele pot ajunge la orice pagină încărcată între timp în acea fereastră.

Comenzi înrudite

• BroadcastChannel / MessageChannel: Trimite mesaje între file, ferestre și workers deschise pe același site (BroadcastChannel) sau între două capete legate (MessageChannel).
• window.open / window.close: Deschide o adresă într-o filă sau fereastră nouă și închide ferestrele deschise din cod.
• structuredClone: Creează o copie completă (în adâncime) a unei valori: obiecte, tablouri, Date, Map, Set.