ユーザーがアクティブにポップアップブロッカーを持っているかどうかを事前に知るために、安定したAPI /方法がある場合、ユーザーがwindow.open
をトリガーするボタンをクリックするタイミングを知る必要がありますか?
場合によっては、ユーザーはポップアップブロッカー(新しいウィンドウをブロックする)があることを知らないか、注意を払いません。 [許可]をクリックして、新しいウィンドウを承認するためのダイアログまたは何かで通知します。
Window.open(...)
は、新しいウィンドウが存在する場合、そのハンドルを返します。新しいウィンドウへのハンドルがない場合は、ウィンドウがブロックされていることを示しています。
https://developer.mozilla.org/en-US/docs/Web/API/Window/open
From: https://davidwalsh.name/popup-block-javascript
var windowName = 'userConsole';
var popUp = window.open('/popup-page.php', windowName, 'width=1000, height=700, left=24, top=24, scrollbars, resizable');
if (popUp == null || typeof(popUp)=='undefined') {
alert('Please disable your pop-up blocker and click the "Open" link again.');
}
else {
popUp.focus();
}
さて、これはあなたの質問です-ユーザーがウィンドウを開くイベントをクリックする方法を知る方法、ポップアップブロッカーが有効になっているかどうかを知る方法。 ウィンドウが開く前に...ありがとう!
私はそれを処理する方法がないのではないかと心配しています。私はしばらく前にこの同じ問題を調査し、発見したことを共有しています。
なぜポップアップがブロックされるのですか?
スマートポップアップブロッカーは、ユーザーのアクションに直接関連付けられているポップアップを許可します。とにかく遅れると、ブロックされる可能性が高くなります。
参照:アンディストラットン(彼のブログ)
この説明がもっと好き
一般的な規則は、window.openまたは同様のものが直接のユーザーアクションによって呼び出されないjavascriptから呼び出される場合、ポップアップブロッカーが関与することです。つまり、ポップアップブロックによってヒットされることなく、ボタンのクリックに応答してwindow.openを呼び出すことができますが、タイマーイベントに同じコードを配置するとブロックされます。コールチェーンの深さも要因です。一部の古いブラウザは直接の呼び出し元のみを参照します。新しいブラウザは、呼び出し元の呼び出し元がマウスクリックなどであるかどうかを少し遡って確認できます。
参照:dthorpe(スタックオーバーフローユーザー名)
私たちにできることは?
1つのことは、コードからポップアップブロッカーを使用してTweakに直接アクセスする方法がないため、非常に明確です。その背後にある理由は、その存在の背後にある唯一の理由を妨げることだと思います。
Andyが彼のブログで紹介しているソリューションをご覧ください: Click 。もし彼が簡単に説明したことを書かなければならなかったら、私は直接応答セクションにポップアップを使用すると言います。 Andyは、ポップアップブロックによってユーザーのアクションがブロックされないように直接呼び出しが行われた後、応答セクションでwindows.open
を使用できることを説明します。
Xaxxonが説明したように、windows.open
の実行後に、ブロックされたかどうかを確認することができます。通常、それは人々が行うことであり、追加のサービス機能を作成する際に開発者はそれを念頭に置いています。たとえば、私はTwitterの数字認証システムを実装していました。ポップアップコマンドの実行が失敗した後、メッセージを確認し、ポップアップウィンドウを有効にするメッセージをユーザーに表示できましたが、上記の解決策が見つかりました。全体がよりきれいになります。
window.open()は、クリックイベントによってトリガーされなかった場合にのみほとんどブロックされます。
ウィンドウがロードされたことを確認するには:
var loaded = false;
function windowLoaded() {
alert("The popup loaded");
loaded = true
}
function pause(milliseconds) {
var dt = new Date();
while ((new Date()) - dt <= milliseconds) { /* Do nothing */ }
}
document.write("start...");
//open the window
var win = window.open("window.html");
// If window.open returned an object
if(win) {
win.onload = function() {
win.RunCallbackFunction = windowLoaded;
};
document.write("popup sent...");
pause(3000);
// Verify that out window loaded
if (loaded == false)
document.write("check you popup blocker!");
else
document.write("ok!");
}
else {
document.write("window.open() was blocked...");
}
このコードを使用して確認してください
var popupBlockerChecker = {check:function(b) {
var a = this;
b ? /chrome/.test(navigator.userAgent.toLowerCase()) ? setTimeout(function() {
a._is_popup_blocked(a, b);
}, 200) : b.onload = function() {
a._is_popup_blocked(a, b);
} : a._displayError();
}, _is_popup_blocked:function(b, a) {
0 == 0 < a.innerHeight && b._displayError();
}, _displayError:function() {
alert("Popup Blocker is enabled! Please add this site to your exception list.");
}};
使い方は次のようになります
var popup = window.open("http://www.google.com.au", '_blank');
popupBlockerChecker.check(popup);
以下は、ポップアップブロッカーチェックに対するjQueryソリューションです。 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.co.in", '_blank');
popupBlockerChecker.check(popup);
それが役立つことを願っています。