How to use postmessage

Basic usage of the postMessage method: 1. In the window or tab where you want to send the message, use the postMessage method to send the message to the target window. It accepts two parameters: the message object to be sent and an identifier of the target window (optional); 2. In the target window, use the addEventListener method to listen for the message event to receive messages from other windows.

#postMessage is a JavaScript method for passing messages between browser windows. It allows messages to be sent between open browser windows or tabs without having to bind them to the same domain name or port.

The following is the basic usage of the postMessage method:

1. In the window or tab where you want to send the message, use the postMessage method to send the message to the target window. It accepts two parameters: the message object to be sent and an optional identifier of the target window.

// 发送消息到目标窗口  
var message = { key1: "value1", key2: "value2" };  
var targetWindow = window.open("https://example.com");  
targetWindow.postMessage(message, "*");

In the above example, we created a message object containing key-value pairs and opened a new window via window.open. We then use the postMessage method to send the message to the new window.

2. In the target window, you can use the addEventListener method to listen to the message event to receive messages from other windows.

// 在目标窗口中监听消息事件  
window.addEventListener("message", function(event) {  
  // 接收并处理发送过来的消息  
  var receivedMessage = event.data;  
  console.log("Received message: ", receivedMessage);  
});

In the above example, we added an event listener using the addEventListener method, which will trigger the event when a message from another window is received. In the event handler, we can access event.data to get the sent message object.

Please note that the security of the postMessage method is very important. To avoid potential security risks, it is recommended to specify a verification domain name (that is, the domain name where the receiving window is located) when sending a message instead of using the wildcard "*". Additionally, the target window should verify the origin of the messages to ensure they come from a trusted source.

The above is the detailed content of How to use postmessage. For more information, please follow other related articles on the PHP Chinese website!