javascript window.open from callback

默认情况下，

从主线程调用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>

(哈哈，这是我使用 JavaScript 在新选项卡(而不是新窗口(中打开 URL 的答案(。

如何在此处的选项卡中打开(默认情况下为浏览器(？

我们遇到了同样的问题，并在SO周围寻找答案。我们发现在我们的环境中起作用，提炼出的智慧如下：

该问题与阻止编程窗口打开的浏览器弹出窗口阻止程序有关。浏览器允许从主线程上发生的实际用户单击打开窗口。同样，如果您在主线程上调用 window.open，它将工作，如上所述。根据这个答案在新选项卡(而不是新窗口(中打开 URL 如果您使用的是 Ajax 调用并希望在成功时打开窗口，则需要设置async: false它有效，因为这会将所有内容保留在主线程上。

我们无法像这样控制我们的 Ajax 调用，但由于同样的原因找到了另一个有效的解决方案。警告，它有点笨拙，鉴于您的限制，可能不适合您。由对使用JavaScript在新选项卡(而不是新窗口(中打开URL的不同答案的评论提供，您可以在调用setTimeout之前打开窗口，然后在延迟函数中更新它。有几种方法可以做到这一点。打开窗口时，要么保留对窗口的引用，w = window.open...并设置w.location，要么使用目标打开，window.open('', 'target_name') ，在该目标中打开的延迟函数中，window.open('your-url', 'target_name') ，并依赖浏览器保留引用。

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

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

<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 需要多长时间。

这甚至更"黑客"，但是...

如果将 window.open 包装在控制台中.log那么它将起作用。

console.log(window.open('https：//someurl'， '_blank'((

是否将新窗口作为新选项卡或新实例打开，具体取决于用户设置。

我正在使用 Nestjs 和 Vue3。但我在这里用这段代码解决了它。我刚刚获取了从本地主机：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>

相关内容

最新更新

热门标签：