画面遷移はあまりしたくない。なので、Ajaxの通信後、ログインはポップアップを利用して。。とか、やりたい場合が出てくる。
最近のブラウザはポップアップブロックが多い。
特に、スマホではデフォルトの設定でポップアップブロックがONになっていることがほとんど。さらに、PCブラウザはエラーをブロックを出してくれる事があるが、スマホではポップアップが反応せず、エラーも出ず、何も起こらない。最悪な状態だ。
ポップアップブロックを回避するパターンを探し求めた。
ポップアップブロックのパターン例
popup_block
$(function() {
window.open('xx'); // ブロック
$('#hoge').on('click', function() {
window.open('xx'); // ブロックされない
$.ajax({
url: 'xx',
success: function(data) {
window.open('xx'); // ブロック
}
});
});
});
お分かりだろうか？
なんと、JS からウィンドウを開く際、 ユーザーからの操作に関係がない場合はブロックし、 ユーザーからの操作に関係がある場合はブロックされません。
ブロックされないパターン
- onclickなどのユーザーが意図した行動
ブロックされるパターン
- onload イベント
- Ajax
Ajaxでの回避策
しかし、私がやりたいのはAjax後のポップアップだ。
popup_block_block
$(function() {
window.open('xx'); // ブロック
$('#hoge').on('click', function() {
window.open('xx'); // ブロックされない
$.ajax({
url: 'xx',
async: false, // 非同期ではなく同期通信にする
success: function(data) {
window.open('xx'); // ブロックされない
}
});
});
});
お分かりだろうか？
Ajax の A に当たる Asynchronous を false にしてしまおう。これにより、同期通信となり、ユーザーが意図した行動として認識されます。
え？それ、Ajaxじゃなくね？
Sjax (Synchronous JavaScript + XML)です。
＿人人人人＿
＞ Sjax ＜
￣Y^Y^Y^Y￣
モダンブラウザじゃ使えない？
貴重なコメントを頂きました。
hikaru_oao
メインスレッドでの同期XHRは非推奨になりました。
モダンブラウザで試すと警告が出ます。
互換性のために暫くは有効ですが、新規で使っていくべきでないと思います。
その為、1クリックでの回避策は今のところありません。
Ajaxイベント発火後に、オーバーレイなどでボタンを出してそこから、もう1クリックさせる感じですかね。。スマートじゃない。