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

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]);

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 ...);

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);
}

<.>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!