Bagaimana saya bisa mendeteksi jika browser memblokir popup?

Kadang-kadang, saya menemukan halaman web yang mencoba membuka jendela baru (untuk input pengguna, atau sesuatu yang penting), tetapi pemblokir popup mencegah hal ini terjadi.

Metode apa yang dapat digunakan jendela panggilan untuk memastikan jendela baru diluncurkan dengan benar?

Jika Anda menggunakan JavaScript untuk membuka sembulan, Anda dapat menggunakan sesuatu seperti ini:

var newWin = window.open(url);             

if(!newWin || newWin.closed || typeof newWin.closed=='undefined') 
{ 
    //POPUP BLOCKED
}

Saya mencoba beberapa contoh di atas, tetapi saya tidak bisa membuatnya bekerja dengan Chrome. Pendekatan sederhana ini tampaknya bekerja dengan Chrome 39, Firefox 34, Safari 5.1.7, dan IE 11. Ini adalah potongan kode dari perpustakaan JS kami.

openPopUp: function(urlToOpen) {
    var popup_window=window.open(urlToOpen,"myWindow","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=yes, width=400, height=400");            
    try {
        popup_window.focus();   
    } catch (e) {
        alert("Pop-up Blocker is enabled! Please add this site to your exception list.");
    }
}

Pembaruan: Popup ada dari zaman yang sangat kuno. Gagasan awal adalah menampilkan konten lain tanpa menutup jendela utama. Sampai sekarang, ada cara lain untuk melakukan itu: JavaScript dapat mengirim permintaan ke server, sehingga popup jarang digunakan. Namun terkadang mereka masih berguna.

Di masa lalu situs jahat popups banyak disalahgunakan. Halaman yang buruk bisa membuka banyak jendela sembul dengan iklan. Jadi sekarang sebagian besar peramban mencoba memblokir popup dan melindungi pengguna.

Sebagian besar browser memblokir popup jika mereka dipanggil di luar event handler yang dipicu pengguna seperti onclick.

Jika Anda memikirkannya, itu agak sulit. Jika kodenya secara langsung ada di handler onclick, maka itu mudah. Tetapi popup apa yang terbuka di setTimeout?

Coba kode ini:

 // open after 3 seconds
setTimeout(() => window.open('http://google.com'), 3000);

Munculan terbuka di Chrome, tetapi diblokir di Firefox.

... Dan ini juga berfungsi di Firefox:

 // open after 1 seconds
setTimeout(() => window.open('http://google.com'), 1000);

Perbedaannya adalah bahwa Firefox memperlakukan batas waktu 2000 ms atau kurang dapat diterima, tetapi setelah itu - menghapus "kepercayaan", dengan asumsi bahwa sekarang ini "di luar tindakan pengguna". Jadi yang pertama diblokir, dan yang kedua tidak.

Jawaban asli yang terkini 2012:

Solusi ini untuk memeriksa pemblokir popup telah diuji dalam FF (v11), Safari (v6), Chrome (v23.0.127.95) & IE (v7 & v9). Perbarui fungsi displayError untuk menangani pesan kesalahan yang Anda inginkan.

var popupBlockerChecker = {
    check: function(popup_window){
        var scope = this;
        if (popup_window) {
            if(/chrome/.test(navigator.userAgent.toLowerCase())){
                setTimeout(function () {
                    scope.is_popup_blocked(scope, popup_window);
                },200);
            }else{
                popup_window.onload = function () {
                    scope.is_popup_blocked(scope, popup_window);
                };
            }
        } else {
            scope.displayError();
        }
    },
    is_popup_blocked: function(scope, popup_window){
        if ((popup_window.innerHeight > 0)==false){ 
            scope.displayError();
        }
    },
    displayError: function(){
       alert("Popup Blocker is enabled! Please add this site to your exception list.");
    }
};

Pemakaian:

var popup = window.open("http://www.google.ca", '_blank');
popupBlockerChecker.check(popup);

Semoga ini membantu! :)

Salah satu "solusi" yang akan selalu berfungsi terlepas dari perusahaan atau versi peramban adalah dengan cukup menaruh pesan peringatan di layar, di suatu tempat dekat dengan kontrol yang akan membuat pop-up, yang dengan sopan memperingatkan pengguna bahwa tindakan memerlukan pop-up dan untuk mengaktifkannya untuk situs tersebut.

Saya tahu ini tidak mewah atau apa pun, tetapi tidak bisa lebih sederhana dan hanya membutuhkan sekitar 5 menit pengujian, maka Anda dapat beralih ke mimpi buruk lainnya.

Setelah pengguna mengizinkan pop-up untuk situs Anda, itu juga akan menjadi pertimbangan jika Anda tidak berlebihan pop-up. Hal terakhir yang ingin Anda lakukan adalah mengganggu pengunjung Anda.

Saya menggabungkan solusi @Kevin B dan @ DanielB.
Ini jauh lebih sederhana.

var isPopupBlockerActivated = function(popupWindow) {
    if (popupWindow) {
        if (/chrome/.test(navigator.userAgent.toLowerCase())) {
            try {
                popupWindow.focus();
            } catch (e) {
                return true;
            }
        } else {
            popupWindow.onload = function() {
                return (popupWindow.innerHeight > 0) === false;
            };
        }
    } else {
        return true;
    }
    return false;
};

Pemakaian:

var popup = window.open('https://www.google.com', '_blank');
if (isPopupBlockerActivated(popup)) {
    // Do what you want.
}

Saya sudah mencoba banyak solusi, tetapi satu-satunya yang bisa saya gunakan yang juga bekerja dengan uBlock Origin, adalah dengan menggunakan batas waktu untuk memeriksa status popup yang tertutup.

function popup (url, width, height) {
    const left = (window.screen.width / 2) - (width / 2)
    const top = (window.screen.height / 2) - (height / 2)
    let opener = window.open(url, '', `menubar=no, toolbar=no, status=no, resizable=yes, scrollbars=yes, width=${width},height=${height},top=${top},left=${left}`)

    window.setTimeout(() => {
        if (!opener || opener.closed || typeof opener.closed === 'undefined') {
            console.log('Not allowed...') // Do something here.
        }
    }, 1000)
}

Jelas ini adalah hack; seperti semua solusi untuk masalah ini.

Anda perlu menyediakan waktu yang cukup di setTimeout Anda untuk memperhitungkan pembukaan dan penutupan awal, sehingga tidak akan pernah sepenuhnya akurat. Ini akan menjadi posisi coba-coba.

Tambahkan ini ke daftar upaya Anda.

Pendekatan sederhana jika Anda memiliki kode anak juga, akan membuat variabel sederhana dalam html-nya seperti di bawah ini:

    <script>
        var magicNumber = 49;
    </script>

Dan kemudian periksa keberadaannya dari induknya sesuatu yang mirip dengan berikut:

    // Create the window with login URL.
    let openedWindow = window.open(URL_HERE);

    // Check this magic number after some time, if it exists then your window exists
    setTimeout(() => {
        if (openedWindow["magicNumber"] !== 32) {
            console.error("Window open was blocked");
        }
    }, 1500);

Kami menunggu beberapa saat untuk memastikan bahwa halaman web telah dimuat, dan memeriksa keberadaannya. Jelas, jika jendela tidak memuat setelah 1500ms maka variabel akan tetap undefined.

Dengan menggunakan onbeforeunload acara, kami dapat memeriksa sebagai berikut

    function popup()
    {
        var chk=false;
        var win1=window.open();
        win1.onbeforeunload=()=>{
            var win2=window.open();
            win2.onbeforeunload=()=>{
                chk=true;
            };
        win2.close();
        };
        win1.close();
        return chk;
    }

itu akan membuka 2 jendela hitam di latar belakang

fungsi mengembalikan nilai boolean.