DKean DKean - 26 days ago 17
HTML Question

Cross-Document Messaging between two windows or tabs, NOT IFrames

I have put together a Cross-Document Messaging implementation between a site and an iframe. It woks great. But I desire to communicate between tabs, not iframes.

Here is the code I have, for the iframe communication in 2 parts. The first is the Master page and the other is the remote or slave page.

So, MASTER page here...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Cross-Document Messaging Receiver</title>

<!-- <script type='text/javascript' src='js/xDocMess.js'></script> -->

<link rel="stylesheet" type="text/css" href="css/xDocMess.css">
<script type="text/javascript">
function sendMessage() {
//select the iframe containing the message receiver remote script
var remoteframe = document.getElementById("remotepage");

//Get the users message from the message input box
var message = document.getElementById("message").value;

//Check that the message is not blank
if (message !== "") {
remoteframe.contentWindow.postMessage(message, 'http://localhost:8081');
}
else {
alert("You cannot send a blank message!");
}
}

</script>
</head>
<body>
<h1>Cross-Domain Messaging Example</h1>
<div id="controls">
<label>Enter your message to be sent to the iframe: </label>
<input type="text" id="message" />
<button id="sendmessage" onclick="sendMessage();">Send Message</button>
<p>(Note: Only alphanumeric characters will be printed!)</p>
</div>
<h3>Remote Script iframe</h3>
<iframe id="remotepage" src="http://localhost:8081/remote.html"></iframe>
</body>


And now, the REMOTE site here...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Remote Receiver</title>


<link rel="stylesheet" type="text/css" href="css/normalize.css">

<style type='text/css'>
body {
font-family: sans-serif;
padding: 10px;
}
h3 {
padding-bottom: 5px;
}
#messages {
font-size: small;
border-top: 1px solid #000;
padding-top: 10px;
}

</style>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
function receiver(message) {
//get the message container html element (in this case, the messages div)
var messagecontainer = document.getElementById("messages");
var trusteddomain = "http://localhost:8081";

//Get the time of message receipt
var currenttime = new Date();
//format the time into a user readable format
var formattedtime = currenttime.getHours() + ":" + currenttime.getMinutes() + ":" + currenttime.getSeconds();


var msgcontent = message.data;
//check the content of the message only contains letters and numbers to prevent xss attacks
if (msgcontent.match(/^[A-Za-z0-9]+$/)) {
messagecontainer.innerHTML += "message received @ " + formattedtime + ": " + message.data + "<br />";
} else {
messagecontainer.innerHTML += "Illegal characters found in the message received @ " + formattedtime + ". Message rejected<br/>";
}
}
}
</script>
</head>
<body>
<h3>Messages Received:</h3>
<div id="messages"></div>
</body>
</html>


The solution lies in how to call a
window.open
instead of invoking the IFRAME in the MASTER:
<iframe id="remotepage" src="http://localhost:8081/remote.html"></iframe>
and changing the sendmessage code line:
var remoteframe = document.getElementById("remotepage");

and be able to pass messages to the window. I have a mental block there...

Any help would be appreciated...

TIA

Dennis

Answer

If I understand your question, I believe all you need to do is name your window when you call window.open and then use this reference in your code just like you would the contentWindow of an iframe:

var myWindow = window.open('newTab.html');
myWindow.postMessage('You\'re a nice looking window', 'http://yourtargetdomain.com');

You would then put the 'message' handler inside the newTab.html document

window.addEventListener('message', function (event) { 
    // security check ...
    console.log('message: ' + event.data); 
});
Comments