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

メールアドレスが公開されることはありません。

関連記事

no image

mixi日記投稿用APIを使ってPHPからmixi日記にポスト

via: mixi for iPhoneから発掘されたmixi日記投稿用API « ku という事で、iPhone用のアプリをキッカケにmixi日記にポストできるAPIが見つかったそうです。Perlの …

no image

見ているページのHTMLソースを表示するブックマークレット(Yahoo!Pipes版)

この辺のエントリーに触発されてブックマークレット作りました。 ・URLを渡すとページの内容(htmlソース)をJSONPとかで取得できるAPIをYahoo! Pipesで作った(管理人日記) &#82 …

no image

Re: PEAR::Pagerで生成されるリンクを並び替える

いつもみているウノウラボで、ちょっと(?)なエントリーがあったので書いとく。 PEAR::Pagerでは最初にインスタンスを生成する際にいろんなオプションを指定できるのですが、この並び順を入れ替えるオ …

MovableTypeで記事に挿入したFlickrやAmazonの画像タグをサムネイルサイズに変換して表示する方法

最近のブログやWEBメディアで、新着記事や人気記事の一覧を小さなアイキャッチ画像と共に表示しているのをよく見ます。画像があると、記事の内容が一目で把握できるのとともに、アイキャッチの名前の通り目を引き …

Googleドキュメントのフォーム機能からGoogle Apps Scriptを使ってメール送信

【2014/12/26:追記】 この記事はGoogleの仕様変更などで内容が古くなっていたため、最新の情報で書き換えました。 リンク先の記事を参照してください。 Googleドライブのフォーム機能から …

スポンサードリンク

スポンサードリンク