Maison > Article > interface Web > Explication détaillée de l'utilisation du post-message

Explication détaillée de l'utilisation du post-message

藏色散人original: 2020-02-17 11:13:228476parcourir

utilisation de postmessage

Un résumé de l'utilisation de PostMessage en html5

Tout le monde sait que le transfert de données entre des pages Web peut être effectué à l'aide de requêtes ajax. Aujourd'hui, je vais résumer comment le postMessage que j'ai appris répond aux requêtes de données inter-pages ? Tout d'abord, postMessage est une nouvelle méthode HTML5 pour résoudre les problèmes inter-domaines. Alors comment l’utilise-t-il ? Ici, je vais partager un cas.

Tutoriels vidéo associés recommandés : Tutoriel vidéo HTML

Regardez le code suivant :

test.html

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
</head>
<body>
</body>
<script>
onmessage=function(e){
  e=e||event;
  document.write("my name is ",e.data);
   document.body.style.background = &#39;red&#39;;
};
</script>
</html>

1. html

<!DOCTYPE html>
<html>
<head>
<title>window.postMessage</title>
<meta charset="utf-8"/>
<h1>test接收区</h1>
</head>
<body>
 
</body>
<iframe id="f" src="http://localhost:8080/chajian/test.html"></iframe>
<script>
var f=document.getElementById("f");
//给框架网页发送消息，然后收到之后，会传送过来。
f.οnlοad=function(){
 setTimeout(function(){
  f.contentWindow.postMessage("谢霆锋","http://localhost:8080");
 },3000)
}
</script>
</html>

Tout d'abord, le principe est le suivant. Permettez-moi de prendre mon code de cas comme exemple.

1.html est intégré à un framework de page Web iframe, où il transmet les données. Une fois 1.html chargé, il l'enverra activement à test.html Nicholas Tse, puis test.html le fera. être reçu , qui contient une fonction de traitement pour recevoir des messages, après avoir reçu le message, il renvoie immédiatement une chaîne à la page Web, puis change son arrière-plan en rouge. Cela permet d'obtenir l'effet d'interaction avec une page Web. Malheureusement, le maléfique IE6.7 ne le prend pas en charge et la compatibilité n'est pas élevée.

Remarque : lors de l'écriture de postMessage, ce qui est écrit avant postMessage est l'objet window avec lequel vous souhaitez communiquer (c'est-à-dire avec qui vous souhaitez communiquer. À ce stade, les autorisations de window.parent sont limitées). à cela, et ne peut pas être dans le même domaine que De même, récupérez l'élément DOM parent, sinon le navigateur signalera une erreur, vous indiquant que vous ne pouvez pas effectuer d'accès inter-domaine. Regardons les paramètres reçus dans postMessage Le premier paramètre. sont les données que vous souhaitez transmettre à une autre fenêtre (seul le type de chaîne peut être transmis). Le deuxième paramètre représente la source de la fenêtre cible, protocole + hôte + numéro de port, pour des raisons de sécurité. qu'il peut être transmis à n'importe quelle fenêtre.

Ce qui précède est une interaction sur une seule page, et ce qui suit est une interaction sur deux pages. En fait, ce sont les mêmes, mais les deux pages sont écrites pour écouter l'envoi d'événements.

test.html

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
</head>
<body>
<h1 class="header">page B</h1>
 
<input type="text" id="inp" value="我想你">
<button οnclick="send()">send</button>
</body>
 
 
<script>
window.addEventListener(&#39;message&#39;, function(ev) {
    // if (ev.source !== window.parent) {return;}
    var data = ev.data;
  document.write("my name is ",data);
   document.body.style.background = &#39;red&#39;;
}, false);
 
function send() {
    var data = document.querySelector(&#39;#inp&#39;).value;
    parent.postMessage(data, &#39;http://localhost:8080/&#39;); // 若父页面的域名和指定的不一致，则postMessage失败
    // parent.postMessage(data, &#39;*&#39;); // 触发父页面的message事件
}
</script>
</html>

1.html

<!DOCTYPE html>
<html>
<head>
<title>window.postMessage</title>
<meta charset="utf-8"/>
<h1>test接收区</h1>
</head>
<body>
 
 
<h1 class="header">page A</h1>
<div class="mb20">
    <textarea name="ta" id="data" cols="30" rows="5">hello world</textarea>
    <button style="font-size:20px;" οnclick="send()">post message</button>
</div>
<!-- 跨域的情况 -->
<iframe src="http://localhost:8080/chajian/test.html" id="child" style="display: block; border: 1px dashed #ccc; height: 300px;"></iframe>
 
<script>
function send() {
    var data = document.querySelector(&#39;#data&#39;).value;
 
    window.frames[0].postMessage(data, &#39;http://localhost:8080/&#39;); // 触发跨域子页面的messag事件
}
 
window.addEventListener(&#39;message&#39;, function(messageEvent) {
    var data = messageEvent.data; 
    console.info(&#39;message from child:&#39;, data);
    document.write("收到了数据： ",data);
    document.body.style.background = &#39;red&#39;;
}, false);
</script>
</body>
</html>

De même, 1.html est la page principale. Ouvrez le HTML et vous pourrez interagir.

Pour plus d'apprentissage lié à la programmation, veuillez prêter attention à la chaîne de didacticiels vidéo Introduction à la programmation du site Web PHP chinois !

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!

Déclaration：

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

Article précédent：HTML implémente l'ajout d'icônes à la barre de titre des pages WebArticle suivant：HTML implémente l'ajout d'icônes à la barre de titre des pages Web

Articles Liés

Voir plus