Javascript 如何防止 Google Chrome 阻止我的弹出窗口？

How do I prevent Google Chrome from blocking my popup?

提问by Aistina

On my website there is a button that just used to call a function that calls window.open, however, recently an adjustment was needed to do a server-side check before the popup was opened.

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

Ever since the code was added that does the AJAX call, browsers blocks the popup, that is opened in the successcallback of the AJAX call. I read that browsers might block the popup if it's not called by a user click event, so I tried setting the AJAX request to async: false, which solved the problem in Firefox, but Google Chrome still keeps blocking my popup. Is there any way to get around this?

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

I could move the server-side check to the page that gets opened in the popup, but I'd like to do it before opening the popup, if possible.

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

Code:

代码：

<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>

Example response body:

示例响应正文：

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

回答by Emil Ivanov

Yes, popups should be a direct result of a user action. Doing them in ajax callback will not do the trick. Also, using async:falseis bad - in FF it is known to block the whole browser. Think of some other way to do the check:

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

• it could be the first thing you do in the popup
• you can open the popup on click and manipulate it later when the callback fires
• you can require the user to click again some button to trigger the popup (probably the worst solution)
• you can do it on page load

• 这可能是你在弹出窗口中做的第一件事
• 您可以在单击时打开弹出窗口并稍后在回调触发时对其进行操作
• 您可以要求用户再次单击某个按钮以触发弹出窗口（可能是最糟糕的解决方案）
• 您可以在页面加载时执行此操作

回答by gabe

Following up on Emil's excellent answer, "you can open the popup on click and manipulate it later when the callback fires". I used this implementation.

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

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

New code here

新代码在这里

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

end new code

结束新代码

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

    return false;
});

回答by Cooper M.

You can open a window that is not blocked just under the onclick event, if you open it on ajax call it is considered popup. However I used this method with success for some time to open a popup and not be blocked.

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

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

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

回答by David

In my case the window.openwas launched inside a promisein angular, which turned the popup blocker on, my solution was:

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

$scope.gotClick = function(){

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

browserService:

浏览器服务：

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

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

this is how you can open a new tab using the promiseresponse and not invoking the popup blocker.

这就是您如何使用promise响应打开新选项卡而不调用弹出窗口阻止程序。

回答by Fedir Tsapana

I use this method:

我用这个方法：

1. Redirect to the same page with download url added as parameter:

1. 重定向到添加了下载 url 作为参数的同一页面：

window.location.href = window.location.protocol + '//' +
                    window.location.host + window.location.pathname +
                    "?download=" + encodeURIComponent(urlToDownload)

1. Detect this parameter on page initialization and redirect to download:

2. 在页面初始化时检测此参数并重定向下载：

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);
}

回答by attacomsian

Here is a vanilla JavaScript solution, I am using for one of my websites, to bypass the popup blocker in Chrome.

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

Let us say we have the following HTML button:

假设我们有以下 HTML 按钮：

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

Now when the user clicks on the button, the first thing you should do is open an empty new window. After the Fetchrequest is finished, update the actual window URL. If the request fails, simply close the window:

现在，当用户单击按钮时，您应该做的第一件事就是打开一个空的新窗口。在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();
        });
});

回答by Gilad F

The previous solution did not work for me, but I based on it and used named window.

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

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();
        }
})