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 overlay工具，这会将您的目标网页置于叠加层上...

希望我帮忙！

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

3 个答案: