wingify / across-tabs Goto Github PK
View Code? Open in Web Editor NEWEasy communication between cross-origin browser tabs. Simplified "CORS"ing!
Home Page: https://engineering.wingify.com/across-tabs
License: MIT License
Easy communication between cross-origin browser tabs. Simplified "CORS"ing!
Home Page: https://engineering.wingify.com/across-tabs
License: MIT License
as title.
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.
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?
Hi, Can you explain how can I use it in an angular (2+) application?? Thanks in advance
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.
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 possible to open new popup window but not just tab?
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) ?
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?
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:
I am really grateful for any support.
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);
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?
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
There should be a differentiation when a child sends a message.
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
Is there any plan to add typescript support to this project?
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 }
.
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
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
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?
Steps to replicate:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.