javascript - 使用来自 ajax 的参数调用 window.open

Question

我有一个网页使用带有一些请求参数的 window.open 打开一个弹出窗口。该参数是从 ajax 调用中获取的，并且 window.open 是在 xhr 的处理程序内部调用的

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (this.readyState == 4) {
        switch (this.status) {
            case 200:
                window.open("script.php?param2="+this.responseText, "_blank", "...");
                break;
            default:
                alert('aw snap');
                break;
            }
        }
    };
xhr.open("GET", "first_script.php?param1=3", false);
xhr.send();

如您所见，此 ajax 调用是同步的，这会在浏览器的控制台中生成警告。如果使此 ajax 调用异步，则不会出现警告，但弹出窗口将被浏览器阻止，因为它不是由用户直接调用的。

我基本上需要通过 ajax 调用获取一些数据，等待它，然后将获取的数据作为请求参数调用 window.open。

我在这里看到了关于如何等待异步请求的解决方案: How do I return the response from an asynchronous call?

但是，该主题中的讨论建议完全避免同步调用，因为它被认为是一种不好的做法。

我真的很困惑。你能给我一个提示，如何实现这种行为，正确的方法？我想，我试图实现的行为很常见。必须有一种正常的方法可以做到这一点，而无需重新发明轮子。

Answer 1

您应该避免使用同步 XHR，因为它在现代浏览器中已被弃用。

弹出窗口拦截器通常会拦截并非由直接用户操作(例如单击按钮或链接)触发的所有弹出窗口。

您的问题的解决方案是在发送异步 XHR 之前创建并存储一个新窗口，并在收到响应时更改它的位置:

    var newWindow = window.open("", "_blank");
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (this.readyState == 4) {
            switch (this.status) {
                case 200:
                    newWindow.location = "script.php?param2="+this.responseText;
                    break;
                default:
                    alert('aw snap');
                    break;
            }
        }
    };
    xhr.open("GET", "first_script.php?param1=3", true);
    xhr.send();