wingify/across-tabs

Easy communication between cross-origin browser tabs. Simplified "CORS"ing!

across-tabs's Issues

If multiple child tabs are opened simultaneously, only one of them works correctly.

Steps to replicate:

1. Create a button on parent window which can open a new child tab.
2. Ensure that 'data-tab-opener' isn't used on that button.
3. Click that button multiple times at the same time.
4. Ids/references will be assigned to the first tab which initiated the handshake and not to the rest resulting in incorrect behavior.

As Chrome Extension: Open new tab posts message multiple times

First of all: I love across-tabs. It's easy to use and works very fine for my web app!

I've implemented across-tabs in my Chrome Extension using Vue but it doesn't work as expected.

If I open a new tab the post message is send 4 times instead of one. So it is impossible to make a clean handshake.

I have created a minimal example of this problem and pushed it to GitHub: Across-Tabs-Vue-Chrome-Extension-Boilerplate

(If we can solve the problem, you are welcome to reference my project.)

The boilerplate works as Web App and as Chrome Extension.

If I run the project as Web App, it works fine:

But as Chrome Extension not:

I am really grateful for any support.

Can new child tab be opened using form post

I am working on a use case in which i need to post some data in a form and submit it in new tab. conventional method is to use target attribute on form.

To have more control over new tab - i would like to open the new tab using openTab method of parent tab.
Can you please let me know if this is possible. I wasn't able to figure out the way

Implement Broadcast Channel API

The Broadcast Channel API allows simple communication between browsing contexts (that is windows, tabs, frames, or iframes) with the same origin (usually pages from the same site).

It's downsides are that is only works in modern browsers and with same origin.
Maybe you could look to it, use it for same origin communication and fallback when it is not available (old browser or cross origin).

---

Also, add support to attach any tab (not just those that parent opens) to channel. Something like in Broadcast Channel API, but for cross origin.

Is it useful also to communicate across different windows?

Hi,
As subject, I would like to know if this plugin could useful also for multi-window environment or only in multi tab ones.

Thanks

Angular Support

Hi, Can you explain how can I use it in an angular (2+) application?? Thanks in advance

Website, including the live demo, is down

https://engineering.wingify.com/across-tabs#live-demo

How can I get msg send by parent tab ?

I check the api doc and I use the broadCastAll method to broadcast msg, but I can't get msg from child tab. Is there anything I have missed ?

// parent.html
// I can't get the msg send by child
parent.broadCastall(msg);

// child.html
// I also can't get the msg send by parent
child.sendMessageToParent(msg);

Can child be opened up in same tab i.e. iframe?

I am looking at the documentation and wondering if there is a way I can open child tab in the same window as parent. Is it possible?

Allow for custom stringifier

Based on the results (and looking at the code here and here it looks like the native JSON.stringify is used to serialize the transmission, and then naturally the native JSON.parse is used to deserialize the message. My question is ... would it be possible to provide custom replacer / reviver methods, so that we can pass forms of data not traditionally supported by JSON.stringify? A simple example would be Map or Set, which most browsers do not support stringifying natively (even though it is part of the spec), and only recently did core-js do a polyfill for it.

Something like this should be relatively straightforward to apply, just providing a couple of new options that would default to undefined so as not to break the existing functionality, and then passing those options to the calls of JSON.stringify and JSON.parse. What do you think?

Having an issue

I have been able to get the 2 tabs to communicate from Parent to Child, but using child.sendMessageToParent("Hey Parent- Done with my work."), is never received by the parent.

I can send a message from the Parent to the Child using: parent.broadCastTo(tab, 'Yo! Message from parent!!'); and parent.broadCastAll('Yo! Broadcasted Message from parent to ALL!');

I can also detect when the Child tab is closed, but using the following, I never get a message from the Child:
var config = {
// onPollingCallback : function (c) { console.log("called: onPollingCallback", c); },
removeClosedTabs : true,
onHandshakeCallback : function (h) { console.log("called: onHandshakeCallback", h); },
onChildDisconnect: function (m) { console.log("called: onChildDisconnect", m); },

    onChildCommunication: function () { console.log("called: onChildCommunication"); },
  }

Any suggestions?

Bryan

If parent is disconnect can child opt for new parent?

When parent tab gets reloaded the context is lost hence the child disconnects. So once current parent disconnects is it possible to look for new parent (if there are multiple parent active) ?

Any plan for supporting IE11?

as title.

Home page spelling mistakes

Hi, when I read the contents in the index page , I found a misspelling in the produce of broadCastAll method of API part - parent.broadCastAll('Hello my dear Child! A greeting from Parent.'}); ,maybe it should be parent.broadCastAll('Hello my dear Child! A greeting from Parent.'); - remove the }.

Elect leader and implement once?

Is there any chance there can be parent/leader automatically elected after the parent is closed?

Also, is there a way to perform once() call? I need to to sync state among tabs, which is not a problem but some things I need to be done only once per user, not per window/tab and this is problematic with web workers and channels in general. Hence why having single master/parent/leader is crucial.

--

Actually electing a leader is stupid simple. But that "once" thing is a massive issue because one also needs confirmation that the tab actually executed on the message.

--

"once" is simply impossible in the current state of JS/web browsers.

Open new popup (not just tab)

Is it possible to open new popup window but not just tab?

Child tab not displaying info

Hi, I'm not sure why my child tab is not displaying the correct info when child.getTabInfo() is called. I get this:

but when i use parent.getAllTabs() i get the right info:

Any tips on how to resolve this? Thank you!

in IE10~11, cannot send/receive message in different origin

I'm working with two web pages, all pages imported the across-tabs library.

The problem is occurred in communication.

It works in modern browser, but I tested in IE10~11, not working.

I didn't set any opener options including origin.

parent.com
child.com

With init of parent, parent open the child and send a message. but child cannot receive the message.

It there any solution or similar cases?

Thanks

Shared web workers

Skimming the Readme I could not find any "how it works" section, which explains how it basically works.

In case it does not already use shared web workers, I would suggest this a an alternative for modern browsers.

Typescript support

Is there any plan to add typescript support to this project?

Parent should have a callback when child sends a message

There should be a differentiation when a child sends a message.

1. Whether it's a handshake message - onHandshakeCallback
2. Or, it's a custom message - onChildCommunication

VueJS Tabs Comunication

Hello!
First of all thank you for developing this amazing library!
I am trying to have a Vue component open a new tab (same domain) and to have these tabs communicate with each other:
This is what I have so far:

Parent Component

     const routeData = this.$router.resolve({name: 'SomeRoute'})
      var config = {
        url: routeData.href,
        windowFeatures: '',
      }
      const openedTab = this.parentTab.openNewTab(config)

where parentTab is defined in data as

      parentTab: new AcrossTabs.default.Parent({
        onHandshakeCallback: (val) => {
          console.log('Handshacke completed')
          console.log(val)
        }
      }),

Now in the child tab I was thinking of doing something like this:

const child = new AcrossTabs.default.Child({
        onInitialize: (val) => {        },
        onReady: (val) => {        },
        onParentCommunication: (val) => {        }
      })
    }
router.beforeEach((to, from, next) => {
 console.log(child.tabId)
// If child is defined it means that I have been opened by a parent, if not continue normal workflow
}

However for some reason I never see the tabId in the child tab (but it is correctly defined in the parent)
What am I missing?

Allow passing custom id

Is it possible to pass a custom id to the tab to be opened?
Looking at the source code it looks like the id is always generated from scratch...I would like to submit a PR in order to allow the parent to specify a tabId through the config object. What do you think?

child tab name

Is it just me or does the vanila-js example have the child tab missing its name?