尝试在我的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> 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> 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> 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> 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> Please select a valid user from the dropdown list.</p>'; } }); });
要在您打开的窗口中打开新的URL onclick,请执行以下操作
onclick
var newWindow = window.open("","_blank");
newWindow.location.href = newURL;
可以改善用户体验的另一件事是,newWindow.blur在打开新窗口后立即将新窗口发送到后台(),然后再次将其置于前台(newWindow.focus),同时打开新窗口的URL。
newWindow.blur
newWindow.focus