web-dev-qa-db-fra.com

Comment puis-je empêcher Google Chrome de bloquer ma fenêtre contextuelle?

Sur mon site Web, il y a un bouton qui vient d'appeler une fonction qui appelle window.open, cependant, un ajustement a récemment été nécessaire pour effectuer une vérification côté serveur avant l'ouverture de la fenêtre contextuelle.

Depuis l'ajout du code qui fait l'appel AJAX, les navigateurs bloquent la fenêtre contextuelle, qui est ouverte dans le rappel success du AJAX J'ai lu que les navigateurs pouvaient bloquer la fenêtre contextuelle si elle n'était pas appelée par un événement de clic utilisateur, j'ai donc essayé de définir la demande AJAX sur async: false, qui a résolu le problème dans Firefox, mais Google Chrome continue de bloquer ma fenêtre contextuelle. Existe-t-il un moyen de contourner ce problème?

Je pourrais déplacer la vérification côté serveur vers la page qui s'ouvre dans le popup, mais j'aimerais le faire avant d'ouvrir le popup, si 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>

Exemple de corps de réponse:

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

Oui, les popups doivent être le résultat direct d'une action de l'utilisateur. Les faire en rappel ajax ne fera pas l'affaire. De plus, en utilisant async:false est mauvais - dans FF, il est connu de bloquer tout le navigateur. Pensez à une autre façon de faire le contrôle:

  • cela pourrait être la première chose que vous faites dans le popup
  • vous pouvez ouvrir la fenêtre contextuelle en cliquant dessus et la manipuler plus tard lorsque le rappel se déclenche
  • vous pouvez demander à l'utilisateur de cliquer à nouveau sur un bouton pour déclencher la fenêtre contextuelle (probablement la pire solution)
  • vous pouvez le faire au chargement de la page
46
Emil Ivanov

Suite à l'excellente réponse d'Emil, "vous pouvez ouvrir la fenêtre contextuelle en un clic et la manipuler plus tard lorsque le rappel se déclenche". J'ai utilisé cette implémentation.

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

Nouveau code ici

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

mettre fin au nouveau 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;
});
20
gabe

Vous pouvez ouvrir une fenêtre qui n'est pas bloquée juste sous l'événement onclick, si vous l'ouvrez lors d'un appel ajax, elle est considérée comme popup. Cependant, j'ai utilisé cette méthode avec succès pendant un certain temps pour ouvrir un popup et ne pas être bloqué.

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

6
Cooper M.

Dans mon cas, le window.open a été lancé dans un promise en angulaire, ce qui a activé le bloqueur de popup, ma solution était:

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

c'est ainsi que vous pouvez ouvrir un nouvel onglet en utilisant la réponse promise et sans invoquer le bloqueur de popups.

2
David

J'utilise cette méthode:

  1. Redirigez vers la même page avec l'URL de téléchargement ajoutée comme paramètre:
window.location.href = window.location.protocol + '//' +
                    window.location.Host + window.location.pathname +
                    "?download=" + encodeURIComponent(urlToDownload)
  1. Détectez ce paramètre lors de l'initialisation de la page et redirigez-le vers le téléchargement:
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);
}
0
Fedir Tsapana

La solution précédente ne fonctionnait pas pour moi, mais je me suis basée dessus et j'ai utilisé la fenêtre nommée.

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