Communicate between tabs dom without window ref [duplicate]

Answer 1

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:

 Heading
 paragraph.
Click Me!

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.