SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

ブラウザごとの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で追加されたオプションのうちouterWidthouterHeightscreenXscreenYはサポートされていません。また、innerWidthinnerHeightは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オブジェクトでの注意点に関して解説してきました。

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

この記事は参考になりましたか?

連載通知を行うには会員登録(無料)が必要です。
既に会員の方はを行ってください。
クロスブラウザスクリプトの作成テクニック連載記事一覧

もっと読む

この記事の著者

半場 方人(ハンバ マサヒト)

Netscape2.XでJavaScriptに初めて出合ったころ、「なぜJavaScriptの日本語の書籍が無いんだ」、とあちこちで嘆いていたら、じゃあおまえが書け、とお声がかかり、JavaScript関連の書籍を執筆するようになる。執筆に際していつも考えるのは、「JavaScript初心者だった頃の気持ちを忘れないよに」、ということ。主な著書は、「標準Webデザイン講座 JavaScript&Ajax」(翔泳社)などがある。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/3065 2008/10/16 14:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー