在其他选项卡/窗口中触发事件

Question

我有两个浏览器窗口A和B并排打开。

当有人点击一个按钮在窗口 a 我想在窗口B运行一个函数。

我目前正在使用窗口B和窗口A中的window.open(myurl,myurl)中的hashchange事件来告诉另一个窗口开始运行该函数，但是当url更改时，这不能很好地工作。

是否有另一个解决方案在javascript初始化事件外的当前窗口?

Answer 1

我能想到的一种方法是引起另一个选项卡/窗口将检测到的localStorage更改，只要它们属于相同的域，从而共享相同的localStorage。如果在事件触发选项卡中，你可以这样做:

localStorage.setItem('detectMyChange', '0');
localStorage.setItem('detectMyChange', '1');

然后你可以检测到其他选项卡/窗口的变化，并对它做出反应(我在这里使用JQuery，类似于纯Javascript):

$(window).on('storage', function (e) {
    var storageEvent = e.originalEvent;
    if ((storageEvent.key == 'detectMyChange') && (storageEvent.oldValue == '0') && (storageEvent.newValue == '1')) {  
        // Event detected, do some really useful thing here ;)
    }
});

在触发窗口中更改localStorage两次的原因是能够使用相同的代码再次触发事件(在同一窗口或其他地方)，因为您检测到localStorage变量从一个已知值更改为另一个已知值。

您甚至可以设置不同的新值来发送不同的信息到其他选项卡/窗口。