如果在ajax中完成，則window.open被阻止

Question

我有一個由click事件觸發的JS函數。 它應該存儲一些數據，然后打開一個帶有輸入表單的窗口。 原始代碼如下：

function myClickFunction(){
    $('html').mask('Loading...');
    SaveData( function(){ //callback function
        window.open(...);
        $('html').unmask();
    });
}

問題是window.open被彈出窗口阻止程序阻止了。 如果我做：

function myClickFunction(){
    $('html').mask('Loading...');
    SaveData();
    $('html').unmask();
    window.open(...);
}

它工作得很好但當然我只想在SaveData（）完成時打開窗口。

SaveData（）執行ajax調用並試圖使解決方案＃2工作我嘗試在ajax調用中設置async：false但是只阻止我的$（'html'）。mask（'Loading ...'）調用。

我的設置類似於https://stackoverflow.com/a/11670238/1480182，但另一個問題是這必須在iPad上的Safari上運行。 在這個特定的瀏覽器中，沒有辦法使窗口/標簽通信意味着當我打開新窗口時，我停止在開始選項卡上的任何js執行:-(

我該怎么做呢？

Answer 1

彈出窗口阻止程序通常會阻止彈出窗口，如果它們沒有直接響應用戶操作而打開。 因為ajax調用是異步的，所以它的完成函數是在用戶操作之后的某個時間，並且不是直接響應用戶操作，只要瀏覽器可以告訴，因此它可能被阻止。 除了直接響應用戶操作打開彈出窗口之外，沒有簡單的方法。

下一個顯而易見的問題/解決方法是你是否真的需要一個單獨的瀏覽器窗口/標簽？ 您可以在原始窗口中使用疊加層來使應用程序正常工作嗎？ 疊加層將沒有任何限制，您可以使用它做任何您想做的事情。

Answer 2

您可以打開一個新窗口，讓它處理保存和重定向，而不是在myClickFunction 。 可以通過localstorage在頁面之間傳輸數據。

所以，例如，像

function myClickFunction(){
    window.localStorage.tmpData = JSON.stringify(getData());
    window.localStorage.tmpRedirecturl = '...';
    window.open('saveandredirect.html);
}

在saveandredirect.html中

$(function(){
    $('html').mask('Loading...');
    var data = JSON.parse(window.localStorage.tmpData);
    var redirecturl = localStorage.tmpRedirecturl;

    delete window.localStorage.tmpData; // clear storage
    delete localStorage.tmpRedirecturl;

    SaveData(data, function(){
        window.location = redirectUrl;
        $('html').unmask();
    });
})

Answer 3

通過使用彈出窗口，您可以觸發客戶端計算機的操作。 您無法控制客戶端計算機上的操作。 用戶可以隨時禁用彈出窗口...我建議考慮使用jquery覆蓋工具，它會將您的目標頁面放在疊加層上...

希望我幫忙！