Deteksi popup yang diblokir di Chrome

Saya mengetahui teknik javascript untuk mendeteksi apakah munculan diblokir di browser lain (seperti yang dijelaskan dalam jawaban atas pertanyaan ini ). Inilah tes dasarnya:

var newWin = window.open(url);

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

Tetapi ini tidak berfungsi di Chrome. Bagian "POPUP BLOCKED" tidak pernah dicapai saat popup diblokir.

Tentu saja, pengujian ini bekerja karena Chrome tidak benar-benar memblokir popup, tetapi membukanya di jendela kecil yang diperkecil di sudut kanan bawah yang mencantumkan popup "diblokir".

Yang ingin saya lakukan adalah mengetahui apakah popup diblokir oleh pemblokir popup Chrome. Saya mencoba untuk menghindari browser sniffing yang mendukung deteksi fitur. Adakah cara untuk melakukan ini tanpa mengendus browser?

Mengedit : Saya sekarang mencoba membuat penggunaan newWin.outerHeight, newWin.leftdan sifat-sifat serupa lainnya untuk mencapai hal ini. Google Chrome mengembalikan semua nilai posisi dan ketinggian sebagai 0 saat popup diblokir.

Sayangnya, itu juga mengembalikan nilai yang sama meskipun popup sebenarnya dibuka untuk jangka waktu yang tidak diketahui. Setelah beberapa periode ajaib (beberapa detik dalam pengujian saya), informasi lokasi dan ukuran dikembalikan sebagai nilai yang benar. Dengan kata lain, saya masih belum bisa memahami hal ini. Bantuan apa pun akan dihargai.

Nah, "waktu ajaib" yang Anda bicarakan mungkin adalah ketika DOM munculan telah dimuat. Atau mungkin juga ketika semuanya (gambar, CSS tempel, dll.) Telah dimuat. Anda dapat menguji ini dengan mudah dengan menambahkan grafik yang sangat besar ke popup (bersihkan cache Anda terlebih dahulu!). Jika Anda menggunakan Javascript Framework seperti jQuery (atau yang serupa), Anda dapat menggunakan event ready () (atau yang serupa) untuk menunggu DOM dimuat sebelum memeriksa offset jendela. Bahayanya adalah deteksi Safari bekerja dengan cara yang bertentangan: DOM popup tidak akan pernah siap () di Safari karena ini akan memberi Anda pegangan yang valid untuk jendela yang Anda coba buka - apakah itu benar-benar terbuka atau tidak. (faktanya, saya yakin kode pengujian popup Anda di atas tidak akan berfungsi untuk safari.)

Saya pikir hal terbaik yang dapat Anda lakukan adalah membungkus pengujian Anda dalam setTimeout () dan memberikan popup 3-5 detik untuk menyelesaikan pemuatan sebelum menjalankan pengujian. Ini tidak sempurna, tetapi harus berhasil setidaknya 95% dari waktu.

Berikut kode yang saya gunakan untuk deteksi lintas-browser, tanpa bagian Chrome.

function _hasPopupBlocker(poppedWindow) {
    var result = false;

    try {
        if (typeof poppedWindow == 'undefined') {
            // Safari with popup blocker... leaves the popup window handle undefined
            result = true;
        }
        else if (poppedWindow && poppedWindow.closed) {
            // This happens if the user opens and closes the client window...
            // Confusing because the handle is still available, but it's in a "closed" state.
            // We're not saying that the window is not being blocked, we're just saying
            // that the window has been closed before the test could be run.
            result = false;
        }
        else if (poppedWindow && poppedWindow.test) {
            // This is the actual test. The client window should be fine.
            result = false;
        }
        else {
            // Else we'll assume the window is not OK
            result = true;
        }

    } catch (err) {
        //if (console) {
        //    console.warn("Could not access popup window", err);
        //}
    }

    return result;
}

Apa yang saya lakukan adalah menjalankan tes ini dari induk dan membungkusnya dalam setTimeout (), memberikan jendela anak 3-5 detik untuk dimuat. Di jendela anak, Anda perlu menambahkan fungsi pengujian:

uji fungsi () {}

Detektor pemblokir popup menguji apakah fungsi "test" ada sebagai anggota jendela anak.

DITAMBAHKAN 15 JUNI 2015:

Saya pikir cara modern untuk menangani ini akan menggunakan window.postMessage () agar anak memberi tahu orang tua bahwa jendela telah dimuat. Pendekatannya serupa (anak memberi tahu orang tua bahwa itu dimuat), tetapi sarana komunikasi telah meningkat. Saya dapat melakukan ini lintas-domain dari anak:

$(window).load(function() {
  this.opener.postMessage({'loaded': true}, "*");
  this.close();
});

Orang tua mendengarkan pesan ini menggunakan:

$(window).on('message', function(event) {     
  alert(event.originalEvent.data.loaded)
}); 

Semoga ini membantu.

Hanya satu peningkatan pada snipet InvisibleBacon (diuji di IE9, Safari 5, Chrome 9 dan FF 3.6):

var myPopup = window.open("popupcheck.htm", "", "directories=no,height=150,width=150,menubar=no,resizable=no,scrollbars=no,status=no,titlebar=no,top=0,location=no");
if (!myPopup)
    alert("failed for most browsers");
else {
    myPopup.onload = function() {
        setTimeout(function() {
            if (myPopup.screenX === 0) {
                alert("failed for chrome");
            } else {
                // close the test window if popups are allowed.
                myPopup.close();  
            }
        }, 0);
    };
}

Berikut ini adalah solusi jQuery untuk memeriksa pemblokir popup. Ini telah diuji di FF (v11), Safari (v6), Chrome (v23.0.127.95) & IE (v7 & v9). Perbarui fungsi _displayError untuk menangani pesan kesalahan sesuai keinginan Anda.

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! :)

Jawaban Rich tidak akan berfungsi lagi untuk Chrome. Sepertinya Chrome benar-benar menjalankan Javascript apa pun di jendela popup sekarang. Saya akhirnya memeriksa nilai screenX 0 untuk memeriksa popup yang diblokir. Saya juga berpikir saya menemukan cara untuk menjamin bahwa properti ini sudah final sebelum diperiksa. Ini hanya berfungsi untuk munculan di domain Anda, tetapi Anda dapat menambahkan penangan onload seperti ini:

var myPopup = window.open("site-on-my-domain", "screenX=100");
if (!myPopup)
    alert("failed for most browsers");
else {
    myPopup.onload = function() {
        setTimeout(function() {
            if (myPopup.screenX === 0)
                alert("failed for chrome");
        }, 0);
    };
}

Seperti yang telah dilaporkan banyak orang, properti "screenX" terkadang melaporkan bukan nol untuk munculan yang gagal, bahkan setelah dimuat. Saya mengalami perilaku ini juga, tetapi jika Anda menambahkan centang setelah waktu tunggu nol ms, properti screenX sepertinya selalu mengeluarkan nilai yang konsisten.

Beri tahu saya jika ada cara untuk membuat skrip ini lebih kuat. Sepertinya bekerja untuk tujuan saya.

Ini berhasil untuk saya:

    cope.PopupTest.params = 'height=1,width=1,left=-100,top=-100,location=no,toolbar=no,menubar=no,scrollbars=no,resizable=no,directories=no,status=no';
    cope.PopupTest.testWindow = window.open("popupTest.htm", "popupTest", cope.PopupTest.params);

    if( !cope.PopupTest.testWindow
        || cope.PopupTest.testWindow.closed
        || (typeof cope.PopupTest.testWindow.closed=='undefined')
        || cope.PopupTest.testWindow.outerHeight == 0
        || cope.PopupTest.testWindow.outerWidth == 0
        ) {
        // pop-ups ARE blocked
        document.location.href = 'popupsBlocked.htm';
    }
    else {
        // pop-ups are NOT blocked
        cope.PopupTest.testWindow.close();
    }

OuterHeight dan outerWidth adalah untuk chrome karena trik 'about: blank' dari atas tidak berfungsi di chrome lagi.

Saya hanya akan menyalin / menempel jawaban yang disediakan di sini: https://stackoverflow.com/a/27725432/892099 oleh DanielB. bekerja pada chrome 40 dan sangat bersih. tidak ada hacks kotor atau menunggu melibatkan.

function popup(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.");
  }
}

Bagaimana dengan Promisependekatan?

const openPopUp = (...args) => new Promise(s => {
  const win = window.open(...args)
  if (!win || win.closed) return s()
  setTimeout(() => (win.innerHeight > 0 && !win.closed) ? s(win) : s(), 200)
})

Dan Anda bisa menggunakannya seperti klasik window.open

const win = await openPopUp('popuptest.htm', 'popuptest')
if (!win) {
  // popup closed or blocked, handle alternative case
}

Anda dapat mengubah kode sehingga gagal janji alih-alih kembali undefined, saya hanya berpikir itu ifadalah aliran kontrol yang lebih mudah daripada try / catchuntuk kasus ini.

Periksa posisi jendela relatif terhadap induknya. Chrome membuat jendela muncul hampir di luar layar.

Saya mengalami masalah serupa dengan munculan yang tidak terbuka di Chrome. Saya frustrasi karena saya tidak mencoba melakukan sesuatu yang licik, seperti munculan yang memuat, hanya membuka jendela saat pengguna mengeklik. Saya sangat frustrasi karena menjalankan fungsi saya yang menyertakan window.open () dari baris perintah firebug berfungsi, sementara sebenarnya mengklik tautan saya tidak! Inilah solusi saya:

Salah jalan: menjalankan window.open () dari event listener (dalam kasus saya, dojo.connect ke metode event onclick dari node DOM).

dojo.connect(myNode, "onclick", function() {
    window.open();
}

Cara yang benar: menetapkan fungsi ke properti onclick dari node yang disebut window.open ().

myNode.onclick = function() {
    window.open();
}

Dan, tentu saja, saya masih bisa melakukan pendengar acara untuk acara onclick yang sama jika perlu. Dengan perubahan ini, saya dapat membuka jendela saya meskipun Chrome disetel ke "Jangan izinkan situs apa pun menampilkan munculan". Kegembiraan.

Jika ada yang bijak dalam cara Chrome dapat memberi tahu kita semua mengapa hal itu membuat perbedaan, saya ingin mendengarnya, meskipun saya curiga itu hanya upaya untuk menutup pintu pada sembulan terprogram yang berbahaya.

Ini adalah versi yang saat ini berfungsi di Chrome. Hanya sedikit perubahan dari solusi Rich, meskipun saya menambahkan pembungkus yang menangani waktu juga.

function checkPopupBlocked(poppedWindow) {
 setTimeout(function(){doCheckPopupBlocked(poppedWindow);}, 5000);
}

function doCheckPopupBlocked(poppedWindow) {

    var result = false;

    try {
        if (typeof poppedWindow == 'undefined') {
            // Safari with popup blocker... leaves the popup window handle undefined
            result = true;
        }
        else if (poppedWindow && poppedWindow.closed) {
            // This happens if the user opens and closes the client window...
            // Confusing because the handle is still available, but it's in a "closed" state.
            // We're not saying that the window is not being blocked, we're just saying
            // that the window has been closed before the test could be run.
            result = false;
        }
        else if (poppedWindow && poppedWindow.outerWidth == 0) {
            // This is usually Chrome's doing. The outerWidth (and most other size/location info)
         // will be left at 0, EVEN THOUGH the contents of the popup will exist (including the
         // test function we check for next). The outerWidth starts as 0, so a sufficient delay
         // after attempting to pop is needed.
            result = true;
        }
        else if (poppedWindow && poppedWindow.test) {
            // This is the actual test. The client window should be fine.
            result = false;
        }
        else {
            // Else we'll assume the window is not OK
            result = true;
        }

    } catch (err) {
        //if (console) {
        //    console.warn("Could not access popup window", err);
        //}
    }

    if(result)
     alert("The popup was blocked. You must allow popups to use this site.");
}

Untuk menggunakannya, lakukan ini:

var popup=window.open('location',etc...);
checkPopupBlocked(popup);

Jika popup diblokir, pesan peringatan akan ditampilkan setelah masa tenggang 5 detik (Anda dapat menyesuaikannya, tetapi 5 detik seharusnya cukup aman).

Fragmen ini menggabungkan semua hal di atas - Untuk beberapa alasan - StackOverflow mengecualikan baris pertama dan terakhir kode di blok kode di bawah ini, jadi saya menulis blog tentang itu. Untuk penjelasan lengkap dan kode (yang dapat diunduh) lainnya, lihat blog saya di thecodeabode.blogspot.com

var PopupWarning = {

    init : function()
    {

        if(this.popups_are_disabled() == true)
        {
            this.redirect_to_instruction_page();
        }
    },

    redirect_to_instruction_page : function()
    {
        document.location.href = "http://thecodeabode.blogspot.com";
    },

    popups_are_disabled : function()
    {
        var popup = window.open("http://localhost/popup_with_chrome_js.html", "popup_tester", "width=1,height=1,left=0,top=0");

        if(!popup || popup.closed || typeof popup == 'undefined' || typeof popup.closed=='undefined')
        {
            return true;
        }

        window.focus();
        popup.blur();

        //
        // Chrome popup detection requires that the popup validates itself - so we need to give
        // the popup time to load, then call js on the popup itself
        //
        if(navigator && (navigator.userAgent.toLowerCase()).indexOf("chrome") > -1)
        {
            var on_load_test = function(){PopupWarning.test_chrome_popups(popup);};     
            var timer = setTimeout(on_load_test, 60);
            return;
        }


        popup.close();
        return false;
    },

    test_chrome_popups : function(popup)
    {
        if(popup && popup.chrome_popups_permitted && popup.chrome_popups_permitted() == true)
        {
            popup.close();
            return true;
        }

        //
        // If the popup js fails - popups are blocked
        //
        this.redirect_to_instruction_page();
    }
};

PopupWarning.init();

Wah pasti ada banyak solusi disini. Ini milik saya, ini menggunakan solusi yang diambil dari jawaban yang diterima saat ini (yang tidak berfungsi di Chrome terbaru dan perlu membungkusnya dalam batas waktu), serta solusi terkait di utas ini (yang sebenarnya adalah vanilla JS, bukan jQuery) .

Milik saya menggunakan arsitektur panggilan balik yang akan dikirim trueketika popup diblokir dan falsesebaliknya.

window.isPopupBlocked = function(popup_window, cb)
{
    var CHROME_CHECK_TIME = 2000;       // the only way to detect this in Chrome is to wait a bit and see if the window is present

    function _is_popup_blocked(popup)
    {
        return !popup.innerHeight;
    }

    if (popup_window) {
        if (popup_window.closed) {
            // opened OK but was closed before we checked
            cb(false);
            return;
        }
        if (/chrome/.test(navigator.userAgent.toLowerCase())) {
            // wait a bit before testing the popup in chrome
            setTimeout(function() {
                cb(_is_popup_blocked(popup_window));
            }, CHROME_CHECK_TIME);
        } else {
            // for other browsers, add an onload event and check after that
            popup_window.onload = function() {
                cb(_is_popup_blocked(popup_window));
            };
        }
    } else {
        cb(true);
    }
};

Jawaban Jason adalah satu-satunya metode yang dapat saya pikirkan juga, tetapi mengandalkan posisi seperti itu agak cerdik!

Saat ini, Anda tidak perlu mengajukan pertanyaan “apakah popup saya yang tidak diminta diblokir?”, Karena jawabannya selalu “ya” - semua browser utama mengaktifkan pemblokir popup secara default. Pendekatan terbaik hanya untuk window.open () sebagai respons terhadap klik langsung, yang hampir selalu diizinkan.

HAI

Saya sedikit memodifikasi solusi yang dijelaskan di atas dan berpikir bahwa itu berfungsi untuk Chrome setidaknya. Solusi saya dibuat untuk mendeteksi jika popup diblokir ketika halaman utama dibuka, bukan ketika popup dibuka, tetapi saya yakin ada beberapa orang yang dapat memodifikasinya. :-) Kekurangannya di sini adalah jendela popup yang ditampilkan selama beberapa detik (mungkin bisa sedikit dipersingkat) saat tidak ada pemblokir popup.

Saya meletakkan ini di bagian jendela 'utama' saya

<script type="text/JavaScript" language="JavaScript">

 var mine = window.open('popuptest.htm','popuptest','width=1px,height=1px,left=0,top=0,scrollbars=no');
 if(!mine|| mine.closed || typeof mine.closed=='undefined')
  {
    popUpsBlocked = true       
    alert('Popup blocker detected ');
    if(mine)
      mine.close();
 }
 else
 {
    popUpsBlocked = false    
    var cookieCheckTimer = null;
    cookieCheckTimer =  setTimeout('testPopup();', 3500);
 }


function testPopup()
{
  if(mine)
  {
    if(mine.test())
    {
       popUpsBlocked = false;
    }
    else
    {
        alert('Popup blocker detected ');
         popUpsBlocked = true;
     }
    mine.close();
}

} 
</script>

Popuptest terlihat seperti ini:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Popup test</title>
<script type="text/javascript" language="Javascript">
   function test() {if(window.innerHeight!=0){return true;} else return false;}
</script>
</head>

<body>
</body>
</html>

Saat saya memanggil fungsi uji pada halaman popup setelah 3500 ms, ketinggian dalam telah disetel dengan benar oleh Chrome.

Saya menggunakan variabel popUpsBlocked untuk mengetahui apakah popup ditampilkan atau tidak di javascript lain. yaitu

function ShowConfirmationMessage()
{
if(popUpsBlocked)
 { 
  alert('Popups are blocked, can not display confirmation popup. A mail will be sent with the confirmation.');
 } 
 else
 { 
  displayConfirmationPopup();
 }
 mailConfirmation();
}

function openPopUpWindow(format)
{   
    var win = window.open('popupShow.html',
                          'ReportViewer',
                          'width=920px,height=720px,left=50px,top=20px,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=1,maximize:yes,scrollbars=0');

    if (win == null || typeof(win) == "undefined" || (win == null && win.outerWidth == 0) || (win != null && win.outerHeight == 0) || win.test == "undefined") 
    {
        alert("The popup was blocked. You must allow popups to use this site.");  
    }
    else if (win)
    {
        win.onload = function()
        {          
            if (win.screenX === 0) {
                alert("The popup was blocked. You must allow popups to use this site.");
                win.close();
            } 
        };
    }
}

Sejauh yang saya tahu (dari apa yang telah saya uji) Chrome mengembalikan objek jendela dengan lokasi 'about: blank'. Jadi, berikut ini seharusnya berfungsi untuk semua browser:

var newWin = window.open(url);
if(!newWin || newWin.closed || typeof newWin.closed=='undefined' || newWin.location=='about:blank')
{
    //POPUP BLOCKED
}