Détecter l'interception d'un pop-up par un navigateur

Depuis quelques années, nos chers navigateurs nous protègent des pop-ups intrusives. On ne va pas s'en plaindre ! Seulement, les développeurs que nous sommes ont parfois besoin d'utiliser ces pop-ups au sein de leurs applications. Dans ce cas, l'interception est pénalisante et rarement clairement indiquée à nos utilisateurs. Voici donc une petite astuce pour déceler le blocage des pop-ups et, tant que nous y sommes, faire un peu de broderie pour rendre le tout plus clair esthétiquement et utile fonctionnellement.

Les navigateurs modernes bloquent l'affichage des fenêtres qu'ils jugent intrusives, c'est à dire celles qui s'ouvrent automatiquement par un script sans la demande express de l'utilisateur. Si votre navigateur possède l'un de ces bloqueurs de pop-ups activé, vous devriez voir une alerte dans une bande noire traversant la page.

Déceler un blocage

Même si les navigateurs s'efforcent d'indiquer le blocage exercé, c'est plutôt discret (particulièrement Safari) et gagez que beaucoup d'utilisateurs n'auront rien vu.

Il faut donc l'indiquer plus clairement à l'aide de Javascript.

Idée de base

popup = window.open('http://www.google.com', 'popup', 'width=600, height=480, toolbar=0'); 
if (!popup) {
    alert("Un Pop-up a été bloqué");
}

Ici, l'idée est simple. On ouvre une fenêtre en Javascript et on teste ensuite si elle existe bien. Si elle n'existe pas, c'est qu'elle n'a pu s'ouvrir et qu'un navigateur l'a bloquée. Voyons maintenant comment valoriser ce bout de code pour en faire quelque chose de plus web2.0 et d'être sûr que notre public ne manquera pas notre fenêtre.

Une annonce claire

Il n'est pas question de forcer l'apparition du pop-up, nous n'en avons de toute façon pas les moyens. Nous nous contentons de déceler si la pop-up a été bloquée puis d'en informer clairement l'utilisateur tout en lui offrant un lien pour l'ouvrir manuellement.

Idée développée

/**  
 * Détecter l'interception d'un pop-up par un navigateur
 * par Jay Salvat - http://blog.jaysalvat.com/  
 */ 
var alertBox;
// fonction qui ouvre un pop-up
function openWindow() {
    if (alertBox) {
        document.body.removeChild(alertBox);
    }
    // Ouvre et renvoi le statut de la fenetre :
    // True si elle s'est ouverte
    // False si elle est interceptée
    return window.open("http://google.com", "popup", "width=600, height=480, toolbar=0");
}
function openMyPopup() {
    if (!openWindow()) {
        // Texte de l'alerte 
        text  = "Une fenêtre importante a été bloquée par votre navigateur.<br />";
        text += "Veuillez désactiver votre bloqueur de pop-ups ";
        text += "ou <a href='#' onclick='openWindow();return false;'>";
        text += "cliquez ici pour l'ouvrir à nouveau</a>.";
        // Création de l'alerte par manipulation du DOM
        alertBox = document.createElement("div");
        alertBox.setAttribute("id", "alertBox");
        alertBox.innerHTML = text;
        document.body.appendChild(alertBox);
    } 
}
// Lance le tout au chargement de la page
window.onload = openMyPopup;

Un peu de mise en forme

Ensuite, il ne reste plus qu'à façonner le tout avec un peu de CSS. J'ai fait le choix d'un positionnement en surimpression à mi-hauteur de page grâce à un position:absolute et un positionnement à top:50% mais libre à vous d'afficher l'alerte à votre convenance. Un affichage en haut de page, généralement sous la petite barre d'alerte de blocage du navigateur est aussi intéressante.

Mise en forme CSS

#alertBox {
    /* Texte de l'alerte */
    font:20px Georgia, "Times New Roman", Times, serif;
    text-align:center;
    color:#FFF; 

    /* Forme de l'alerte */
    width:100%; padding:30px;
    background:#000; 
    border-top:3px solid #CCC;
    border-bottom:3px solid #CCC;

    /* Placement de l'alerte */
    position:absolute;
    left:0px; top:50%;
    margin-top:-65px;

    /* Transparence pour les différents navigateurs */
    filter:alpha(opacity=90); 
    -moz-opacity:0.9; 
    opacity:0.9; 
}
#alertBox a {
    color:#CF6;
    text-decoration:none;
}

Conclusion

Notre alerte est maintenant en place et nos utilisateurs clairement informés du blocage d'une fenêtre importante.
Note : Opera ne déroulera pas le script comme prévu.