小编典典

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

ajax

尝试在我的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>';
                }               
            });
        });

阅读 242

收藏
2020-07-26

共1个答案

小编典典

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

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

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

2020-07-26