I'm new to stack overflow - it's a pleasure to join such a community like yours.
I'm sending this message since I'm trying to do an activity regarding cross-window communication, but I'm unable to figure out what I'm doing wrong. The task merely consists in sending a message from an origin, and displaying it on the destination window. The web browser I'm using is Firefox 94.0.1 (64-bit).
Here you have the code I've written:
ORIGIN
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Origin</title>
</head>
<body>
<script>
function sendMessage() {
var destination = window.open("http://localhost/dew/cross_window_communication/destination.html");
destination.postMessage("Message from localhost", "http://localhost/dew/cross_window_communication/origin.html");
}
</script>
<form>
<input type="button" onclick="sendMessage();" value="Send Message">
</form>
</body>
</html>
DESTINATION
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Destination</title>
</head>
<body>
<script>
window.addEventListener
("message",
function(event) {
var message = event.data;
var domain = event.origin;
var targetWindow = window.opener; // The Window interface's opener property returns a reference to the window that opened the window. In other words, if window A opens window B, B.opener returns A.
console.log("Message: " + message + ", Domain: " + domain + ", Opener: " + targetWindow),
}
)
</script>
</body>
</html>
When I click on the button, the new window spawns. After this, I access the web developer Firefox tool by pressing F12 button, but somehow the message is not shown in the console.
I'd really appreciate it if someone could help me out with this.
Kind regards.