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

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

関連記事

MovableTypeでカテゴリーを整理した一部始終

先日、ブログデザイン勉強会に参加したこともありますが、本格的にリニューアルを考えています。 勉強会ではブランディングとかデザインによるイメージ作りがメインになりそうなので、それとは別に機能的な部分のリ …

no image

Deliciousでreblog:選択範囲をNOTESにコピーできるブックマークレット

小ネタです。 tumblrのブックマークレットは選択範囲を簡単に登録できるようになっていて引用がしやすいです。で、リブログはtumblr、ブクマはDeliciousな感じで使っているんですが、ブクマす …

Trackbackをやめて、Google AJAX Feed APIを使って被リンクを表示

[追記:2009/02/08] エントリータイトルがタイポしていましたので直しました。非リンク→被リンク。 お恥ずかしい・・・。 [/追記] 先日、Delicious被ブックマーク数画像取得APIへの …

no image

blog chart.jp のブログパーツが重いので勝手に改造した

すでにローンチから時間が経ってしまっていますが、ブログを色々な角度から解析してチャート化してくれるWebサービス「blog chart.jp」というのがあります。 ABCDEFGの頭文字をもつ6つの指 …

facebookの新プロフィール画面で、写真をうまく使ってデザインする方法

【2011/02/01:追記】 ファンページについてのエントリーも書きましたので、そちらもどうぞ。 facebookのファンページを作る時に気をつけたい細かい話 半年くらい前から、ネット上でfaceb …

スポンサードリンク

スポンサードリンク