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

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

関連記事

FlickrExがWordPressのLazy Load Pluginに対応しました!

先月このブログにも導入し、Lazy Loadとの共存のための修正などで協力させていただいたFlickrExですが、どうもWordPressでうまくいかないという声が聞こえてきていたので、なんとなくやり …

Googleドライブのフォーム機能からGoogle Apps Scriptを使ってメール自動返信2014年版

Googleドキュメントのフォーム機能からGoogle Apps Scriptを使ってメール送信 [C!] 上記記事は2011年に書いて今でも非常にたくさん参照されているのですが、Googleの仕様変 …

第12回:引用(blockquote)をCSSと画像でそれらしく見せる方法

前回のTipsではブログで頻発する引用作業を簡単にするブックマークレットを紹介しました。 ブログを書く上で頻繁に行う引用の手順を簡単にしてくれるブックマークレットを作ってみようと思う。 via: 第1 …

ブログに埋め込んだFlickr画像に自動でEXIF情報を追加する「FlickrEx」がLazyLoadに対応!

ボクは写真が好きで、バックアップも兼ねてFlickrに全ての写真データをアップロードしているのですが、ブログに貼り付ける画像もFlickrにアップロードしたものを使っています。プロアカウントを持ってい …

no image

FacebookのOGPを設定したのに、URLリンターが反映しないレアケース

このブログのMTに、あるいはTumblrにもOGP設定してみたわけですが、ある環境でOGPがうまく反映されないケースがあったので紹介します。 OGPのタグについては、Open Graph protoc …

スポンサードリンク

スポンサードリンク