Home > Article > Web Front-end > Detailed explanation of postmessage usage

Detailed explanation of postmessage usage

藏色散人Original: 2020-02-17 11:13:228475browse

postmessage usage

About html5 PostMessage usage summary

Everyone knows that transferring data between web pages can be done using ajax requests. Today I will summarize how the postMessage I learned completes cross-page data requests? First of all, postMessage is a new method in HTML5 to solve cross-domain problems. So how does he use it? Here I will share a case.

Related video tutorial recommendations: html video tutorial

Look at the code below:

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>

First of all, its principle is this. Let me take my case code as an example.

1.html is embedded with an iframe web page frame, which is where it transmits data. After 1.html is loaded, he will take the initiative to send it to test.html Nicholas Tse, and then test.html will be received , it contains a processing function for receiving messages. After receiving the message, it immediately returns a string to the web page, and then changes its background to red. This achieves the effect of web page interaction. Unfortunately, the evil ie6.7 does not support it and the compatibility is not high.

Note: When writing postMessage, what is written before postMessage is the window object you want to communicate with (that is, who you want to communicate with). At this time, the permissions of window.parent are limited to this, and cannot be in the same domain as Similarly, get the parent DOM element, otherwise the browser will report an error, prompting you that you cannot perform cross-domain access. Let's look at the parameters received in postMessage. The first parameter is the data you want to pass to another window ( Only string type can be passed). The second parameter represents the source of the target window and the protocol host port number. This is for security reasons. If set to "*", it means that it can be passed to any window.

The above is a single-page interaction, and the following is a two-page interaction. In fact, they are the same, but both pages are written to listen for sending events.

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>

Similarly, 1.html is the main page. Open html and you can interact.

For more programming-related learning, please pay attention to the php Chinese websiteIntroduction to ProgrammingVideo Tutorial Channel!

The above is the detailed content of Detailed explanation of postmessage usage. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML implements adding icons to the title bar of web pagesNext article：HTML implements adding icons to the title bar of web pages

See more

Detailed explanation of postmessage usage

Related articles