jQuery的的window.open在阿贾克斯成功被阻止 [英] jquery window.open in ajax success being blocked
问题描述
试图在我的AJAX调用成功打开一个新的浏览器窗口，但是，它被封锁作为一个弹出。我做了一些搜索，发现用户事件需要被捆绑到的window.open为这不会发生。
我也发现了这个解决方案，您的AJAX前，打开一个空白窗口，然后加载网址为正常的成功调用。
所以，这个我有两个问题：
1 - 这是唯一的解决办法，因为我想preFER不开这个空白窗口
。2 - 如果这确实是唯一的办法那我该怎么加负载HTML到这个新的窗口？例如，如果我的AJAX不成功，怎么可以将我的错误的文字到这个空白的窗口，因为该网址将不被打开？
我还应该注意到，我不想让AJAX调用同步......这违背了阿贾克斯的目的，我相信这将是如果尚未pcated德$ P $ ......如果我指正读错在我的搜索。
$（'＃用户登录）。在（'点击'，函数（）{
变量$形式= $（本）.closest（形式）;
的window.open（'关于：空白'，'myNewPage'）;
$阿贾克斯（{
类型：'后'，
网址：/spc_admin/process/p_user_login.php，
数据：$ form.serialize（），
数据类型：JSON
}）。完成（功能（响应）{
$ myElem = $（'＃user_login_message'）; //为不检查DOM性能
$ myElem.fadeOut（'快'，函数（）{
如果（response.success）
{
$ myElem.html（'＆LT; P＆GT;＆LT; B类=文本 - 蓝色＆GT;！成功＆LT; / B＆GT;＆安培; NBSP;你已登录为\＆LT; B＆GT;+ response.username + '＆LT; / B＆GT; \'。在一个新的浏览器窗口＆LT; / P＆GT;'）淡入（快）;
作为登录的用户//打开新窗口
//window.open('http://www.example.com/'）;
的window.open（'http://www.example.com/'，'myNewPage'）;
}
其他
{
$ myElem.html（'＆LT; P＆GT;＆LT; B类=文字的红色＆GT;错误＆LT;！/ B＆GT;＆安培; NBSP;请从下拉列表中选择一个有效的用户和LT; / P＆GT;'） .fadeIn（'快'）;
}
}）;
}）;
}）;
编辑：
对于任何有兴趣...这里是我想出了一个解决方案。一个名称是必需的新窗口，以便连续点击将在同一个窗口中打开，而不是反复打开新的。添加HTML稍有不同的答案比给出的这个作品。模糊窗口不工作，所以它是不存在的。从我能找到，这是不可控的，是一个浏览器的事情。
$（'＃用户登录）。在（'点击'，函数（）{
变量$形式= $（本）.closest（形式）;
//的onclick打开空白窗口，以prevent弹出窗口拦截器
VAR登录窗口=的window.open（''，'用户登陆'）;
$阿贾克斯（{
类型：'后'，
网址：/spc_admin/process/p_user_login.php，
数据：$ form.serialize（），
数据类型：JSON
}）。完成（功能（响应）{
$ myElem = $（'＃user_login_message'）; //为不检查DOM性能
$ myElem.fadeOut（'快'，函数（）{
如果（response.success）
{
//表明成功
$ myElem.html（'＆LT; P＆GT;＆LT; B类=文本 - 蓝色＆GT;！成功＆LT; / B＆GT;＆安培; NBSP;你已登录为\＆LT; B＆GT;+ response.username + '＆LT; / B＆GT; \'。在一个新的浏览器窗口＆LT; / P＆GT;'）淡入（快）;
作为登录的用户//打开新窗口
loginWindow.location.href =http://www.example.com/;
}
其他
{
//显示错误
$ myElem.html（'＆LT; P＆GT;＆LT; B类=文字的红色＆GT;错误＆LT;！/ B＆GT;＆安培; NBSP;请从下拉列表中选择一个有效的用户和LT; / P＆GT;'） .fadeIn（'快'）;
//添加错误到新窗口（改变这个加载错误页）
loginWindow.document.body.innerHTML ='＆LT; P＆GT;＆LT; B＆GT;错误＆LT;！/ B＆GT; ＆功放; NBSP;请从下拉列表中选择一个有效的用户和LT; / P＆GT;';
}
}）;
}）;
有关在你打开的onclick ，做窗口中打开一个新的URL以下
- 您存储在一个变量创建的新窗口
VAR newWindow =的window.open（，_空白）; - 更改新窗口的位置
newWindow.location.href =的newURL;
这是可以做，以改善用户体验的一个额外的事情是（ newWindow.blur ）打开后立即发送新的窗口背景，然后把它在前台再次（ newWindow.focus ），而打开URL的新窗口。
Trying to open a new browser window in my ajax success call, however, it is blocked as a popup. I did some searching and found that a user event needs to be tied to the window.open for this to not happen.
I also found this solution where you open a blank window before the ajax then load the url as normal in the success call.
So with this I have two questions :
1 - Is this the only solution because I would prefer not to open this blank window.
2 - If this indeed is the only way then how can I added load html into this new window? For example, if my ajax does not succeed, how can I add my error text into this blank window since the url will not be opened?
I should also note that I do not want to make the ajax call synchronous... this defeats the purpose of ajax and I believe this is going to be deprecated if not already... correct me if I read wrong in my searching.
$('#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');
}
});
});
});
EDIT:
For anyone interested... here is the solution I came up with. A name is required for the new window so successive clicks will open in the same window and not open new ones repeatedly. Adding html is a little different than given in the answer and this works. Blurring of the window does not work so it is not there. From what I could find this is not controllable and is a browser thing.
$('#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>';
}
});
});
For opening a new URL in the window you opened in onclick, do the following
- Store the new window you created in a variable
var newWindow = window.open("","_blank"); - Change the location of the new window
newWindow.location.href = newURL;
One additional thing that can be done to improve user experience is to send the new window to background immediately (newWindow.blur) after opening and then bring it in foreground again (newWindow.focus) while opening the URL the the new window.
这篇关于jQuery的的window.open在阿贾克斯成功被阻止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
