45

在我的网站上，有一个按钮仅用于调用调用 的函数window.open，但是，最近需要进行调整以在打开弹出窗口之前进行服务器端检查。

自从添加了执行 AJAX 调用的代码以来，浏览器就阻止了在successAJAX 调用的回调中打开的弹出窗口。我读到如果用户点击事件没有调用浏览器可能会阻止弹出窗口，所以我尝试将 AJAX 请求设置为async: false，这解决了 Firefox 中的问题，但谷歌浏览器仍然阻止我的弹出窗口。有没有办法解决这个问题？

我可以将服务器端检查移至在弹出窗口中打开的页面，但如果可能的话，我想在打开弹出窗口之前执行此操作。

代码：

<a id="attackButton" href="#">Attack Base!</a>

<script type="text/javascript">
$(function() {
    $('#attackButton').click(function() {
        $.ajax({
            url: baseurl + '/index.php?option=com_pbbgs&format=raw&getinfo=goingame',
            data: { 'gameid': 618 },
            dataType: 'text',
            async: false,
            type: 'POST',
            success: function(data) {
                eval(data);

                if (window.gameURL) {
                    goingameRaw();
                }
            }
        });

        return false;
    });
});

function goingameRaw()
{
    window.open(window.gameURL,'test','left=20,top=20,width=1024,height=640,toolbar=0,resizable=0,location=0');
}
</script>

示例响应正文：

window.gameURL="http://mydomain.com/index.php?option=com_pbbgs&format=raw&startgame=618&width=1024&height=640";checktutorial('js','attack');
4

7 回答 7

50

是的，弹出窗口应该是用户操作的直接结果。在 ajax 回调中执行它们不会成功。此外，使用async:false也很糟糕 - 在 FF 中已知会阻止整个浏览器。想一些其他的方法来做检查：

  • 这可能是您在弹出窗口中做的第一件事
  • 您可以在单击时打开弹出窗口，并在稍后触发回调时对其进行操作
  • 您可以要求用户再次单击某个按钮来触发弹出窗口（可能是最糟糕的解决方案）
  • 你可以在页面加载时做到这一点
于 2011-01-05T10:28:01.550 回答
23

跟进 Emil 的出色回答，“您可以在点击时打开弹出窗口，并在稍后触发回调时对其进行操作”。我使用了这个实现。

$('#attackButton').click(function() {

新代码在这里

    var win = window.open('');
    window.oldOpen = window.open;
    window.open = function(url) { // reassignment function
        win.location = url;
        window.open = oldOpen;
        win.focus();
    }

结束新代码

    $.ajax({
        url: baseurl + '/index.php',
        data: { 'gameid': 618 },
        type: 'POST',
        success: function(data) {
            window.open('some url'); // will call reassignment function above 
        }
    });

    return false;
});
于 2012-02-16T22:02:24.270 回答
6

您可以在 onclick 事件下打开一个未被阻止的窗口，如果您在 ajax 调用上打开它，则它被视为弹出窗口。但是我成功地使用了这种方法一段时间来打开一个弹出窗口并且没有被阻止。

http://en.nisi.ro/blog/development/javascript/open-new-window-window-open-seen-chrome-popup/

于 2013-12-31T08:28:02.813 回答
2

在我的情况下，它window.open是在一个promise角度内启动的，它打开了弹出窗口阻止程序，我的解决方案是：

$scope.gotClick = function(){

  var myNewTab = browserService.openNewTab();
  someService.getUrl().then(
    function(res){
      browserService. updateTabLocation(res.url, myNewTab);
    }
  );
};

浏览器服务：

this.openNewTab = function(){
  var newTabWindow = $window.open();
  return newTabWindow;
}

this.updateTabLocation = function(tabLocation, tab) {
  if(!tabLocation){
    tab.close();
  }
  tab.location.href = tabLocation;
}

这就是您可以使用promise响应打开新选项卡而不调用弹出窗口阻止程序的方法。

于 2016-10-27T11:57:46.213 回答
1

以前的解决方案对我不起作用，但我基于它并使用了命名窗口。

internalCounter++;
var tabbedWin = window.open('','windowName_'+internalCounter);
$.ajax({
        url: url,
        async: false,
        indexValue:internalCounter,
        success: function(){
            var w= window.open(url, 'windowName_'+this.indexValue);                
            w.focus();
        }
})
于 2016-05-31T13:18:08.403 回答
1

这是一个普通的 JavaScript解决方案，我正在为我的一个网站使用，以绕过 Chrome 中的弹出窗口阻止程序。

假设我们有以下 HTML 按钮：

<button id="clickMe">Click Me!</button>

现在，当用户单击按钮时，您应该做的第一件事就是打开一个空的新窗口。在Fetch请求完成后，更新实际的窗口 URL。如果请求失败，只需关闭窗口：

const button = document.querySelector('#clickMe');

// add click event listener
button.addEventListener('click', () => {

    // open an empty window
    const tab = window.open('about:blank');

    // make an API call
    fetch('https://reqres.in/api/users')
        .then(res => res.json())
        .then(json => {

            // TODO: do something with JSON response

            // update the actual URL
            tab.location = 'https://attacomsian.com';
            tab.focus();
        })
        .catch(err => {
            // close the empty window
            tab.close();
        });
});
于 2020-02-24T20:45:02.790 回答
0

我使用这种方法：

  1. 重定向到同一页面，并将下载 url 添加为参数：
window.location.href = window.location.protocol + '//' +
                    window.location.host + window.location.pathname +
                    "?download=" + encodeURIComponent(urlToDownload)
  1. 在页面初始化时检测此参数并重定向到下载：
function param(name){
    var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if (!results) { return 0; }
    return results[1] || 0;
}

var downloadParam = param('download');
if (downloadParam) {
    window.location = decodeURIComponent(downloadParam);
}
于 2017-07-09T13:24:10.903 回答