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 出現問題......它甚至沒有提供彈出窗口被阻止的信息