はじめに
ブラウザの種類やバージョン、おのおののブラウザ独自の実装の違いを考慮し、同じように動作するスクリプトを「クロスブラウザスクリプト」と言います。ここでは、クロスブラウザスクリプトを実現する方法について順を追って解説していきます。
クロスブラウザスクリプトを作るには、ブラウザの種類やバージョンを判断し、そのブラウザに最適化したスクリプトを実行する必要があります。前回は、「ブラウザに合わせたスクリプトを実行する」として、JavaScriptを使ってブラウザの種類やバージョンを判断する方法を解説し、判断したブラウザに合わせたスクリプトを実行する方法を、実例を挙げて解説していきました。今回も前回に引き続き、クロスブラウザスクリプトの例を、サンプルを挙げながら解説していきたいと思います。
今回は、前回解説した内容をもとに進めていきます。このため、前回の内容も併せて参照するようにしてください。
過去の連載記事
- 第1回：ブラウザによるイベントの取り扱いの違いを吸収する
- 第2回：JavaScriptを使ってクライアントのOSに応じた処理を行う
- 第3回：ユーザエージェントからブラウザの種類やバージョンを判断する
- 第4回：ブラウザに合わせたスクリプトを実行する
ディスプレイと同じサイズのウィンドウを開く（基本）
最初に、基本となるスクリプトを作成しましょう。これに変更を加えていって、目的の処理を行うスクリプトを完成させます。
screenオブジェクト
Netscape Navigator 4からサポートされたJavaScript 1.2では、ディスプレイの表示サイズや色数などの情報を値に持つ、screenオブジェクトが追加されました。このオブジェクトを使うと、ユーザーのディスプレイの状況に合わせてブラウザの見栄えを調整する、といったことが可能になります。screenオブジェクトの用法および、サポートしているプロパティなどは、以下の表のとおりです。
screen.プロパティ
| プロパティ | 意味 |
width |
ディスプレイの幅（ピクセル） |
height |
ディスプレイの高さ（ピクセル） |
availWidth |
タスクバーなどの部分を除いたディスプレイの幅（ピクセル） |
availHeight |
タスクバーなどの部分を除いたディスプレイの高さ（ピクセル） |
pixelDepth |
ディスプレイ深度（bits/pixel） |
colorDepth |
ディスプレイ色深度（nビットカラー） |
| なし |
| なし |
screenオブジェクトを使えば、ブラウザを表示しているユーザーのディスプレイサイズに合わせて、ほぼそれと同じサイズのブラウザウィンドウを開く、といったことも可能です。例えば、ディスプレイの表示領域全体から、Windowsのタスクバーのようなコンテンツを表示できない部分を除いた、ディスプレイ内の表示可能領域とほぼ同じ大きさのブラウザウィンドウを新しく開くスクリプトの基本形は、次のようになります。
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html><head> 3 <meta http-equiv="Content-Script-Type" content="text/javascript"> 4 <meta http-equiv="Content-Style-Type" content="text/css"> 5 <title>Sample_1</title> 6 <script type="text/javascript"> 7 <!-- 8 function Full() { 9 window.open("full_1.html","mywindow","outerWidth="+screen.availWidth+",outerHeight="+screen.availHeight+" "); 10 } 11 //--> 12 </script> 13 <style type="text/css"> 14 <!-- 15 body { background-color: #ffffff; } 16 --> 17 </style> 18 </head> 19 <body> 20 *画面と同じサイズのウィンドウを開く (基本) 21 <p> 22 <form> 23 <input type="button" value=" ウィンドウを開く "
screen.availWidth+1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html><head> 3 <meta http-equiv="Content-Script-Type" content="text/javascript"> 4 <meta http-equiv="Content-Style-Type" content="text/css"> 5 <title>フルスクリーン</title> 6 <script type="text/javascript"> 7 <!-- 8 moveTo(0,0) 9 //--> 10 </script> 11 <style type="text/css"> 12 <!-- 13 body { background-color: #ffffff; } 14 --> 15 </style> 16 </head> 17 <body> 18 -フルスクリーン- 19 </body></html>
- サンプルファイル「sample_1.html」を試す
新しいウィンドウを開く時の処理
このサンプル「sample_1.html」では、［ウィンドウを開く］ボタンをクリックすると、ディスプレイ全体のサイズからタスクバーなどを除いた縦と横のサイズを、ウィンドウ外周の縦と横のサイズに設定した、新しいウィンドウを開くようにしています。
［ウィンドウを開く］ボタンをクリックした時、フォーム内に設定したイベントハンドラonClickによって（「sample_1.html」の23行目）、ウィンドウを開く処理を行う関数Full()が発生します。関数Full()の処理は、8～10行目の以下の部分です。
8 function Full() { 9 window.open("full_1.html","mywindow","outerWidth="+
新しいウィンドウは、windowオブジェクトのopenメソッドを使って開きます。openメソッドの用法は、次のとおりです。openメソッドは、上の抜粋部分の2行目で設定しています。
window.open("URI","ウィンドウ名","オプション")
サンプルでは、まずURIの値に「full_1.html」を設定しています。これにより、新しく開いたウィンドウには、HTMLファイル「full_1.html」が読み込まれます。次にウィンドウ名として、「mywindow」を設定しています。新しく開いたウィンドウは、このウィンドウ名を指定することによって、JavaScriptを使った操作が可能になります。
そして、オプションには「outerWidth」「outerHeight」の値を設定しています。これらはJavaScript 1.2で追加されたオプションで、それぞれ次のような意味を持ちます。
| オプション | 意味 |
outerWidth |
新しく開くウィンドウの外周の横幅の値。 |
outerHeight |
新しく開くウィンドウの外周の縦幅の値。 |
サンプルでは、以下のように設定しています。
"outerWidth="+screen.availWidth
"outerHeight="+screen.availHeight
これにより、ブラウザの外周がディスプレイ表示可能領域と同じサイズのウィンドウが開きます。
なお、Windows版のOperaのように、新しいウィンドウをタブで開く設定があるタブブラウザの場合、ユーザが新しいウィンドウをタブで開くように設定していると、ユーザの設定が優先され、新しいタブに指定したHTMLファイルが読み込まれます。この時、ウィンドウサイズの変更は行われません。
さらに、新しいウィンドウに読み込まれる「full_1.html」では、8行目でwindowオブジェクトのmoveToメソッドを使って「moveTo(0,0)」と設定しています。これにより、新しく開いたブラウザウィンドウの左上の角が、ディスプレイ表示可能領域の左上端に移動します。このように設定すると、新しく開いたウィンドウはディスプレイ表示領域からはみ出さず、画面内いっぱいに表示されます。
以上がディスプレイいっぱいに、新しいウィンドウを開くスクリプトの基本形となります。しかしながら、このスクリプトは、Internet Explorer（以下、IE）やSafariなど、Netscape Navigator系以外のブラウザやMacOS版のOperaでは、うまく機能しない場合があります。それは、それらのブラウザでouterWidth、outerHeightオプションがサポートされていないからです。そこで、クロスブラウザスクリプトの出番となります。
