javascript - 检测 Chrome 中被阻止的弹出窗口

Question

我知道 JavaScript 技术可以检测其他浏览器中的弹出窗口是否被阻止(如 the answer to this question 中所述)。这是基本测试:

var newWin = window.open(url);

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

但这在 Chrome 中不起作用。当弹出窗口被阻止时，永远不会到达“POPUP BLOCKED”部分。

当然，测试在一定程度上是有效的，因为 Chrome 实际上并没有阻止弹出窗口，而是在右下角的一个最小化的小窗口中打开它，其中列出了“阻止的”弹出窗口。

我想做的是能够判断弹出窗口是否被 Chrome 的弹出窗口阻止程序阻止。我尝试避免浏览器嗅探，转而进行功能检测。有没有办法在不嗅探浏览器的情况下做到这一点？

编辑:我现在尝试使用 newWin.outerHeight、newWin.left 和其他类似的属性来完成此操作。当弹出窗口被阻止时，Google Chrome 将所有位置和高度值返回为 0。

不幸的是，即使弹出窗口实际上打开了未知的时间，它也会返回相同的值。经过一段神奇的时间(在我的测试中是几秒钟)，位置和大小信息将作为正确值返回。换句话说，我还没有更接近弄清楚这一点。任何帮助将不胜感激。

Answer 1

那么你所说的“神奇时间”可能是当弹出窗口的 DOM 被加载时。或者可能是当所有内容(图像、外部 CSS 等)都已加载时。您可以通过向弹出窗口添加一个非常大的图形来轻松测试这一点(首先清除缓存!)。如果您使用的是像 jQuery(或类似的东西)这样的 Javascript 框架，您可以使用 read() 事件(或类似的东西)来等待 DOM 加载，然后再检查窗口偏移量。这样做的危险在于 Safari 检测以一种相互冲突的方式工作:弹出窗口的 DOM 在 Safari 中永远不会 read()，因为它会给你一个你试图打开的窗口的有效句柄——无论它是实际打开还是打开。不是。 (事实上​​，我相信上面的弹出测试代码不适用于 safari。)

我认为您能做的最好的事情是将测试包装在 setTimeout() 中，并在运行测试之前给弹出窗口 3-5 秒的时间来完成加载。它并不完美，但至少在 95% 的时间内应该可以工作。

这是我用于跨浏览器检测的代码，没有 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;
}

我所做的是从父窗口运行此测试并将其包装在 setTimeout() 中，为子窗口提供 3-5 秒的加载时间。在子窗口中，需要添加一个测试函数:

函数测试(){}

弹出窗口拦截器检测器测试“测试”函数是否作为子窗口的成员存在。

2015 年 6 月 15 日添加:

我认为处理此问题的现代方法是使用 window.postMessage() 让子级通知父级窗口已加载。方法类似(子级告诉父级它已加载)，但通信方式有所改进。我能够从 child 那里执行此跨域操作:

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

家长使用以下方式监听此消息:

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

希望这有帮助。