window.open() 在 AJAX 成功时的工作方式不同

Question

如果我只是给你看那个例子，我会更容易解释这个问题 - > http://jsfiddle.net/RU2SM/
如您所见，有 2 个按钮，一个称为“AJAX”，一个称为“Direct”...因此，如果您单击“Direct”，它会打开窗口（Chrome 上的新选项卡），但如果我尝试使 window.open( ) 在 AJAX 成功处理程序上，它的工作方式不同。
我确定问题出在 AJAX 上，但我不知道如何解决。
将欣赏任何好主意。 谢谢

Answer 1

这就像一个魅力：

// Direct window.open()
$('#btnDirect').on('click',function(){
    window.open('http://google.com')
})
var success = false;  //NOTE THIS

// AJAX window.open()
$('#btnAJAX').on("click", function(){
    $.ajax({
      url: "/user/login/",
      context: document.body,
      async:false,   //NOTE THIS
      success: function(){  //THIS ALSO CHANGED
         success = true
      }
    });
    if(success){ //AND THIS CHANGED
      window.open('http://google.com')
    }
})

它的作用是当 Ajax 调用成功时，它会将变量 success 设置为 true。
async:false属性确保在 Ajax 调用完成后触发 if 语句。
因此 window.open 在与您的直接链接相同的情况下被触发。

Answer 2

问题是浏览器通常会阻止window.open除非它们被调用以直接响应用户操作。 这就是为什么您的点击处理程序有效（点击是用户操作）但您的 AJAX 处理程序无效。

一种解决方案是在初始单击操作期间打开窗口，然后在 AJAX 成功时更新其位置（或在 AJAX 失败时再次关闭它）。

否则，您必须让用户在其浏览器中明确允许来自您域的弹出窗口。

Answer 3

在 ajax 调用成功后实现任何逻辑的更好方法，每个 ajax 调用执行都会触发一个事件，即$.ajax.Request.done和$.ajax.Request.fail 。 $.ajax.Request.done(function(){ if(success){ // 实现逻辑 } });

Answer 4

另外值得一提的是，使用 async: false 然后调用 window.open 可以在 chrome 和 firefox 中工作，但可能会导致 safari 出现问题......它甚至没有提供弹出窗口被阻止的信息