Window postMessage()Méthode
Objet Window
Définition et utilisation
La méthode postMessage() est utilisée pour implémenter en toute sécurité la communication entre origines.
Syntaxe
otherWindow.postMessage(message, targetOrigin, [transfer]);
| Parameters | Description |
|---|---|
| otherWindow | Une référence à une autre fenêtre, telle que la propriété contentWindow d'une iframe, l'objet window renvoyé par window.open, ou un window.frames nommé ou indexé numériquement. |
| message | Les données à envoyer à l'autre fenêtre. |
| targetOrigin | Spécifie quelles fenêtres peuvent recevoir l'événement message. Sa valeur peut être*(ce qui signifie aucune restriction) ou un URI. |
| transfer | Facultatif. Une liste d'objets Transferable transmis avec le message. La propriété de ces objets sera transférée au destinataire du message, et l'expéditeur ne conservera plus la propriété. |
Prise en charge des navigateurs
| Chrome 1 | Edge 12 | Firefox 8 | Safari 4 | Opera 9.5 |
Exemples
Expéditeur
<div>
<input id="text" type="text" value="Exemple" />
<button id="sendMessage" >Envoyer le message</button>
</div>
<iframe id="receiver" src="https://c.example.com/exampletest/postMessage_receiver.html" width="300" height="360">
<p>Votre navigateur ne prend pas en charge les iframes.</p>
</iframe>
<script>
window.onload = function() {
var receiver = document.getElementById('receiver').contentWindow;
var btn = document.getElementById('sendMessage');
btn.addEventListener('click', function (e) {
e.preventDefault();
var val = document.getElementById('text').value;
receiver.postMessage("Hello "+val+"！", "https://c.example.com");
});
}
</script>
Essayez-le »
Récepteur : https://c.example.com/exampletest/postMessage_receiver.html
Le récepteur a un écouteur d'événements qui écoute l'événement "message", et nous devons également vérifier l'origine du message pour nous assurer qu'il s'agit d'un expéditeur de confiance.
<div id="recMessage">
Bonjour Monde!
</div>
<script>
window.onload = function() {
var messageEle = document.getElementById('recMessage');
window.addEventListener('message', function (e) { //Écouter l'événement message
alert(e.origin);
if (e.origin !== "https://www.example.com") { //Vérifier l'origine du message
return;
}
messageEle.innerHTML = "from"+ e.origin +"Message reçu :" + e.data;
});
}
</script>
Essayez-le »
- e.source– La source du message, la fenêtre/iframe qui a envoyé le message.
- e.origin– L'URI de la source du message (peut inclure le protocole, le domaine et le port), utilisée pour vérifier la source des données.
- e.data– Les données qui ont été envoyées.
Objet Window Autres extensions