当 url 哈希更改时，刷新使用 window.open 打开的打开窗口答案

【问题标题】：Refresh an open window that was opened with window.open when the url hash changes当 url 哈希更改时，刷新使用 window.open 打开的打开窗口
【发布时间】：2016-12-22 22:32:08
【问题描述】：

我使用window.open(...) 打开一个小的弹出式参考窗口并为其命名。当为该窗口调用后续的window.opens 时，它会被正确地重用。

function openHelp(hash) {
    var helpWindow = window.open(location.protocol + "/help.aspx" + (hash ? "#" + hash : ""), "helpWindow", "width=750, height=600, resizable=1, scrollbars=1, location=0, directories=0, status=no, menubar=no, toolbar=no");
}

它不能正常工作的一种情况是有人在帮助页面 url 上打开了窗口并且只有哈希值发生了变化（即#jump-to-me）。只有在页面重新加载时，页面才会正确地进入散列。

有没有办法找到打开的窗口，检查 URL 是否与我们尝试打开的内容匹配，并在哈希更改时有条件地执行 window.location.refresh()？

【问题讨论】：

我很快 google 给了我这两个堆栈溢出帖子，可以让你走得更远。 stackoverflow.com/questions/4059179/… 和 stackoverflow.com/questions/3090478/jquery-hashchange-event

标签： javascript window.open window.location

【解决方案1】：

如果我做对了，这会让你开始。

var extraWindow;

function makeWindow(){
   extraWindow= window.open(/* .. */);
}

// this will reload the extra window that you just opened.
function reloadWindow(){
  if(extraWindow){
     extraWindow.location.reload();
  }
}

makeWindow();

// reload the window when the hash changes or possibly change the page url based on this.
window.addEventListener("hashchange", reloadWindow, false);

我希望这能提供一个好的答案。

【讨论】：

【解决方案2】：

差不多了，只需要在该特定窗口上为hashchange 事件添加一个事件侦听器。

function openHelp(hash) {
    var helpWindow = window.open(location.protocol + "/help.aspx" + (hash ? "#" + hash : ""), "helpWindow", "width=750, height=600, resizable=1, scrollbars=1, location=0, directories=0, status=no, menubar=no, toolbar=no");
    helpWindow.addEventListener("hashchange", function () { this.location.reload() }, false);
}

【讨论】：