message
16 March, 2023
0
0
0
Contributors
About
The message event is used to receive messages sent from another window, iframe or worker using the postMessage() method. The message event is fired when a message is received, and can be handled using an event listener attached to the window object.
When a message is sent using the postMessage() method, the message is delivered asynchronously to the receiving window, and the message event is fired. The message event has a data property that contains the message that was sent, as well as a source property that identifies the window that sent the message.
The message event can be used for a variety of purposes, such as communicating between different windows or iframes on the same domain, or communicating with web workers. It's a powerful and flexible mechanism that enables cross-window communication and enables applications to provide more complex and interactive user experiences.
Event listeners
Here's an example of adding an event listener for the message event:
// Add an event listener for the "message" event
window.addEventListener('message', handleMessageEvent);
// Define the function to handle the "message" event
function handleMessageEvent(event) {
// Check if the origin of the message is trusted
if (event.origin !== 'https://example.com') {
return;
}
// Display the message data in the console
console.log('Received message:', event.data);
}Here, we are adding an event listener to the window object for the message event. When the event is triggered, the handleMessageEvent function is called.
The handleMessageEvent function first checks if the origin of the message is trusted by comparing the event.origin property to a known trusted origin, in this case, https://example.com. If the origin is not trusted, the function returns without doing anything.
If the origin is trusted, the function displays the message data in the console using console.log(). The message data is stored in the event.data property.
Property
You can also add an onmessage property to an HTML element in JavaScript to listen for the message event:
HTML
<iframe src="https://example.com"></iframe>JavaScript
const iframe = document.querySelector('iframe');
// Add an event listener for the "message" event using the "onmessage" property
iframe.onmessage = function(event) {
// Check if the origin of the message is trusted
if (event.origin !== 'https://example.com') {
return;
}
// Display the message data in the console
console.log('Received message:', event.data);
};Here, we first get a reference to an iframe element using document.querySelector(). Then, we add an onmessage property to the iframe element and set it to a function that will be called whenever a message event is received.
The function checks if the origin of the message is trusted and displays the message data in the console if it is.
Inline
Here's an example of adding an onmessage property inline to an HTML element:
HTML
<iframe src="https://example.com" onmessage="handleMessageEvent(event)"></iframe>JavaScript
function handleMessageEvent(event) {
// Check if the origin of the message is trusted
if (event.origin !== 'https://example.com') {
return;
}
// Display the message data in the console
console.log('Received message:', event.data);
}Here, we added the onmessage property to the iframe element and set it to a function called handleMessageEvent that will be called whenever a message event is received.
The handleMessageEvent function checks if the origin of the message is trusted and displays the message data in the console if it is.
Note that inline event handlers have some drawbacks, such as making the HTML harder to read and maintain and not allowing for removing the event handler later on. It is generally recommended to use addEventListener() instead.
Programmatic trigger
There is no message() method that can be called directly to trigger a message event in JavaScript. Instead, you can use the postMessage() method to send a message from one window or frame to another, which will then trigger a message event in the receiving window or frame.
Here's an example:
HTML
<iframe id="myFrame" src="https://example.com"></iframe>
<button id="sendButton">Send Message</button>JavaScript
// app.js
const myFrame = document.getElementById('myFrame');
const sendButton = document.getElementById('sendButton');
sendButton.addEventListener('click', () => {
const message = 'Hello from index.html!';
const targetOrigin = 'https://example.com';
myFrame.contentWindow.postMessage(message, targetOrigin);
});Here, we have a button with an ID of sendButton that, when clicked, will send a message to an iframe with an ID of myFrame. We use the postMessage() method to send the message, passing in the message and the target origin as arguments.
In the receiving window or frame, you can listen for the message event using the addEventListener() method, as we saw in the previous examples.
Note that you can also use the dispatchEvent() method to manually trigger a message event, but this is generally not recommended. The dispatchEvent() method is intended for dispatching custom events, not for triggering built-in events like message.
javascript
javascriptevent
message