ディスプレイサイズに合わせてブラウザの新しいウィンドウを開く

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

処理を振り分けてウィンドウを開く

　ブラウザによって使えるJavaScriptのオプションが異なります。そこで、先ほど作成したスクリプトをクロスブラザスクリプトとして機能するよう変更していきましょう。

ブラウザを判別し、そのブラウザに適したオプションを指定する

　IEやSafari、MacOS版のOperaのようにouterWidth、outerHeightオプションをサポートしていないブラウザも、JavaScript 1.0からあるwidth、heightオプションはサポートしています。オプションの対応状況を確認しておきましょう。

各ブラウザのオプション対応状況

ブラウザ	outerWidth	outerHeight	width	height
IE（Windows）	×	×	○	○
IE（MacOS版）	×	×	○	○
Netscape Navigator 4	○	○	○	○
Safari	×	×	○	○
Opera（Windows版）	○	○	○	○
Opera（MacOS版）	×	×	○	○

　そこでブラウザを判別し、Netscape Navigator系ブラウザおよびWindows版のOperaではouterWidth、outerHeightオプションを、それ以外のブラウザでは、width、heightオプションを使って新しいウィンドウを開くように、基本のスクリプトを変更してみましょう。

sample_2.html

 1 <script type="text/javascript">
 2 <!--
 3 function Full() {
 4   var UA=navigator.userAgent;
 5    var safari=UA.indexOf("Safari");
 6    var opera=UA.indexOf("Opera");
 7    var IE=UA.indexOf("MSIE");
 8    var mac=UA.indexOf("Mac");
 9   if ((IE ==-1 && safari==-1) || (opera != -1 && mac ==-1)) {
10     window.open("full_1.html","mywindow","outerWidth="+
         screen.availWidth+",outerHeight="+screen.availHeight+" ");
11   }
12   else {
13     window.open("full_1.html","mywindow","width="+
         screen.availWidth+",height="+screen.availHeight+" ");
14   }
15 }
16 //-->
17 </script>

• サンプルファイル「sample_2.html」を試す

　この「sample_2.html」では、前項のサンプル「sample_1.html」の6～12行目の部分を変更しています。それ以外の部分はまったく同じです。

　まずはじめに4行目で、「var UA=navigator.userAgent」とすることにより、ユーザーエージェントの値を変数UAに代入しています。そして以下の処理で、ユーザーエージェントの値を持つ変数UAから、stringオブジェクトのindexOfメソッドを使って、ブラウザを特定するための文字列を検索していきます。

ブラウザを特定するための文字列を検索する

　ブラウザを特定するための文字列を検索する処理は、次の部分で設定しています。

sample_2.html（抜粋）

 5 var safari=UA.indexOf("Safari");
 6 var opera=UA.indexOf("Opera");
 7 var IE=UA.indexOf("MSIE");
 8 var mac=UA.indexOf("Mac");

　ここでは、以下のような処理を設定しています。

• safari=UA.indexOf("Safari")
  ユーザーエージェントから「Safari」という文字列を検索する処理を変数safariに代入。
• var opera=UA.indexOf("Opera")
  ユーザーエージェントから「Opera」という文字列を検索する処理を変数operaに代入。
• var IE=UA.indexOf("MSIE")
  ユーザーエージェントから「MSIE」という文字列を検索する処理を変数IEに代入。
• mac=UA.indexOf("Mac")
  ユーザーエージェントから「Mac」という文字列を検索する処理を変数macに代入。

　これらの変数は、以降の処理でブラウザを特定するために利用していきます。

ブラウザに適したスクリプトの実行

　続いて次の処理が、実際にブラウザを判断し、それぞれのブラウザに合わせたopenメソッドのオプションを設定したスクリプトを実行して、新しいウィンドウを開く処理になります。

sample_2.html（抜粋）

 9 if ((IE ==-1 && safari==-1) || (opera != -1 && mac ==-1)) {
10   window.open("full_1.html","mywindow","outerWidth="+
       screen.availWidth+",outerHeight="+screen.availHeight+" ");
11 }
12 else {
13   window.open("full_1.html","mywindow","width="+
       screen.availWidth+",height="+screen.availHeight+" ");
14 }

　この中で、Netscape Navigator系ブラウザとWindows版のOpera用の処理は9～11行目、それ以外のブラウザの処理は12～14行目になります。

　Netscape Navigator系ブラウザとWindows版のOpera用の処理のうち、ブラウザの判断は9行目のif文の条件式で行っています。Netscape Navigatorブラウザは、ユーザーエージェント内に文字列「MSIE」と「Safari」が含まれていないブラウザです。文字列「MSIE」の判断は変数IEに、文字列「Safari」の判断は変数safariにそれぞれ代入されているので、条件式は以下のようになります。

IE==-1 && safari==-1

　また、Windows版のOperaは、ユーザーエージェント内に文字列「Opera」が含まれていて、かつ文字列「Mac」が含まれていないブラウザになります。文字列「Opera」の判断は変数operaに、文字列「Mac」の判断は変数macにそれぞれ代入されているので、条件式は以下のようになります。

opera!= -1 && mac==-1

　以上により、Netscape Navigator系ブラウザか、あるいはWindows版のOperaかを判断するif文の条件式は、「sample_2.html」に示したとおり以下のようになります。

(IE==-1 && safari==-1) || (opera!= -1 && mac==-1)

　この条件式が、真となるブラウザは10行目のスクリプトが実行されます。ここでは「sample_1.html」と同じくopenメソッドのオプションで、ブラウザの横幅にouterWidthオプションを、縦の高さにouterHeightオプションを使って指定し、新しいウィンドウを開いています。

　さらに、次のelse以降の処理が、IEやMacOS版Operaなどの、outerWidth、outerHeightオプションをサポートしていないブラウザ用の処理となります。実際のウィンドウを開く処理は13行目で設定しています。

13 window.open("full_1.html","mywindow","width="+screen.availWidth+
     ",height="+screen.availHeight+" ");

　この処理では、openメソッドのオプション部分を「"width="+screen.availWidth+",height="+screen.availHeight+" "」とし、サポートされていないouterWidth、outerHeightオプションの部分を、それぞれwidth、heightオプションに変えて新しいウィンドウを開いています。

Windows版のIEの問題点

　このスクリプトを実行すると、SafariやMacOS版のOperaも、Netscape Navigator系ブラウザやWindows版のOperaと同様にウィンドウサイズが調整され、タスクバーなどを除いたディスプレイの表示可能領域と、ほぼ同じ大きさのウィンドウが開きます。しかし、Windows版のIEでは、ディスプレイから少しはみ出したウィンドウが開くことがあります。

　これは、Windows版のIEのwidth、heightオプションが、ウィンドウの外周ではなく、コンテンツ表示領域のサイズを基準にしている上、開くウィンドウもディスプレイ内に存在するタスクバーなどの存在を考慮していないからなのでしょう。この問題は、Windows XP Service Pack 2で修正されたことになっています。しかしながら、筆者が確認した限りでは、それ以前と変わらないサイズでウィンドウが開く場合がありました。