同步阿贾克斯 - 没有浏览器对受信任的事件超时？ [英] Synchronous Ajax - does Chrome have a timeout on trusted events?
问题描述
状况
我们有一个情况下，我们需要为的onclick打开一个新的标签在浏览器中执行XHR / Ajax请求之后
我们做到这一点通过设置Ajax请求执行同步以保持信任的单击事件的背景下，这工作得很好。
问题
不过，在最新的Chrome版本（36），我们遇到弹出的警告时，Ajax调用具有一定的滞后性... 2秒的延迟就足够了Chrome浏览器，显示弹出警告，而不是打开的选项卡像它应该。 C本身的$ C $是工作，我可以单击该按钮多次和它所有的时间，直到请求经历一定的滞后性。然后我得到了弹出警告...
问题
有没有应用到同步Ajax请求超时，它需要在此期间，将完成对值得信赖的事件仍然可用？
有没有什么办法来规避呢？毕竟，直到结果到来的调用已同步和冻结一切。
感谢。
更新的jsfiddle
更新：我创建了一个的jsfiddle来说明问题： http://jsfiddle.net/23JNw/9/
/ **
*这个方法将会给打开弹出而不发出任何警告。
* /
传播performSlowSyncronousRequest（）{
$阿贾克斯（{
网址：/回声/ HTML'，
数据：{延迟：2} //的jsfiddle将延迟2秒答案
成功：函数（）{
的window.open（'http://www.thirtykingdoms.com'）; //这会导致浏览器弹出警告
}，
异步：假的
}）;
}
您的问题是不是与 XMLHtt prequest ，但延迟（同步延迟，在WebKit的/眨眼也许错误）
请参阅例子（ http://jsfiddle.net/23JNw/32/ 的片段唐沙箱'T允许弹出窗口）：
函数performSlowSyncronousRequest（）{
VAR endsIn，最初的;
延迟= 5000;
endsIn =新的日期（）的getTime（）+延迟。
对于（; endsIn＆GT;。=新的日期（）的getTime（））{} //延迟
的window.open（'http://www.thirtykingdoms.com'）;
}
＆LT;按钮的onclick =performSlowSyncronousRequest（）＆GT;测试用例和LT; /按钮＆GT;
注：该 sjax （XMLHtt prequest同步）被认为是过时某些浏览器是非常糟糕的用户体验
我试图模拟点击，但不起作用：
函数clickFire（EVT）{
VAR报，evtFake，POS机;
埃尔= document.createElement方法（一）;
el.href =JavaScript的：无效（0）;;
el.innerHTML =测试;
el.onclick = EVT;
document.body.appendChild（EL）;
POS = el.getBoundingClientRect（）;
evtFake =新的MouseEvent（点击，{
泡沫：假的，
取消：假的，
观点：窗口，
细节：0，
screenX：window.screenX，
screenY：window.screenY，
clientX：pos.left + 1，
clientY：pos.top + 1，
中ctrlKey：假的，
Shift键：假的，
ALTKEY：假的，
metaKey：假的，
按钮：1，
按钮：0，
relatedTarget：埃尔
}）;
el.dispatchEvent（evtFake）;
window.setTimeout（函数（）{
document.body.removeChild（EL）;
}，1）;
}
window.setTimeout（函数（）{
clickFire（函数（）{
的window.open（http://stackoverflow.com）;
}）;
}，1000）;
注：Web浏览器今天很聪明，我们将很难得到骗他们。
。
解决方案
不要使用弹出窗口（我讨厌的弹出窗口:)），尝试模拟，弹出使用＆LT; IFRAME＆GT; ： http://demos.jquerymobile.com/1.4.0/popup-iframe/
或添加UM使用模式（如引导），并放置一个消息，要求用户点击按钮：
＆LT;脚本SRC =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js＆GT;＆LT; / SCRIPT＆GT ;
＆LT;脚本的src =// maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
＆LT;链接HREF =// maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css相对=样式/＆GT;
＆LT; DIV CLASS =模式变脸ID =exampleModal的tabindex = - 1角色=对话框中的咏叹调 - labelledby =exampleModalLabelARIA隐藏=真＆GT;
＆LT; DIV CLASS =模式 - 对话＆GT;
＆LT; DIV CLASS =模式的内容＆GT;
＆LT; DIV CLASS =模式的首部＆GT;
＆LT;按钮式=按钮级=关闭数据解雇=莫代尔ARIA标签=关闭＆GT;＆LT;跨度ARIA隐藏=真＆GT;＆安培;倍;＆LT; / SPAN＆GT; ＆LT; /按钮＆GT;
＆LT; H4类=模式的标题ID =exampleModalLabel＆gt;新建消息＆LT; / H4＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =模态体＆GT;
打开弹出:)
＆LT; / DIV＆GT;
＆LT; DIV CLASS =模式躯＆GT;
＆LT;按钮式=按钮级=BTN BTN默认数据解雇=模式＆GT;取消＆LT; /按钮＆GT;
＆LT;按钮ID =popupIsNotPopular类型=按钮级=BTN BTN小学＆GT;确定＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
window.setTimeout（函数（）{
$（'＃exampleModal）模式（）。
}，2000）;
$（＃popupIsNotPopular）。点击（函数（）{
的window.open（http://www.stackoverflow.com）;
}）;
Situation
We have a situation, where we need to onclick-open a new tab in browsers after performing an XHR / Ajax request.
We do this by setting the Ajax request to be performed synchronously to keep the context of the trusted click event and this works fine.
Problem
However, in the latest Chrome version (36), we experience popup warnings when the Ajax call has some lag... A lag of 2 seconds is enough for Chrome to display a popup warning instead of opening the tab like it is supposed to. The code itself is working, I can click that button multiple times and it works all the time until the request experiences some lag. Then I get the popup warning...
Question
Is there a timeout applied to synchronous Ajax requests during which it needs to be finished for the trusted event to still be available?
Is there any way to circumvent that? After all, the call is already synchronous and freezing everything else until the result arrives.
Thanks.
Update JSFiddle
Update: I've created a JSFiddle to demonstrate the problem: http://jsfiddle.net/23JNw/9/
/**
* This method will give open the popup without a warning.
*/
function performSlowSyncronousRequest() {
$.ajax({
url: '/echo/html',
data: {delay: 2}, //JSfiddle will delay the answer by 2 seconds
success: function(){
window.open('http://www.thirtykingdoms.com'); //this causes the popup warning in Chrome
},
async: false
});
}
Your problem is not with XMLHttpRequest, but with delay (sync delay, maybe bug in WebKit/Blink)
See example (http://jsfiddle.net/23JNw/32/ sandbox in Snippet don't allow pop-ups):
function performSlowSyncronousRequest() {
var endsIn, initial;
delay = 5000;
endsIn = new Date().getTime() + delay;
for (; endsIn >= new Date().getTime();) {}//Delay
window.open('http://www.thirtykingdoms.com');
}
<button onclick="performSlowSyncronousRequest()">Test case</button>
Note: that sjax (XMLHttpRequest sync) is considered obsolete by some browsers is very bad for the user experience.
I tried simulate click, but not work:
function clickFire(evt){
var el, evtFake, pos;
el = document.createElement("a");
el.href = "javascript:void(0);";
el.innerHTML = "test";
el.onclick = evt;
document.body.appendChild(el);
pos = el.getBoundingClientRect();
evtFake = new MouseEvent("click", {
bubbles: false,
cancelable: false,
view: window,
detail: 0,
screenX: window.screenX,
screenY: window.screenY,
clientX: pos.left + 1,
clientY: pos.top + 1,
ctrlKey: false,
shiftKey: false,
altKey: false,
metaKey: false,
button: 1,
buttons: 0,
relatedTarget: el
});
el.dispatchEvent(evtFake);
window.setTimeout(function() {
document.body.removeChild(el);
}, 1);
}
window.setTimeout(function() {
clickFire(function() {
window.open("http://stackoverflow.com");
});
}, 1000);
Note: The web browsers are very smart today and we will hardly get cheat them.
Solution
Don't use pop-ups ( I hate pop-ups :) ), try simulate "pop-up" using <iframe>: http://demos.jquerymobile.com/1.4.0/popup-iframe/
Or add um button using modal (like bootstrap) and and place a message asking the user clicks:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
Open pop-up :)
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button id="popupIsNotPopular" type="button" class="btn btn-primary">Ok</button>
</div>
</div>
</div>
</div>
window.setTimeout(function() {
$('#exampleModal').modal();
}, 2000);
$("#popupIsNotPopular").click(function() {
window.open("http://www.stackoverflow.com");
});
这篇关于同步阿贾克斯 - 没有浏览器对受信任的事件超时？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
