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

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

関連記事

どれだけMacを開いていたかが丸わかり!?Macでスリープ・解除の履歴を確認するコマンド

どもども、お疲れ気味のヤガー@yagerです。 忙殺されていると、なかなか自分がどのくらい働いているかも分からなくなってくる場合がありますが、月末月初は勤怠報告などで自分の稼働時間を泣きながらまとめて …

no image

第16回:サムネイル作成APIをサーバサイドで簡単に切り替える方法

以前に、サムネイルAPIをJavaScriptで簡単に切り替える方法をエントリーしました。 サービスが使えなくなればサムネイルを外すなり他のサービスに切り替えるなりする作業が発生します。MT等のブログ …

【更新】ソーシャルメディアに共有するボタンの設置方法(Twitter, facebook, mixi, GREE, Evernote, Google+, Tumblr, Pinterest, はてブ)

ソーシャルメディアの各サービスがこぞって「いいね!」などの共有ボタンをリリースしています。ブログやニュースメディアでも頻繁に目にする昨今ですが、色々なソーシャルボタンの設置方法をまとめて紹介したいと思 …

no image

第7回:サムネイル作成APIをJavaScriptで簡単に切り替える方法

SimpleAPIをはじめたくさんのサムネイルAPIサービス(もちろん無料)のおかげで、簡単にサイトのスクリーンショットをサムネイル画像として自分のブログに貼り付ける事ができるようになりました。すでに …

no image

Smartyで配列のダンプを表示させる5つの方法

Smartyといえば、言うまでもなくPHPの中ではとても有名なテンプレートエンジンです。自分でも長い事使ってきたんだけども、使い方が分からなくて困るほど難しい事をしてこなかったせいか全然深いところまで …

スポンサードリンク

スポンサードリンク