にしし ふぁくとりー(西村文宏 個人サイト)

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

画面の中央にサブウインドウを表示させる方法 [機能]

JavaScriptを使ってブラウザのサブウインドウを画面(ディスプレイ)の中央に表示させるには、availWidthプロパティとavailHeightプロパティを使って、サブウインドウ左上の表示座標を計算します。あとは、window.openメソッドを使ってサブウインドウを表示すれば完成です。

画面の中央にサブウインドウを表示させる方法

JavaScriptを使ってブラウザで小さなウインドウ(サブウインドウ)を表示しようとする際には、表示位置を画面の中央にしたいと思うことがあります。
JavaScriptを使ってウインドウを開く場合、ウインドウのサイズだけでなく表示座標も指定できます。ですから、閲覧者の画面サイズ(※表示可能領域のサイズ)を取得した上で簡単な計算をすれば、望みのサブウインドウを画面中央に表示できます。

画面サイズ(表示可能領域のサイズ)を取得するには、以下のようにscreenオブジェクトのavailWidthプロパティavailHeightプロパティを使います。

var sw = screen.availWidth;  // 表示可能領域の横幅
var sh = screen.availHeight; // 表示可能領域の高さ

画面の横幅と高さを取得するには、WidthプロパティとHeightプロパティがあります。
しかし、これらのプロパティだと「タスクバーなどのようなアプリケーションの表示には使えない領域」も含んだサイズが返ってきます。
タスクバーやツールバーが細い場合にはあまり影響はないかも知れませんが、(Windows Vistaのように画面横に太いバーがあるような場合は特に)「画面全体」よりは「表示可能領域」を基準にした方が、真ん中っぽく見える気がします。
というわけで、画面内で「ウインドウの表示に利用できる空間」を取得するには、上記のようにavailWidthプロパティavailHeightプロパティを使うのが良さげです。

※JavaScriptを使って任意の小さなウインドウを開く方法は、別途「サブウインドウを開く」で解説済みなのでここでは割愛します。詳しくはそちらをご参照下さい。
あとは、閲覧者の画面サイズと表示したいサブウインドウのサイズから、サブウインドウを表示する座標を計算すれば良いでしょう。

画面の中央に表示されるよう座標を計算する

仮に今、横360px×縦240pxの小さなサブウインドウを表示したいとします。
このウインドウを、画面中央(表示可能領域の中央)に表示させるには、以下のような計算が必要です。

  • サブウインドウ左上のX座標 = ([画面(表示可能領域)の横幅]-[サブウインドウの横幅]) ÷ 2
  • サブウインドウ左上のY座標 = ([画面(表示可能領域)の高さ]-[サブウインドウの高さ]) ÷ 2

この計算を、JavaScriptソースにすると以下のようになります。

var subx = ( screen.availWidth - 360 ) / 2;
var suby = ( screen.availHeight - 240 ) / 2;

これで、変数subxsubyには「サブウインドウを表示する座標(サブウインドウ左上の座標)」が格納されます。
変数subxがX座標、変数subyがY座標です。

実際に画面中央にサブウインドウを表示させるJavaScriptソース

サブウインドウを開くには、windowオブジェクトのopenメソッドを使います。
細かなオプションについては、記事「サブウインドウを開く」で解説しているのでここでは省きます。
画面の中央にサブウインドウを表示させるには、以下のようなJavaScriptソースを記述します。

JavaScriptソース

function ShowSubWindow() {
   // サブウインドウの設定
   var subw = 360;   // サブウインドウの横幅
   var subh = 240;   // サブウインドウの高さ
   var subp = "sample.html";   // 表示するページ(URL)
   var subn = "sakura";   // サブウインドウの名称
   // 表示座標の計算
   var subx = ( screen.availWidth  - subw ) / 2;   // X座標
   var suby = ( screen.availHeight - subh ) / 2;   // Y座標
   // サブウインドウのオプション文字列を作る
   var SubWinOpt = "width=" + subw + ",height=" + subh + ",top=" + suby + ",left=" + subx";
   // サブウインドウを表示
   window.open(subp, subn, SubWinOpt);
}

上記のソースで望みに応じて書き換える必要があるのは、主に3~6行目です。それ以外はそのままコピーするだけで使えます。
上記で作成したShowSubWindow関数を、例えば以下のようなボタンで呼び出します。

HTMLソース

<input type="button" value="画面中央にサブウインドウを表示" onclick="ShowSubWindow();">

実はこのソースだと微妙に中央には表示されないのですが、まあおおむね中央に表示されます。(詳しくは最後に解説)
これを表示させると、以下のように見えます。ボタンをクリックすると、360×240のサブウインドウが表示されます。

なお、サブウインドウを開くopenメソッドのオプションでは、top=の方にY座標を、left=の方にX座標を記述しないといけません。

  • topは上端からの距離を示すので、X座標ではなくY座標を与えないといけません。
  • leftは左端からの距離を示すので、Y座標ではなくX座標を与えないといけません。

この2つは、逆に指定してしまいがちな気がしますので、注意して下さい。

実はぴったり画面中央には配置されない

width・heightは表示領域のサイズ、outerWidth・outerHeightがウインドウそのもののサイズサブウインドウを表示するopenメソッドのオプションとして、先のソースでは以下の4つを指定しています。

  • width : 表示領域の横幅
  • height : 表示領域の高さ
  • top : ウインドウ左上の表示位置(画面上端からの距離:Y座標)
  • left : ウインドウ左上の表示位置(画面左端からの距離:X座標)

ここでポイントなのは、widthやheightで表す値は「サブウインドウのサイズ」ではなく「サブウインドウ内の描画領域のサイズ」だという点です。
ウインドウ枠やタイトルバー・ツールバー・ステータスバーなどのサイズは含んでいません。
なので、主に上下方向では完全に中央には配置されません。
たいてい、ウインドウ上側にツールバーなどが配置されるため、全体的にちょっと下寄りに表示されることが多いでしょう。

ウインドウそのもののサイズを指定できるouterWidth・outerHeightプロパティもあるんだけど

実は、openメソッドのオプションには、widthやheightの代わりに以下のような指定も使えます。

  • outerWidth : ウインドウの横幅
  • outerHeight : ウインドウの高さ

これを使えば、サブウインドウそのものの大きさを指定できるので、ぴったり画面中央に配置可能です。
では、なぜ使わなかったのか……というと、Internet Explorerなどの一部のブラウザでは、この指定方法に対応していないためです。
実際には、そんなにぴったり正確に画面中央に表示しなければならないケースってあまりないですよね?(^_^;)
だいたい中央あたりに見えればそれで良い、ということがほとんどではないかと思います。
なので、あまり細かい差は気にせずwidthとheightを使ってサブウインドウを作れば良いのではないかと思います。(^_^;)

※それ以前に、最近ではあまりサブウインドウを開くこと自体が避けられる傾向にありますけども。モーダルウインドウっぽいボックスを、同一ウインドウ内に描画する方法の方が使われる頻度が高そうですね。その話はまた別途。

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---