Maison > Article > interface Web > HTML5 window.postMessage et exemple de didacticiel inter-domaines
HTML5 window.postMessage et exemple de didacticiel inter-domaines
- 零下一度original
- 2017-05-13 13:14:361600parcourir
Cet article présente principalement l'explication détaillée du HTML5 window.postMessage et cross-domain, qui est d'une grande valeur pratique. Les amis dans le besoin peuvent s'y référer
Dans l'article précédent. , nous avons parlé de la politique de même origine du navigateur qui empêche les pages de différents domaines d'accéder aux méthodes et attributs des autres. Il explique également les solutions proposées pour résoudre le problème inter-domaines de la politique de même origine : proxy de sous-domaine, JSONP et CORS. . Cet article détaillera window.postMessage HTML5. Avec l'API postMessage, une communication interdomaine peut être réalisée entre les documents de manière sûre et contrôlable. Le code JavaScript tiers peut également communiquer avec des documents externes chargés dans des iframes.
API HTML5 window.postMessage
HTML5 window.postMessage est une API de messagerie sécurisée basée sur les événements.
postMessage envoie un message
Appelez la méthode postMessage dans la fenêtre source où le message doit être envoyé pour envoyer le message.
Fenêtre source
La fenêtre source peut être un objet fenêtre global ou les types de fenêtres suivants :
iframe dans la fenêtre du document :
var iframe = document.getElementById('my-iframe');
var win = iframe.documentWindow;Fenêtre pop-up ouverte par JavaScript :
var win = window.open();
La fenêtre parent de la fenêtre du document actuel :
var win = window.parent;
Ouvre la fenêtre du document actuel :
var win = window.opener();
Après avoir trouvé l'objet fenêtre source, vous pouvez appeler l'API postMessage pour envoyer un message à la fenêtre cible :
``win.postMessage('Hello', 'ttp://jhssdemo.duapp.com/');"
postMessageLa fonction reçoit deux paramètres : le premier doit être envoyé Message, le second est la source de la fenêtre source.
Remarque : Le message ne peut être reçu que lorsque la source de la fenêtre cible correspond à la valeur du paramètre source transmise dans la fonction postMessage.
Recevoir un message postMessage
Pour recevoir le message précédemment envoyé par la fenêtre source via postMessage, il vous suffit d'enregistrer l'événement de message dans la fenêtre cible et de lier l'événement fonction d'écoute. Les messages peuvent être obtenus dans paramètres de fonction.
window.onload = function() {
var text = document.getElementById('txt');
function receiveMsg(e) {
console.log("Got a message!");
console.log("nMessage: " + e.data);
console.log("nOrigin: " + e.origin);
// console.log("Source: " + e.source);
text.innerHTML = "Got a message!<br>" +
"Message: " + e.data +
"<br>Origin: " + e.origin;
}
if (window.addEventListener) {
//为窗口注册message事件，并绑定监听函数
window.addEventListener('message', receiveMsg, false);
}else {
window.attachEvent('message', receiveMsg);
}
};La fonction d'écoute d'événement de message reçoit un paramètre, une instance d'objet Event, qui possède trois attributs :
data Envoyer Le message spécifique
origine envoyer la source du message
source envoyer l'objet fenêtre de la fenêtre de message référence
Explication
Vous pouvez définir le deuxième paramètre de la fonction postMessage sur *, ce qui ignorera l'envoi du message lors de l'envoi messages inter-domaines. Vérifiez la source.
postMessage ne peut envoyer que des informations chaîne .
Instance
Fenêtre source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html5 postMessage</title>
<style>
#otherWin {
width: 600px;
height: 400px;
background-color: #cccccc;
}
</style>
</head>
<body>
<button id="btn">open</button>
<button id="send">send</button>
<!-- 通过 iframe 嵌入子页面(接收消息目标窗口) -->
<iframe src="http://jhssdemo.duapp.com/demo/h5_postmessage/win.html"
id="otherWin"></iframe>
<br/><br/>
<input type="text" id="message"><input type="button"
value="Send to child.com" id="sendMessage" />
<script>
window.onload = function() {
var btn = document.getElementById('btn');
var btn_send = document.getElementById('send');
var sendBtn = document.getElementById('sendMessage');
var win;
btn.onclick = function() {
//通过window.open打开接收消息目标窗口
win = window.open('http://jhssdemo.duapp.com/demo/h5_postmessage/win.html', 'popUp');
}
btn_send.onclick = function() {
// 通过 postMessage 向子窗口发送数据
win.postMessage('Hello', 'http://jhssdemo.duapp.com/');
}
function sendIt(e){
// 通过 postMessage 向子窗口发送数据
document.getElementById("otherWin").contentWindow
.postMessage(
document.getElementById("message").value,
"http://jhssdemo.duapp.com/");
}
sendBtn.onclick = function(e) {
sendIt(e);
};
};
</script>
</body>
</html>Fenêtre cible win.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html5 postMessage</title>
<style>
#txt {
width: 500px;
height: 300px;
background-color: #cccccc;
}
</style>
</head>
<body>
<h1>The New Window</h1>
<p id="txt"></p>
<script>
window.onload = function() {
var text = document.getElementById('txt');
//监听函数，接收一个参数--Event事件对象
function receiveMsg(e) {
console.log("Got a message!");
console.log("nMessage: " + e.data);
console.log("nOrigin: " + e.origin);
text.innerHTML = "Got a message!<br>" +
"Message: " + e.data +
"<br>Origin: " + e.origin;
}
if (window.addEventListener) {
//为window注册message事件并绑定监听函数
window.addEventListener('message', receiveMsg, false);
}else {
window.attachEvent('message', receiveMsg);
}
};
</script>
</body>
</html>Révision
Grâce à l'étude de cet article, j'ai appris à utiliser l'API postMessage de HTML5 pour communiquer entre fenêtres, et j'ai également appris qu'elle peut être utilisée pour réaliser des communications croisées. communication de domaine ; navigation moderne La plupart des navigateurs prennent en charge postMessage, mais pour certains anciens navigateurs tels que IE7-etc., certaines alternatives peuvent être utilisées pour la communication de données, telles que window.name, urlquery caractères et hachage Fragments etc.
【Recommandations associées】
1. Recommandation spéciale : "php Programmer Toolbox" version V0.1 Télécharger
2. Tutoriel vidéo en ligne h5 gratuit
3 Tutoriel vidéo html5 original php.cn
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!