Maison > interface Web > Tutoriel H5 > Explication détaillée des nouvelles fonctionnalités de HTML5 : Transmission de messages entre documents

Explication détaillée des nouvelles fonctionnalités de HTML5 : Transmission de messages entre documents

黄舟
Libérer: 2017-03-30 11:55:52
original
1975 Les gens l'ont consulté

1. Même restriction de domaine

La soi-disant « même restriction de domaine » fait référence à Pour des raisons de sécurité, les navigateurs autorisent uniquement les scripts à communiquer avec des adresses du même protocole, du même nom de domaine et du même port.

2. méthode window.postMessage

Navigateur les restrictions sont différentes Communication entre les fenêtres (y compris les fenêtres iFrame), sauf si les deux fenêtres chargent des pages Web sous le même nom de domaine. La méthode window.postMessage est une API spécifique pour résoudre ce problème, qui peut autoriser des domaines différents. Les noms Windows communiquent entre eux. Le format de la méthode

postMessage est le suivant :

targetWindow.postMessage(message, targetURL[, transferObject]);
Copier après la connexion

La targetWindow dans le code ci-dessus est la variable pointant vers. la fenêtre cible, message est le message à envoyer, et targetURL C'est l'URL de la fenêtre cible spécifiée. Si elle ne correspond pas à l'URL, aucune information ne sera envoyée. TransferObject est l'objet Transferable. qui est envoyé avec les informations. On suppose qu'une nouvelle fenêtre apparaît sur la page Web actuelle

Écoutez ensuite le message

événement

sur la page Web actuelle. spécifie que la fonction de rappel
var popup = window.open(...popup details ...);
Copier après la connexion

de l'événement message est recevoirMessage. Lors de la réception d'informations provenant d'autres fenêtres, la fonction recevoirMessage sera appelée. La fonction recevoirMessage accepte un objet événement événement comme paramètre. dans le paramètre indique l'URL source de l'information. Si l'URL ne répond pas aux exigences, elle est renvoyée immédiatement. L'attribut event.data contient les informations réelles envoyées. En plus de l'origine et des données, l'objet événement a également. un attribut source, qui pointe vers l'objet window qui envoie les informations à la page Web actuelle. >Ensuite, utilisez la méthode postMessage pour envoyer les informations à la nouvelle fenêtre de la page Web actuelle

window.addEventListener('message', receiveMessage, false);
function receiveMessage(e) {    
if (e.origin != 'http://example.org') {        
return;
    }

    console.log(e.data);
}
Copier après la connexion
<.>Le premier paramètre de la méthode postMessage dans le code ci-dessus est l'information réelle envoyée, et le deuxième paramètre est celui spécifié. Le nom de domaine de l'objet expéditeur doit être http://example.org Si la fenêtre de l'autre partie. n'est pas ce nom de domaine, les informations ne seront pas envoyées.

Enfin, déployez le code suivant dans la fenêtre contextuelle Il y a plusieurs choses à noter dans le code ci-dessus. Premièrement, il n'y a pas de source. des informations filtrées dans la fonction recevoirMessage. Les informations envoyées depuis n'importe quelle URL seront traitées. Deuxièmement, l'URL de la fenêtre cible spécifiée dans la méthode postMessage est un astérisque, indiquant que ce message peut être envoyé à n'importe quelle URL. De manière générale, ces deux méthodes ne sont pas recommandées car elles ne sont pas suffisamment sûres et peuvent être filtrées par l'autre partie. Tous les navigateurs prennent en charge cette méthode, mais IE8 et IE9 autorisent uniquement la méthode postMessage à communiquer avec les fenêtres iFrame et non avec les nouvelles fenêtres. IE10 permet la communication avec de nouvelles fenêtres, mais uniquement en utilisant l'objet MessageChannel spécifique à IE

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal