Is there a way to make client-side interprocess munication between multiple web pages in javascript? Ideally I'd like to acplish this without any plex server status updating, pinging, etc. and make it work solely on the client. If I could make this cross-browser as well, I would be in heaven haha. Any ideas? Thanks!

Is there a way to make client-side interprocess munication between multiple web pages in javascript? Ideally I'd like to acplish this without any plex server status updating, pinging, etc. and make it work solely on the client. If I could make this cross-browser as well, I would be in heaven haha. Any ideas? Thanks!

• javascript
• browser
• window
• ipc
• html

• cookies, querystrings, localStorage – user2736012 Commented Oct 14, 2013 at 1:32
• do you mean on the same puter? or something peer-to-peer? – BraveNewCurrency Commented Oct 14, 2013 at 1:53
• @user2736012 but there's no push ability? localStorage would still need some kind of busy-waiting I think (unless there's an onChange() callback or something...) @BraveNewCurrency On the same puter, nothing going back to the server. – Athan Clark Commented Oct 14, 2013 at 1:55
• Possible duplicate of Communication between tabs or windows – user Commented May 4, 2017 at 11:04

2 Answers 2

There are many ways of doing inter-window munication. They are Window.postMessage, Local Storage, WebRTC, and nowadays Shared Web Workers.

Each of these has their own advantages/disadvantages:

• Local Storage only works on same-origin pages (origin is protocol://website:port). It also broadcasts the message to every open window on the same origin, so it is slow if you have lots of pages open) Unfortunately this is the only cross-window tech supported on IE11 and below.
• Shared Workers are only supported in Chrome and Firefox (and only supports same-origin as well, and the worker.js file must loaded from the same origin). You also have to 'relay' munication traffic from one page to another.
• Window.postMessage only works between parent/child windows, but it supports cross-origin!

Doing cross-origin munication between two independent websites is really clunky. You either have to perform a window.open() from the first website and use postMessage to municate with the second website, or you have to set up this convoluted architecture, where you use hidden iframes on each site to talk to a web page hosted on the same website address, and these iframes then talk to each other through Local Storage or a Shared Worker. This is called a 'munication hub'. (Pretty plicated, right?)

Worse still, inter-page munication has been seen as a security vulnerability and pretty much shunned. If some folks had their way, I imagine cross-origin postMessage would be removed. What I'd like to see is some protocol enhancements and some oAuth-like techniques created so we can secure the technique and make it reasonable. There's going to be a lot of data movement in the future to the client, and sharing it between web-pages will bee critical.

That said, don't re-make the wheel. There are several libraries out there that make inter-window munication possible.

• Endpoint.js - A library (disclaimer) I developed which mediates munication between windows (on multiple origins), tabs, web workers, client/server, as well as IPC between processes. It also creates an ad-hoc overlay network that allows all of these techniques to relay information to each other.
• crosstab - Implements the 'munication hub' approach above.
• ozp-iwc - The IPC framework from OZone Widget Framework. Enables Local Storage and PostMessage

Give a try to this code for the message writer

function sendMessage(name, value) {
    var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}

sendMessage("test", "hello world!")

Open a second window and try this message listener

function getMessage(c_name) {
    if (document.cookie.length > 0) {
        c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
            c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) {
                c_end = document.cookie.length;
            }
            return unescape(document.cookie.substring(c_start, c_end));
        }
    }
    return "";
}
function check() {
    var message = getMessage('test');
    var element = document.getElementById('output');
    element.innerHTML = message;
}
window.setInterval(check, 1000);

It works fine on Chrome, you should also get sure it works in other major browser, specially on IE