Comment: If you want to achieve cross-document message transmission, you must first listen to the message event of the window object, and then use the postMessage() method of the window object to send messages to other windows. Next, let’s introduce it in detail. Interested friends can refer to it.
Listen to the message event of the window objectwindow.addEventListener("message", function(event) {
// Handle program code
}, false);
Use the postMessage() method of the window object to send messages to other windows. The definition of this method is as follows:
otherwindow.postMessage(message, targetOrigin);
This method uses two parameters: the first parameter is the message text sent, but it can also be any JavaScript object (the object is converted into text through JSON); the second parameter is the URL address of the object window that receives the message. You can use wildcard * to specify all addresses in the URL address string, but it is recommended to use an accurate URL address. Otherwindow is a reference to the window object to be sent. You can return the object through the window.open() method, or return the window object attributed to a single frame by specifying a sequence number (index) or name to the window.frames array.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Sample main document for cross-document message transfer</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(function() {
// Listen to message events.
window.addEventListener("message", function(event) {
// Ignore messages sent by pages other than the specified URL.
if(event.origin != "http://www.blue-butterfly.net") return;
alert(event.data); // Show message.
}, false);
$("#iframeContent").load(function(event) {
// Send a message to the subpage
this[0].postMessage("Hello", "http://www.blue-butterfly.net/test/");
});
});
</script>
</head>
<body>
<header>
<h1>Section of Cross-Domain Communication</h1>
</header>
<iframe src="http://www.blue-butterfly.net/test/"></iframe>
</body>
</html>
The code in the subpage is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(function() {
window.addEventListener("message", function(event) {
if(event.origin != "http://Lulingniu") return;
$("#console").append(event.origin).append("Message from: ").append(event.data);
// Send a message to the main page.
event.source.postMessage("Hello, there is :" + this.location, event.origin);
}, false);
});
</script>
</head>
<body>
<p>This is what is in the iframe. </p>
<div></div>
</body>
</html>
• By listening to the message event of the window object, you can receive messages.
• By accessing the origin property of the message event, you can get the sending source of the message (in this example, the sending source of the main page is, and the sending source of the subpage is). Note: The URL address of the sending source and the website are not the same concept. The sending source only includes the domain name and port number. In order not to receive messages maliciously sent by other sources, it is best to check the sending source.
• By accessing the data attribute of the message event, the message content can be obtained (can be any JavaScript object, using JSON).
•Send messages using the postMessage() method.
• By accessing the source property of the message event, you can get the proxy object of the window of the message source.