jQuery window.open在ajax中成功被阻止

Question

尝试在我的Ajax成功调用中打开一个新的浏览器窗口，但是，它作为弹出窗口被阻止。我进行了一些搜索，发现需要将用户事件绑定到window.open上，这样才不会发生。

我也找到了这种解决方案，您可以在ajax之前打开空白窗口，然后在成功调用中按正常方式加载url。

因此，我有两个问题：

1-这是唯一的解决方案，因为我不想打开此空白窗口。

2-如果确实是唯一的方法，那么如何将html加载到新窗口中？例如，如果我的ajax不成功，由于无法打开url，如何将错误文本添加到此空白窗口中？

我还应该注意，我不想使ajax调用同步…这违背了ajax的目的，并且我认为如果不这样做的话，这将不被赞成…如果我在搜索中读错了，请纠正我。

    $('#user-login').on('click', function () {
        var $form = $(this).closest('form');
        window.open('about:blank', 'myNewPage');

        $.ajax({
            type: 'post',
            url: '/spc_admin/process/p_user_login.php',
            data: $form.serialize(),
            dataType : 'json'
        }).done(function (response) {

            $myElem = $('#user_login_message'); //performance for not checking dom
            $myElem.fadeOut('fast', function(){

                if (response.success)
                {
                    $myElem.html('<p><b class="text-blue">Success!</b> &nbsp;You have been logged in as \'<b>'+response.username+'</b>\' in a new browser window.</p>').fadeIn('fast');

                    // open new window as logged in user
                    //window.open('http://www.example.com/');
                    window.open('http://www.example.com/', 'myNewPage');
                } 
                else
                {
                    $myElem.html('<p><b class="text-red">Error!</b> &nbsp;Please select a valid user from the dropdown list.</p>').fadeIn('fast');
                }               
            });
        });
    });

编辑：

对于任何有兴趣的人…这是我想出的解决方案。新窗口需要一个名称，因此连续单击将在同一窗口中打开，而不是重复打开新窗口。添加html与答案中给出的稍有不同，并且可以正常工作。窗口模糊不起作用，因此不存在。从我发现，这是不可控制的，是浏览器。

    $('#user-login').on('click', function () {
        var $form = $(this).closest('form');

        //open blank window onclick to prevent popup blocker
        var loginWindow = window.open('', 'UserLogin');

        $.ajax({
            type: 'post',
            url: '/spc_admin/process/p_user_login.php',
            data: $form.serialize(),
            dataType : 'json'
        }).done(function (response) {

            $myElem = $('#user_login_message'); //performance for not checking dom
            $myElem.fadeOut('fast', function(){

                if (response.success)
                {
                    // show success
                    $myElem.html('<p><b class="text-blue">Success!</b> &nbsp;You have been logged in as \'<b>'+response.username+'</b>\' in a new browser window.</p>').fadeIn('fast');

                    // open new window as logged in user
                    loginWindow.location.href = 'http://www.example.com/';
                } 
                else
                {
                    // show error
                    $myElem.html('<p><b class="text-red">Error!</b> &nbsp;Please select a valid user from the dropdown list.</p>').fadeIn('fast');

                    // add error to the new window (change this to load error page)
                    loginWindow.document.body.innerHTML = '<p><b>Error!</b> &nbsp;Please select a valid user from the dropdown list.</p>';
                }               
            });
        });

Answer 1

要在您打开的窗口中打开新的URL onclick，请执行以下操作

1. 将您创建的新窗口存储在变量中 var newWindow = window.open("","_blank");
2. 更改新窗口的位置 newWindow.location.href = newURL;

可以改善用户体验的另一件事是，newWindow.blur在打开新窗口后立即将新窗口发送到后台（），然后再次将其置于前台（newWindow.focus），同时打开新窗口的URL。