题
有时,我会遇到一个网页试图弹出一个新窗口(用于用户输入或一些重要的内容),但弹出窗口阻止程序会阻止这种情况发生。
调用窗口可以使用哪些方法来确保新窗口正确启动?
解决方案
如果您使用 JavaScript 打开弹出窗口,则可以使用如下内容:
var newWin = window.open(url);
if(!newWin || newWin.closed || typeof newWin.closed=='undefined')
{
//POPUP BLOCKED
}
其他提示
我尝试了上面的一些示例,但无法让它们与 Chrome 一起使用。这种简单的方法似乎适用于 Chrome 39、Firefox 34、Safari 5.1.7 和 IE 11。这是我们 JS 库中的代码片段。
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.");
}
}
更新:弹出窗口自古以来就存在。最初的想法是在不关闭主窗口的情况下显示另一个内容。到目前为止,还有其他方法可以做到这一点:JavaScript 能够向服务器发送请求,因此很少使用弹出窗口。但有时它们仍然很方便。
过去,邪恶网站经常滥用弹出窗口。一个糟糕的页面可能会打开大量带有广告的弹出窗口。所以现在大多数浏览器都会尝试阻止弹出窗口并保护用户。
如果在用户触发的事件处理程序(如 onclick)之外调用弹出窗口,大多数浏览器都会阻止弹出窗口。
如果你仔细想想,这有点棘手。如果代码直接位于 onclick 处理程序中,那就很简单。但是setTimeout中打开的弹窗是什么呢?
试试这个代码:
// open after 3 seconds
setTimeout(() => window.open('http://google.com'), 3000);
该弹出窗口在 Chrome 中打开,但在 Firefox 中被阻止。
...这也适用于 Firefox:
// open after 1 seconds
setTimeout(() => window.open('http://google.com'), 1000);
不同之处在于,Firefox 认为 2000 毫秒或更短的超时是可以接受的,但在此之后 - 删除“信任”,假设现在它“在用户操作之外”。所以第一个被阻止了,第二个则没有。
2012 年的原始答案:
该解决方案用于弹出式阻滞剂检查已在FF(V11),Safari(V6),Chrome(V23.0.127.95)和IE(V7&V9)中测试。在您看到合适的情况下,更新显示器函数以处理错误消息。
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."); } };
用法:
var popup = window.open("http://www.google.ca", '_blank'); popupBlockerChecker.check(popup);
希望这可以帮助!:)
一个“解决方案”将 总是 无论浏览器公司或版本如何,工作都是简单地在屏幕上靠近将创建弹出窗口的控件的地方放置一条警告消息,礼貌地警告用户该操作需要弹出窗口并请启用他们网站。
我知道这并不花哨,但它再简单不过了,只需要大约 5 分钟的测试,然后你就可以继续其他噩梦了。
一旦用户允许你的网站弹出窗口,你不要过多地弹出窗口,这也是体贴的。您最不想做的事情就是惹恼您的访客。
我已经尝试了很多解决方案,但我能想到的唯一一个也适用于 uBlock Origin 的解决方案是利用超时来检查弹出窗口的关闭状态。
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)
}
显然这是一个黑客攻击;就像这个问题的所有解决方案一样。
您需要在 setTimeout 中提供足够的时间来考虑初始打开和关闭,因此它永远不会完全准确。这将是一个反复试验的位置。
将其添加到您的尝试列表中。
通过使用 onbeforeunload 事件我们可以检查如下
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;
}
它将在后台打开 2 个黑色窗口
该函数返回布尔值。
我结合了@Kevin B 和@DanielB 的解决方案。
这个就简单多了。
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;
};
用法:
var popup = window.open('https://www.google.com', '_blank');
if (isPopupBlockerActivated(popup)) {
// Do what you want.
}