Как я могу определить, блокирует ли браузер всплывающее окно?
Иногда я сталкиваюсь с веб-страницей, которая пытается открыть новое окно (для пользовательского ввода или чего-то важного), но блокировщик всплывающих окон предотвращает это.
Какие методы может использовать вызывающее окно, чтобы убедиться, что новое окно запущено правильно?
9 ответов
Если вы используете 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.");
}
}
Это решение для проверки блокировщика всплывающих окон было протестировано в FF (v11), Safari (v6), Chrome (v23.0.127.95) и IE (v7 и v9). Обновите функцию _displayError, чтобы обрабатывать сообщение об ошибке по своему усмотрению.
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 для учета первоначального открытия и закрытия, поэтому оно никогда не будет точным. Это будет позиция проб и ошибок.
Добавьте это к вашему списку попыток.
Простым подходом, если вы также владеете дочерним кодом, было бы создание простой переменной в его html, как показано ниже:
<script>
var magicNumber = 49;
</script>
А затем проверьте его наличие у родителя, что-то вроде следующего:
// 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);
Мы ждем некоторое время, чтобы убедиться, что веб-страница загружена, и проверяем ее существование. Очевидно, если бы окно не загрузилось после 1500 мс, переменная все равно была быundefined.
Я объединил решения @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.
}
Для некоторых блокировщиков всплывающих окон это не работает, но я использую его как базовое решение и добавляю try {} catch
Это попытается вызвать функцию addEventListaner, но если всплывающее окно не открыто, оно сломается и перейдет к перехвату, затем спросит, является ли его объект или null, и запустит остальную часть кода.
Используя событие 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 черных окна в фоновом режиме
функция возвращает логическое значение.