Maison > Article > interface Web > Fenêtre H5.postMessage et cross-domain
Cette fois, je vais vous présenter H5 window.postMessage et cross-domain, quelles sont les précautions à propos de window.postMessage et cross-domain Ce qui suit est un cas pratique, jetons un coup d'œil.
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, et avons élaboré les solutions pour résoudre le problème inter-domaines du même -politique d'origine : proxy de sous-domaine, JSONP, 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.
postMessageEnvoyer 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 l'objet fenêtre global, ou elle peut être le type de fenêtre suivant :
Iframe du document dans la fenêtre :
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;
Ouvrez 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/');"
La fonction postMessage 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 Le message spécifique envoyé
origine Source du message d'envoi
source Référence de l'objet Fenêtre de la fenêtre d'envoi du message
Description
Vous pouvez définir le deuxième paramètre de la fonction postMessage sur * pour ignorer la vérification de la source du message lors de l'envoi d'un message inter-domaines.
postMessage ne peut envoyer que des informations de 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>
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Explication détaillée de l'obtention d'informations de localisation avec phonegap
Explication détaillée de la création de contacts avec phonegap
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!