Question

尝试在我的ajax成功调用中打开一个新的浏览器窗口，然而，它被阻止为弹出窗口。我做了一些搜索，发现用户事件需要绑定到window.open才能实现。

我也找到了这个解决方案，你在ajax之前打开一个空白窗口然后在成功调用中正常加载url。

所以我有两个问题：

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

2 - 如果这确实是唯一的方法，那么我怎样才能将html加载到这个新窗口？例如，如果我的ajax没有成功，我怎么能将我的错误文本添加到这个空白窗口，因为不会打开网址？

我还应该注意到，我不想让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

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

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

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

Answer 2

在AJAX调用之前执行window.open("about:blank", "newPage");，然后在调用之后通过调用window.open("http://google.com", "newPage");将URL添加到打开的窗口。

Answer 3

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

    $.ajax({
        type: 'post',
        url: '/spc_admin/process/p_user_login.php',
        data: $form.serialize(),
        dataType : 'json',
        success: function(res) {    
            $myElem = $('#user_login_message'); //performance for not checking dom
            $myElem.fadeOut('fast', function(){
                $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/', '_blank');
        } else {
            $myElem.html('<p><b class="text-red">Error!</b> &nbsp;Please select a valid user from the dropdown list.</p>').fadeIn('fast');
        }               
    });
});

jquery window.open在ajax成功被阻止

3 个答案: