I need to update the javascript in the HTML template below to demonstrate postMessage.
The purpose of this, i will dispatch the message back to my own window.
I need to fill in the TODO sections with the required code.
I didn’t understand how to update the window.postmessage as level 2 header.
I also need help for TODO sections shown below.
Thank You.
<!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>Document</title>
</head>
<script>
function processMessage(message) {
console.log("postMessage:", message);
window.postmessage()
}
function receiveMessage(event) {
console.log("Origin:", event.origin);
window.addEventListener('message', function(e) {
var origin = e.originalEvent.origin || e.origin;
if(origin !==
'http://127.0.0.1:9898')
return;
console.log('received message: ' + e.data, e);
}, false);
// (2) Remove the "message" event listener
// TODO - YOUR CODE GOES HERE
}
}
// add event listener for postMessage
// TODO - YOUR CODE GOES HERE
// dispatch a postMessage to the main window
// TODO - YOUR CODE GOES HERE
</script>
<body>
<h1>Chapter 16 - HTML Scripting - XDM (Cross Domain Messaging)</h1>
</body>
</html>