Cross-domain, cross-tab communication between co-operating pages

Question

Say I have two tabs, each with a web-page loaded on a different domain. The pages in the two tabs want to communicate.

The simplest solution I could see was this one (my answer on a closely-related question I found while searching for duplicates), where one or both of the pages load an intermediate page iFrame, which proxies between postMessage() and localStorage events. However, this does require this page to be hosted somewhere, and an extra request by the client.

Are there any techniques for this that wouldn't require a specialised "proxy page" to be served by one of the domains? (I.e. that could be implemented by a JavaScript library without a supporting server?)

Answer 1

The window.PostMessage API is what you're looking for.

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

The window.postMessage() method safely enables cross-origin communication between Window objects; e.g., between a page and a pop-up that it spawned, or between a page and an iframe embedded within it.

Answer 2

This javascript library appears to provide the functionality you're looking for (i.e., supports cross-origin communication between browser tabs). I have not used this yet, but will be trying this out in my application. Check out https://github.com/wingify/across-tabs.

Answer 3

I'd probably chose to create a backend API service as a common communication tunnel between the 2 different websites.

Eg. Site-A send a POST message to https://your-API-service When Site-B asks for an update to https://your-API-service Then API service returns the message previously sent from Site-A If you need real-time communication you can also use WebSockets or push notifications