Phát hiện cửa sổ bật lên bị chặn trong Chrome

Tôi biết các kỹ thuật javascript để phát hiện xem cửa sổ bật lên có bị chặn trong các trình duyệt khác hay không (như được mô tả trong câu trả lời cho câu hỏi này ). Đây là bài kiểm tra cơ bản:

var newWin = window.open(url);

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

Nhưng điều này không hoạt động trong Chrome. Không bao giờ truy cập được phần "POPUP BLOCKED" khi cửa sổ bật lên bị chặn.

Tất nhiên, thử nghiệm đang hoạt động ở một mức độ nào đó vì Chrome không thực sự chặn cửa sổ bật lên, nhưng mở nó trong một cửa sổ được thu nhỏ nhỏ ở góc dưới bên phải, nơi liệt kê các cửa sổ bật lên "bị chặn".

Điều tôi muốn làm là có thể biết liệu cửa sổ bật lên có bị chặn bởi trình chặn cửa sổ bật lên của Chrome hay không. Tôi cố gắng tránh sự dòm ngó của trình duyệt để có lợi cho việc phát hiện tính năng. Có cách nào để làm điều này mà không bị trình duyệt đánh hơi không?

Chỉnh sửa : Bây giờ tôi đã cố gắng sử dụng lập newWin.outerHeight, newWin.leftvà tính chất tương tự khác để thực hiện điều này. Google Chrome trả về tất cả các giá trị vị trí và chiều cao là 0 khi cửa sổ bật lên bị chặn.

Thật không may, nó cũng trả về các giá trị tương tự ngay cả khi cửa sổ bật lên thực sự được mở trong một khoảng thời gian không xác định. Sau một khoảng thời gian kỳ diệu (vài giây trong thử nghiệm của tôi), thông tin vị trí và kích thước được trả về dưới dạng các giá trị chính xác. Nói cách khác, tôi vẫn chưa hiểu ra điều này. Bất kỳ trợ giúp sẽ được đánh giá cao.

Vâng, "thời gian kỳ diệu" mà bạn nói đến có lẽ là khi DOM của cửa sổ bật lên đã được tải. Hoặc có thể là khi mọi thứ (hình ảnh, CSS bên ngoài, v.v.) đã được tải xong. Bạn có thể kiểm tra điều này một cách dễ dàng bằng cách thêm một đồ họa rất lớn vào cửa sổ bật lên (trước tiên hãy xóa bộ nhớ cache của bạn!). Nếu bạn đang sử dụng Javascript Framework như jQuery (hoặc thứ gì đó tương tự), bạn có thể sử dụng sự kiện ready () (hoặc thứ gì đó tương tự) để đợi DOM tải trước khi kiểm tra độ lệch cửa sổ. Điều nguy hiểm ở đây là tính năng phát hiện Safari hoạt động theo cách xung đột: DOM của cửa sổ bật lên sẽ không bao giờ sẵn sàng () trong Safari vì nó sẽ cung cấp cho bạn một xử lý hợp lệ cho cửa sổ bạn đang cố mở - cho dù nó thực sự mở hay không phải. (trên thực tế, tôi tin rằng mã kiểm tra cửa sổ bật lên của bạn ở trên sẽ không hoạt động cho safari.)

Tôi nghĩ điều tốt nhất bạn có thể làm là bọc thử nghiệm của mình trong một setTimeout () và cho cửa sổ bật lên 3-5 giây để hoàn tất quá trình tải trước khi chạy thử nghiệm. Nó không hoàn hảo, nhưng nó sẽ hoạt động ít nhất 95% thời gian.

Đây là mã tôi sử dụng để phát hiện nhiều trình duyệt, không có phần 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;
}

Những gì tôi làm là chạy thử nghiệm này từ cha mẹ và bọc nó trong một setTimeout (), cho cửa sổ con 3-5 giây để tải. Trong cửa sổ con, bạn cần thêm một hàm kiểm tra:

kiểm tra hàm () {}

Trình phát hiện trình chặn cửa sổ bật lên kiểm tra xem liệu chức năng "kiểm tra" có tồn tại như một thành viên của cửa sổ con hay không.

THÊM NGÀY 15 THÁNG 6 NĂM 2015:

Tôi nghĩ rằng cách hiện đại để xử lý điều này là sử dụng window.postMessage () để yêu cầu đứa trẻ thông báo cho cha mẹ rằng cửa sổ đã được tải. Cách tiếp cận tương tự (trẻ nói với cha mẹ rằng nó đã được tải), nhưng phương tiện giao tiếp đã được cải thiện. Tôi đã có thể thực hiện miền chéo này từ đứa trẻ:

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

Phụ huynh lắng nghe thông báo này bằng cách sử dụng:

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

Hi vọng điêu nay co ich.

Chỉ một cải tiến cho snipet của InvisibleBacon (được thử nghiệm trong IE9, Safari 5, Chrome 9 và 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);
    };
}

Sau đây là giải pháp jQuery để kiểm tra trình chặn cửa sổ bật lên. Nó đã được thử nghiệm trong FF (v11), Safari (v6), Chrome (v23.0.127.95) & IE (v7 & v9). Cập nhật hàm _displayError để xử lý thông báo lỗi khi bạn thấy phù hợp.

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

Sử dụng:

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

Hi vọng điêu nay co ich! :)

Câu trả lời của Rich sẽ không hoạt động với Chrome nữa. Có vẻ như Chrome thực sự thực thi bất kỳ Javascript nào trong cửa sổ bật lên ngay bây giờ. Tôi đã kết thúc việc kiểm tra giá trị screenX bằng 0 để kiểm tra các cửa sổ bật lên bị chặn. Tôi cũng nghĩ rằng tôi đã tìm ra một cách để đảm bảo rằng tài sản này là cuối cùng trước khi kiểm tra. Điều này chỉ hoạt động cho các cửa sổ bật lên trên miền của bạn, nhưng bạn có thể thêm một trình xử lý onload như sau:

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

Như nhiều người đã báo cáo, thuộc tính "screenX" đôi khi báo cáo khác 0 cho các cửa sổ bật lên không thành công, ngay cả sau khi tải. Tôi cũng gặp phải hiện tượng này, nhưng nếu bạn thêm dấu kiểm sau thời gian chờ 0 ms, thuộc tính screenX dường như luôn xuất ra một giá trị nhất quán.

Hãy cho tôi biết nếu có cách nào để làm cho tập lệnh này mạnh mẽ hơn. Có vẻ như làm việc cho các mục đích của tôi.

Điều này đã làm việc cho tôi:

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

Ngoài ra, bên ngoài và chiều rộng là dành cho chrome vì thủ thuật 'about: blank' ở trên không hoạt động trong chrome nữa.

Tôi sẽ chỉ sao chép / dán câu trả lời được cung cấp tại đây: https://stackoverflow.com/a/27725432/892099 bởi DanielB. hoạt động trên chrome 40 và nó rất sạch. không có hack bẩn hoặc chờ đợi liên quan đến.

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

Làm thế nào về một Promisecách tiếp cận?

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

Và bạn có thể sử dụng nó như cổ điển window.open

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

Bạn có thể thay đổi mã để nó không thực hiện được lời hứa thay vì quay lại undefined, tôi chỉ nghĩ rằng đó iflà một luồng điều khiển dễ dàng hơn try / catchcho trường hợp này.

Kiểm tra vị trí của cửa sổ so với cửa sổ chính. Chrome làm cho cửa sổ gần như xuất hiện ngoài màn hình.

Tôi đã gặp sự cố tương tự với cửa sổ bật lên không mở trong Chrome. Tôi bực bội vì tôi không cố làm điều gì đó lén lút, chẳng hạn như cửa sổ bật lên khi tải lên, chỉ mở cửa sổ khi người dùng nhấp vào. Tôi đã thất vọng ĐÔI vì chạy hàm bao gồm window.open () từ dòng lệnh firebug đã hoạt động, trong khi thực sự nhấp vào liên kết của tôi thì không! Đây là giải pháp của tôi:

Cách sai: chạy window.open () từ trình xử lý sự kiện (trong trường hợp của tôi, dojo.connect đến phương thức sự kiện onclick của nút DOM).

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

Cách đúng: gán một hàm cho thuộc tính onclick của nút có tên window.open ().

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

Và, tất nhiên, tôi vẫn có thể làm người nghe sự kiện cho cùng một sự kiện onclick đó nếu tôi cần. Với thay đổi này, tôi có thể mở các cửa sổ của mình ngay cả khi Chrome được đặt thành "Không cho phép bất kỳ trang web nào hiển thị cửa sổ bật lên". Vui sướng.

Nếu bất kỳ ai thông thái về cách thức của Chrome có thể cho phần còn lại của chúng ta biết lý do tại sao nó tạo ra sự khác biệt, tôi rất muốn nghe điều đó, mặc dù tôi nghi ngờ đó chỉ là một nỗ lực đóng cửa các cửa sổ bật lên có lập trình độc hại.

Đây là phiên bản hiện đang hoạt động trong Chrome. Chỉ là một thay đổi nhỏ so với giải pháp của Rich, mặc dù tôi đã thêm vào một trình bao bọc để xử lý thời gian.

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

Để sử dụng nó chỉ cần làm như sau:

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

Nếu cửa sổ bật lên bị chặn, thông báo cảnh báo sẽ hiển thị sau thời gian gia hạn 5 giây (bạn có thể điều chỉnh điều đó, nhưng 5 giây sẽ khá an toàn).

Phân đoạn này kết hợp tất cả những điều trên - Vì một số lý do - StackOverflow đang loại trừ các dòng mã đầu tiên và cuối cùng trong khối mã bên dưới, vì vậy tôi đã viết một blog về nó. Để có lời giải thích đầy đủ và phần còn lại của mã (có thể tải xuống), hãy xem blog của tôi tại 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();

Chà, chắc chắn có rất nhiều giải pháp ở đây. Đây là của tôi, nó sử dụng các giải pháp được lấy từ câu trả lời được chấp nhận hiện tại (không hoạt động trong Chrome mới nhất và yêu cầu gói nó trong thời gian chờ), cũng như một giải pháp liên quan trên chuỗi này (thực sự là vanilla JS, không phải jQuery) .

Của tôi sử dụng kiến ​​trúc gọi lại sẽ được gửi truekhi cửa sổ bật lên bị chặn và falsenếu không.

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

Câu trả lời của Jason cũng là phương pháp duy nhất mà tôi có thể nghĩ ra, nhưng dựa vào vị trí như vậy thì hơi ranh ma!

Ngày nay, bạn không thực sự cần phải đặt câu hỏi “cửa sổ bật lên không mong muốn của tôi có bị chặn không?”, Bởi vì câu trả lời luôn là “có” - tất cả các trình duyệt chính đều bật trình chặn cửa sổ bật lên theo mặc định. Cách tiếp cận tốt nhất là chỉ dùng window.open () để phản hồi lại một lần nhấp trực tiếp, điều này hầu như luôn được cho phép.

CHÀO

Tôi đã sửa đổi một chút các giải pháp được mô tả ở trên và nghĩ rằng ít nhất nó đang hoạt động cho Chrome. Giải pháp của tôi được thực hiện để phát hiện xem cửa sổ bật lên có bị chặn khi trang chính được mở hay không, chứ không phải khi cửa sổ bật lên được mở, nhưng tôi chắc chắn rằng có một số người có thể sửa đổi nó. :-) Hạn chế ở đây là cửa sổ bật lên được hiển thị trong vài giây (có thể rút ngắn một chút) khi không có trình chặn cửa sổ bật lên.

Tôi đặt cái này trong phần của cửa sổ 'chính' của mình

<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 trông giống như sau:

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

Khi tôi gọi hàm kiểm tra trên trang bật lên sau 3500 ms, đèn bên trong đã được Chrome đặt chính xác.

Tôi sử dụng biến popUpsBlocked để biết các cửa sổ bật lên có được hiển thị hay không trong các javascrip khác. I E

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

Theo như tôi có thể nói (từ những gì tôi đã thử nghiệm) thì Chrome trả về một đối tượng cửa sổ với vị trí là 'about: blank'. Vì vậy, những điều sau sẽ hoạt động cho tất cả các trình duyệt:

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