Communicate between tabs dom without window ref [duplicate]

后端未结

关注

 4  751

渐次进展

相关标签:

4条回答

借酒劲吻你

2021-02-06 03:34

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>
<button type="button" onclick="btnClick()">Click Me!</button>
<script>
    function btnclick(){
        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.

0 讨论(0)

误落风尘

2021-02-06 03:36

Parent page JavaScript:

var lastMessage;
setInterval(function() {
  var message = localStorage.getItem('message-to-parent');
  if (message && message !== lastMessage) {
    lastMessage = message;
    // your code here
    alert('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.

0 讨论(0)

孤独总比滥情好

2021-02-06 03:39

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-element
document.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.

0 讨论(0)

借酒劲吻你

2021-02-06 03:43

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?

0 讨论(0)
发布评论:

提交评论
- 加载中...

热议问题