ブラウザがポップアップをブロックしているかどうかを検出するにはどうすればよいですか?
-
08-06-2019 - |
質問
時折、(ユーザー入力や重要な目的のために) 新しいウィンドウを開こうとする Web ページに遭遇することがありますが、ポップアップ ブロッカーがこれを阻止します。
新しいウィンドウが適切に起動することを確認するために、呼び出し側ウィンドウはどのような方法を使用できますか?
解決
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 ミリ秒以下のタイムアウトは許容されますが、それ以降は「ユーザー アクションの範囲外」であるとみなして「信頼」を削除することです。したがって、最初のものはブロックされますが、2 番目のものはブロックされません。
2012年現在の元の回答:
ポップアップブロッカーチェック用のこのソリューションは、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 に十分な時間を指定する必要があるため、完全に正確になることはありません。試行錯誤の立場になるだろう。
これを試行リストに追加してください。
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.
}