DKean DKean - 1 year ago 86
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>
<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!");

<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>
<h3>Remote Script iframe</h3>
<iframe id="remotepage" src="http://localhost:8081/remote.html"></iframe>

And now, the REMOTE site here...

<!DOCTYPE html>
<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;

<script type='text/javascript'>//<![CDATA[
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 =;
//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 + ": " + + "<br />";
} else {
messagecontainer.innerHTML += "Illegal characters found in the message received @ " + formattedtime + ". Message rejected<br/>";
<h3>Messages Received:</h3>
<div id="messages"></div>

The solution lies in how to call a
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...



Answer Source

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

var myWindow ='newTab.html');
myWindow.postMessage('You\'re a nice looking window', '');

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

window.addEventListener('message', function (event) { 
    // security check ...
    console.log('message: ' +; 
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download