15

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?)

Community
  • 1
  • 1
cloudfeet
  • 12,156
  • 1
  • 56
  • 57
  • 1
    Possible duplicate of [Communication between tabs or windows](http://stackoverflow.com/questions/28230845/communication-between-tabs-or-windows) – Michał Perłakowski Dec 13 '16 at 00:21
  • 4
    Not a duplicate. Here the question is about cross-domain. – Mitar Dec 13 '16 at 08:35
  • why you need two domains ? without a supporting server? ( Impossible ) – btzr Aug 02 '17 at 15:12
  • Make one server handle an `api` like: `twitter / facebook / youtube / API`, – btzr Aug 02 '17 at 15:16
  • And the other server needs to do the http request ( get / post ) – btzr Aug 02 '17 at 15:17
  • https://www.codementor.io/olatundegaruba/nodejs-restful-apis-in-10-minutes-q0sgsfhbd – btzr Aug 02 '17 at 15:21
  • 1
    @btzr - Definitely not impossible! I actually link to a solution in the question, and it doesn't need any server-side components at all (all sites involved can be 100% static, just using client-side JS). However, the solution I linked requires an extra HTML page (loaded in iFrame) to act as a proxy, and I was wondering if there's a more elegant solution. – cloudfeet Aug 02 '17 at 18:57
  • `However, this does require this page to be hosted somewhere, and an extra request by the client.` ? ^^ – btzr Aug 02 '17 at 19:53
  • `...without a supporting server?` – btzr Aug 02 '17 at 19:53
  • well then I have no idea how to do it except for your answer ^^ :( – btzr Aug 02 '17 at 19:54
  • 1
    @cloudfeet maybe you can find something useful at https://github.com/wingify/across-tabs - I'm not sure how they implemented it, but it seems like a pretty in-depth implementation of this challenge. – motig88 Jan 08 '18 at 14:37

3 Answers3

0

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.

Shawn
  • 717
  • 11
  • 31
  • 2
    Did you try it? Did it work? Does it support cross-origin communication if one of the tabs is not the opener of the other? – miniBill Aug 14 '19 at 13:43
  • 1
    From the docs, this assumes a Parent tab which opens all the others, which isn't what I was looking for. – cloudfeet Oct 30 '21 at 20:48
-1

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

andreasonny83
  • 1,213
  • 11
  • 19
  • It _can_ be done with just static HTML files (see the link in my question) - compared to that, a backend API just adds complexity and wasted bandwidth, and you're better off with the static-HTML solution. – cloudfeet Jun 28 '18 at 16:58
-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.

Matt Wonlaw
  • 12,146
  • 5
  • 42
  • 44
  • 1
    I know about `postMessage` (and mentioned it in my question), but it can only be used when there's a parent/child relationship between the pages - as in the text you quoted. I am considering two tabs opened independently. – cloudfeet Oct 30 '21 at 20:47