Question

从主线程调用的

window.open()默认打开新选项卡。

但是，每次都打开新窗口（Opera 16和Google Chrome 29）

<input type="button" value="Open" onclick="cb1()">

<script type="text/javascript">  
function cb1() {
    setTimeout(wo, 1000); //simple async
}

function wo()
{
   var a = window.open("http://google.com", "w2");
   a.focus();
}
</script>

（笑，这是我对Open a URL in a new tab (and not a new window) using JavaScript的回答。）

我如何在标签中打开（默认为浏览器）？

Answer 1

我们遇到了同样的问题并在SO周围寻找答案。我们发现在我们的环境中运作的东西和蒸馏的智慧如下：

问题与浏览器弹出窗口阻止程序阻止编程窗口打开有关。浏览器允许从主线程上发生的实际用户点击打开窗口。同样，如果你在主线程上调用window.open它将起作用，如上所述。根据{{3}}上的这个答案，如果您正在使用Ajax调用并希望在成功时打开窗口，则需要设置async: false，这样可以正常工作，因为这样可以保留主线程上的所有内容。

我们无法像这样控制我们的Ajax调用，但是找到了另一种解决方案，因为同样的原因。警告，它有点hacky，可能不适合你，因为你的约束。感谢对Open a URL in a new tab (and not a new window) using JavaScript上的不同答案的评论，在打电话给setTimeout之前打开窗口，然后在延迟函数中更新它。有几种方法可以做到这一点。在您打开窗口时保持对窗口的引用，w = window.open...并设置w.location或使用目标window.open('', 'target_name')打开，在该目标中打开的延迟函数中window.open('your-url', 'target_name') ，并依靠浏览器保持参考。

当然，如果用户有自己的设置在新窗口中打开链接，这不会改变它，但这对OP来说不是问题。

Answer 2

如果新窗口作为新选项卡或新实例打开，则取决于用户设置。

Answer 3

就像其他文章提到的那样，最好的方法是先打开窗口，然后在回调或异步函数之后设置其位置

<input type="button" value="Open" onclick="cb1()">

<script type="text/javascript">

function cb1() {
  var w = window.open('', 'w2');
  setTimeout(function () {
    wo(w);
  }, 1000); //simple async
}

function wo(w)
{
  w.location = "http://google.com";
  w.focus();
}
</script>

或者，如果您使用异步等待，您也会遇到同样的问题。相同的解决方案仍然适用。

public async openWindow(): Promise<void> {
    const w = window.open('', '_blank');
    const url = await getUrlAsync();
    w.location = url;    
}

进一步的改进是在初始页面上打开窗口，该窗口可以通过加载URL或向该页面写一些html来提供一些快速反馈。

public async openWindow(): Promise<void> {
    const w = window.open('', '_blank');
    w.document.write("<html><head></head><body>Please wait while we redirect you</body></html>");
    w.document.close();
    const url = await getUrlAsync();
    w.location = url;    
}

这将阻止用户长时间浏览空白的标签/窗口来解析您的URL。

Answer 4

我在使用 Nestjs 和 Vue3。但我使用这里写的代码解决了它。我只是在 localhost:8080 上获取了从后端发送的令牌。所以我只是将令牌切片并将其设置为本地存储，然后将用户重定向到下一页。这将授权用户使用此令牌。 Vue 3。这样就解决了。你可以改进它，让它变得更好。我就是这样做的，因为我在后端使用了 OAuth google-passport 而不是 firebase

<script>

methods: {
     googleLogin() {
      const win = window.open(
        "http://localhost:3000",
        "windowname1",
        "width=800, height=600"
      );
      const validateToken = (token) => {
        localStorage.setItem("token", token);
        this.$router.push("/GeneralPage");
        window.clearInterval(pollTimer);
        clearInterval(pollTimer);
        win.close();
      };
      const pollTimer = window.setInterval(async () => {
        try {
          let url = win.document.URL;
          let token = url.slice(22, url.length);
          if (token !== "") {
            localStorage.setItem("token", token);
            this.$router.push("/GeneralPage");
            clearInterval(pollTimer);
            win.close();
            validateToken(token);
            return;
          }
          return;
        } catch (e) {}
      }, 1000);
    },
}
</script>

Answer 5

这甚至更“hackier”，但是...

如果你将 window.open 包装在一个 console.log 中，那么它就会起作用。

console.log(window.open('https://someurl', '_blank'))

javascript window.open来自回调

5 个答案: