Creazy!

WEBエンジニア・ヤガーのテック・ガジェットブログ

JavaScript 小技集

JavaScriptのポップアップウィンドウ禁止しているブラウザへの代替処理

投稿日:


ものすごく今更な話しかもしれないけど、最近、IE・FirefoxはもちろんSafariやOperaを同時に起動していたりして気付いたんだけど、モダンブラウザにはポップアップブロック機能(別ウィンドウを開くのを禁止する機能)がついていて、しかもその設定がデフォルトでONになっていたりしますね。
なので、UI的に使いやすいからといって window.open を多様していたりすると、実際にはブラウザがブロックして表示されていなかったり、いちいちユーザがブロックを解除する設定をしないといけなかったりします。
もし、固定サイズのポップアップウィンドウを開くのが絶対条件でないのなら、ポップアップブロックしているブラウザ向けの処理を用意しておいた方が良さそうです。

ポップアップブロックを考慮したポップアップ関数

function openWindow( url, name, option ) {
if ( !window.open( url, name, option ) ) {
location.href = url;
}
}

window.open はポップアップブロックなどでブロッカーなどによってウィンドウが開けなかった場合、null あるいは undefined(Safariの時) を返します。なので、window.open に失敗した場合に location.href で画面遷移させています。
location.href では同じウィンドウ内で画面遷移しますので、遷移先の画面がポップアップを前提に作られていると(サイズ固定されてたり閉じるボタンがあったり)この関数はあまりよろしくないかもしれません。用途に合わせて使って下さい。

まとめ

ポップアップブロックと言ってもただ全てのポップアップウィンドウを開かないというのではなくて、左クリックでユーザが能動的に起こしたイベントではポップアップ許可したりしているみたいなので、そこまで気にする必要はないかもしれません。
が、一応テクニックとしては覚えておいてもいいかなと思います。

-JavaScript, 小技集

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

Googleスプレッドシートのチェックボックスを便利に使う方法

2018年中旬、Googleスプレッドシートにチェックボックス機能が搭載されました。エクセル同様に、計算式やGAS(Google Apps Script)による高度なカスタマイズで、ビジネスの効率化に …

JavaScriptにおけるクリップボード操作の変遷:ZeroClipboardからモダンClipboard APIまで

Web開発において「テキストをコピーする」という機能は、今や当たり前の UI です。しかし、その裏側にある JavaScript のクリップボード操作は、セキュリティと利便性の間で激しい試行錯誤を繰り …

PostToTwitter v2.0.0公開:自分好みのフォーマットでブログ更新をお知らせ

ボクはこのブログ(MT)の更新通知をTwitterに送るのにエムロジックさんのPostToTwitterプラグインを使わせてもらっています。先日MT5にアップグレードしてからはv1.3.0を使っていた …

Google Analytics に独自検索エンジンを追加している場合の問題と対応

今日まで夏休みなんですが、昨日まで出かけていた期間のアクセス解析をGoogle Analyticsで確認していたら、すごい勢いで下降線。というか、これは明らかにおかしいのでデバッグしてみるとGoogl …

Google検索結果を一瞬でエクセルに貼り付けるブックマークレット「Google Top10 TSV」

いやー、この手の記事をずいぶん書いてなかったなぁと反省しつつリハビリ状態のヤガーです。 WEBサイト運営などをやっていると、特定キーワードの検索エンジン表示順位などを調べたりすることがあるのですが、S …

スポンサードリンク

スポンサードリンク