ブラウザごとのwindowオブジェクトの違いを理解する

クロスブラウザスクリプトの作成テクニック 第10回

openメソッド

　windowオブジェクトのopenメソッドは、新しいウインドウを開く動作を行うメソッドです。

　openメソッドの用法は、次のとおりです。

openメソッドの用法

 window.open("URI","ウィンドウ名","オプション")

　openメソッドで設定できる値のうち、「URI」は開いたウインドウに読み込むデータのURI、「ウィンドウ名」は開いたウインドウの名称、「オプション」はウインドウの表示オプションです。このうち「オプション」は、JavaScriptのバージョンやブラウザによって追加があったり未対応のものがあったりするため、クロスブラウザスクリプトを作成する時には注意が必要です。

　openメソッドで設定できる「オプション」には次のようなものがあります。なお、「オプション」には下に上げたもの以外にも「z-lock」「alwaysLowered」など、特定状態のNetscape Navigator4.Xでのみ機能する「オプション」もあります。しかし、それらは、現在では既に使用する機会がほとんどないと考えられるので割愛しています。

openメソッドの属性オプション（windowFeatures）／JavaScript1.0～

オプション	内容
toolbar[=yes|no]|[=1|0]	ツールバー
location[=yes|no]|[=1|0]	ロケーションバー
directories[=yes|no]|[=1|0]	デレクトリーバー
status[=yes|no]|[=1|0]	ステータスバー
menubar[=yes|no]|[=1|0]	メニューバー
scrollbars[=yes|no]|[=1|0]	スクロールバー
resizable[=yes|no]|[=1|0]	リサイズボックス
width=pixels	ウィンドウの横幅(コンテンツ表示領域)
height=pixels	ウィンドウの縦幅(コンテンツ表示領域)

openメソッドの属性オプション（windowFeatures）／JavaScript1.2～

オプション	内容
left=pixels	デスクトップの左端からの位置
top=pixels	デスクトップの上端からの位置
innerWidth=pixels	ウィンドウのコンテンツ表示領域の横幅(widthから変更)
innerHeight=pixels	ウィンドウのコンテンツ表示領域の高さ(heightから変更)
outerWidth=pixels	ウィンドウの外周の幅
outerHeight=pixels	ウィンドウの外周の高さ
screenX=pixels	ディスプレイ左上からのX座標
screenY=pixels	ディスプレイ左上からのY座標

openメソッドの属性オプション（windowFeatures）／Internet Explorer独自

オプション	内容
fullscreen[=yes|no]|[=1|0]	フルスクリーンモード

　表でも分かる通り、openメソッドでは、JavaScript1.2で多くの「オプション」が追加されています。JavaScript1.2で追加されたオプションを設定したopenメソッドを、JavaScript1.2をサポートしていないブラウザで実行した場合、その設定が無視されてしまいます。とは言え、JavaScript1.2がサポートされたのは、Netscape Navigator4.X以降のブラウザからです。それを考えるとNetscape Navigator3.X以前のバージョンのNetscape Navigatorを使っているユーザーの数は、現在では非常に少数なので、JavaScript1.2で追加された「オプション」を使っても、JavaScriptのバージョンからくる問題が発生するようなことは、ほとんどないであろうと想像できます。

　また、JavaScript1.2は、Internet Explorer4.X以降のInternet Explorer、Opera、Safariでもサポートしています。しかし、Internet ExplorerやSafari、一部のOperaなどでは、JavaScript1.2で追加されたオプションのうちouterWidth、outerHeight、screenX、screenYはサポートされていません。また、innerWidth、innerHeightはMac版のOperaではサポートされていません。このような未対応ブラウザでこれらの「オプション」を使った場合もエラーは発生しませんが、設定が無視されたり、想定通りの動きをしない場合があるので注意が必要です。

　その他、fullscreenのような、Internet Explorer独自のオプションを使った場合もFirefoxやOpera、Safariなど、未対応のブラウザでは、設定が無視されます。また、fullscreenは、 Internet Explorer7.0より前のバージョンのInternet Explorerでは、新しく開くウインドウがブラウザの外枠などが表示されないキオスクモードで開いていました。しかし、Internet Explorer7.0からは、通常のウインドウがフルスクリーンで開くように仕様が変更されています。

　openメソッドの「オプション」の動きに関しては、第5回「ディスプレイサイズに合わせてブラウザの新しいウィンドウを開く」で、「ディスプレイと同じサイズのウィンドウを開く」サンプルを例にとり詳しく解説しているので、こちらも併せて参照してください。

まとめ

　今回は、クロスブラウザスクリプトを作成する場合に問題となる、ブラウザの種類やバージョンによるJavaScriptの実装の違いとして、windowオブジェクトを見てきました。JavaScriptの中でもwindowオブジェクト、その中でも特にopenメソッドは、比較的よく使われる部類に入るでしょう。

　さてこれまでクロスブラウザスクリプトを実現するために、ブラウザの種類やバージョンを判断し、そのブラウザがサポートしているスクリプトを実行する方法、また、実行するスクリプトをブラウザがサポートしているかどうか調べ、それに合わせて用意したスクリプトを実行する方法などを解説した後、前回と今回で、ブラウザの実装の違いで特に問題となる部分の多い、eventオブジェクトとwindowオブジェクトでの注意点に関して解説してきました。

　今回で、クロスブラウザスクリプトに関しては一旦終了となります。実際にクロスブラウザスクリプトを作成する時には、今まで解説してきた方法を単独、あるいは組み合わせて作っていくことになります。また、クロスブラウザスクリプトを実現する上で、今後出てくる新しいブラウザの動向に関しても注意していく必要があるでしょう。