Communicate Between Tabs Dom Without Window Ref
Solution 1:
Parent page JavaScript:
var lastMessage;
setInterval(function() {
var message = localStorage.getItem('message-to-parent');
if (message && message !== lastMessage) {
lastMessage = message;
// your code herealert('There is a new message for you: ' + message);
}
}, 100);
Child page JavaScript:
localStorage.setItem('message-to-parent', 'hello, my parent!');
If you have a lot of animations and other huge JS code, I'd suggest to increase the timer interval, or better to solve the issue with window.
Solution 2:
I faced a similar issue and build a small lib to make function calls via localStorage with paramter possible. You can find it here. Service worker are currently not supported by all browsers.
Here is an example how to use it:
//Register a function: RegisterLocalStorageFunction("test", function(param){
return param+param;
});
//Call a function: let str = "testing";
CallLocalStorageFunction("test",str,function(para){
console.log(para);
});
In your context:
RegisterLocalStorageFunction("CallAlert", function(param){
alert(param);
return"Success";
});
var p = document.getElementById("myElement");
var a = document.createElement('a');
a.setAttribute('href',".../mypage.html");
a.setAttribute('rel',"noreferrer");
a.setAttribute('target',"_blank");
p.appendChild(a);
a.click();
In your other window:
<!DOCTYPE html><html><body><h1> Heading</h1><p> paragraph.</p><buttontype="button"onclick="btnClick()">Click Me!</button><script>functionbtnclick(){
CallLocalStorageFunction("CallAlert","Hello from the other tab",function(para){
console.log("para");
});
}
</script></body></html>Both sides must be on the same domain, otherwise they cant access the same localStorage. With my currrent code on github I use setInterval to cycle through the storage. There is a storage event, which is fired to all other tabs and windows, but not to the same tab. I'll rewrite the lib to use the much cleaner approach with the event, but for now this should do the trick.
Update
In the repository you can find communicator2, which is based on the 'storage' event.
Update
Here is a working example hosted. Keep in mind to allow popups.
Solution 3:
You have to attach a DOMNodeInserted-listener before the click event is fired, then you can access this window-object.
// assuming that all inserted alements are links or a-tags// this code must run before the code that adds the a-elementdocument.addEventListener("DOMNodeInserted", function (ev) {
var link = ev.target;
var oldRef = link.href;
link.onclick = function(event){
event.preventDefault();
var childWindow = window.open(oldRef);
childWindow.onload = function(){
console.log('at this point you can interact with this newly opened window-object: ',childWindow);
};
};
});
//...// some other code//...var p = document.getElementById("myElement");
var a = document.createElement('a');
a.setAttribute('href',".../mypage.html");
a.setAttribute('rel',"noreferrer");
a.setAttribute('target',"_blank");
p.appendChild(a);
a.click();
Hope this helps.
Solution 4:
You can use SharedWorker to commuicate between different browsing contexts.
See Can we refer to javascript variables across webpages in a browser session?
You could alternatively use storage event Can the mechanism that loads the worker in Shared Web Workers be modified?
Post a Comment for "Communicate Between Tabs Dom Without Window Ref"