2

Is there a chance to use window.postmessage() to communicate between two different applications in different tabs in the same browser?

I know you can do it between application and iFrame, but how about different tabs?

Update:

Case scenario:

  1. user plays audio from vk.com in one tab

  2. user starts playing video from youtube.com in another tab

  3. youtube.com sends postmessage() to vk.com that video started playing

  4. vk.com makes audio silent

Thanks

inside
  • 3,047
  • 10
  • 49
  • 75

2 Answers2

10

It can be done if you use an "intermediate page" loaded in an iFrame.

The (theoretical) solution uses two separate methods of inter-page communication:

  • window.postMessage()
  • localStorage or sessionStorage - see this guide for how this works; the technique involves setting values in one iFrame, and listening for events in the other iFrame.

The "intermediate page" acts as a proxy, translating message events into localStorage events, and vice-versa. If you load this "intermediate page" in an iFrame from both pages, then any messages you post in one tab will pop out in the other tab:

[Tab 1] --(postMessage)--> [iFrame 1]
                                |
                          (localStorage)
                                |
                                v
                           [iFrame 2] --(postMessage)--> [Tab 2]

If one of the tabs is on the same domain as the intermediate page (illustrated here as Tab 2), this can be simplified (without affecting the other tab's setup).

[Tab 1] --(postMessage)--> [iFrame 1]
                                |
                          (localStorage)
                                |
                                v
                             [Tab 2]
Wyck
  • 10,311
  • 6
  • 39
  • 60
cloudfeet
  • 12,156
  • 1
  • 56
  • 57
  • Why even have the iframe? Why not just use localStorage directly in tab 1 and tab 2? – B T Apr 10 '16 at 08:35
  • 1
    The question was about two tabs on two different domains communicating - localStorage is separate for each domain, so at least one of the tabs needs to include an iframe so that it has some content loaded from a domain that's the same as the others. – cloudfeet Apr 10 '16 at 17:48
  • @cloudfeet Can you please explain a bit more how to implement it? I'm trying to implement it like your flow without success. (I'm talking about the "intermediate page" concept) – Jumpa Aug 08 '17 at 06:11
  • 1
    @Jumpa: Every host page has the same intermediate page loaded in an iFrame. To broadcast, a host page sends data to the intermediate page using `iFrame.contentWindow.sendMessage(...)`. When the intermediate page gets a "message" event, it writes the message data to local storage using `sessionStorage.setItem(...)`. This causes all other copies of the intermediate page to receive "storage" events. When an intermediate page gets a "storage" event, it sends the data to its host page using `parent.postMessage(...)`. All other host pages then receive a "message" event containing the broadcast data. – cloudfeet Aug 08 '17 at 11:41
  • @cloudfeet Is it possible to send the data only using window.postMessage. One tab sends the message using window.postMessage and another will receive by listening to that event for that particular origin. Actually theoretically I am thinking this is possible but somehow I am not able to listen to this event – Lakhan Jain Sep 07 '21 at 14:46
0

following up this thread. Same situation here. Opening a different origin using window.open("originB") from origin A. As Lakhan Jain said, theoretically we can use window.postMessage() (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) for communicating between windows with different origins. we would just need to have the reference of the other window.

The problem is that we are not able to listen the events that come from the origin A even if we delay the postMessage until origin B is fully loaded.

Victor Mendigorri
  • 26
  • 2
  • This does not really answer the question. If you have a different question, you can ask it by clicking [Ask Question](https://stackoverflow.com/questions/ask). To get notified when this question gets new answers, you can [follow this question](https://meta.stackexchange.com/q/345661). Once you have enough [reputation](https://stackoverflow.com/help/whats-reputation), you can also [add a bounty](https://stackoverflow.com/help/privileges/set-bounties) to draw more attention to this question. - [From Review](/review/late-answers/31356177) – PM 77-1 Mar 25 '22 at 21:13