用于获取从当前选项卡启动的选项卡 URL 的 JavaScript 小书签代码

Question

我正在尝试开发一个书签。小书签的目的是显示当前选项卡和新选项卡的 URL，该选项卡是通过 window.open 调用而启动的。为简化起见，假设launcher.com 启动一个随机URL 进行访问。

function getBothURLs() { 
    var currentURL, newWin;

    function launchNew () {
        currentURL = window.location.href; 
        newWin     = window.open("https://www.launcher.com");
    }

    launchNew();
    alert(currentURL); 
    alert(newWin.location.href); // displays 'about:blank'
}

我无法获取新启动标签的 URL。 alert()（在下面函数的最后）没有正确显示新启动选项卡的 URL；而是显示

 about:blank

当我在 Chrome 控制台中对此进行故障排除时，我将 var currentURL, newWin 的定义移到了 getTwoURLs() 函数的范围之外。当我从控制台中调用函数getBothURLs() 时，currentURL 和newWin 都有有效数据。

应该如何修改函数getBothURLs()才能达到预期的目的？

Answer 1

来自 MDN 的关于 window.open 的注释：

...远程网址不会立即加载。当 window.open() 返回时，窗口总是包含 about:blank。 URL 的实际提取是延迟，并在当前脚本块执行完毕后开始...

在上述情况下，current 块以 getBothURLs() 函数结尾，但您尝试检查该块本身内的新 URL，根据上面的引用，您会看到 @987654323 @网址。
要解决此问题，只需将查找推迟到下一个任务。您可以使用setTimeout 之类的东西将查找发布到下一个任务，或者如果您希望从函数返回值，则使用 Promises 更好。

示例实现可能如下所示：

function getBothURLs() {
  return new Promise((resolve) => {
    var newWin = window.open("//www.stackoverflow.com");
    setTimeout(() => resolve(newWin))
  }).then((win) => {
    return new Promise((resolve, reject) => {
       var check = setInterval(() => {
         try { 
           if(win.location.href !== "about:blank"){
               clearInterval(check);
               resolve(win.location.href)
           }
         } catch(e) {
           clearInterval(check);
           reject(e);
         }
       }, 50)
     })
   })
}

getBothURLs().then(url => console.log(url))

虽然上述解决方案有效，但我仍然建议您将新窗口的 URL 存储在一个变量中，然后使用该变量调用 open。

更新 1：

此示例 sn-p 使用可以返回两个 url 的非承诺回调版本。虽然，也可以修改 promise 版本以返回两个 url，但是由于 OP 在 cmets 中要求提供非基于 promise 的版本，所以我提供了新的 sn-p。 看看：

function getBothURLs(callback){
  var current = window.location.href;
  var win = window.open("https://stackoverflow.com");
  var check =  setInterval(() => {
    try {
      if(win.location.href !== "about:blank"){
        clearInterval(check);
        callback(null, current, win.location.href)
      }
    } catch(e) {
      clearInterval(check);
      callback(e);
    }
  }, 50);
}

getBothURLs((err, _cur, _new) => {
  if(err){
    // some error occurred, probably a cross-origin access
    console.error("Failed to get URL", err);
    return;
  }

  console.log(`Current: ${_cur} New: ${_new}`);
})