１７．ブラウザごとにそれぞれのページにジャンプさせる
　
　ふつうホームページを作るときブラウザのことについてはあまり考えることはないと思います。（私もそのひとりです。）しかし中には特定のブラウザに特化してホームページを作成している人もいると思います（たとえばMacromedia社のDreamweaverなどで作った場合）。その場合もう一方のブラウザで見た場合に表示がおかしくなったり、Javaスクリプトを使っている場合はエラーが発生することがあります。その場合に役に立つのがブラウザごと、そしてバージョンごとにリンク先を変えてしまうスクリプトです。
<HTML>
<TITLE>ブラウザごとにリンクを変える</TITLE>
<SCRIPT language="JavaScript">
<!--
if(navigator.userAgent.indexOf('MSIE 5.')>=0){b=1;}　　//（１）
else if(navigator.userAgent.indexOf('Mozilla/5.')>=0){b=2;}
else if(navigator.userAgent.indexOf('MSIE 4.')>=0){b=3;}
else if(navigator.userAgent.indexOf('Mozilla/4.')>=0){b=4;}
else if(navigator.userAgent.indexOf('MSIE 3.')>=0){b=5;}
else if(navigator.userAgent.indexOf('Mozilla/3.')>=0){b=6;}
//-->
</SCRIPT>
　
<BODY>
<SCRIPT language="JavaScript">
<!--
function ChangeLink1(){
if(b==1){document.write("<A HREF='msie5.htm'>");}
else if(b==2){document.write("<A HREF='nn5.htm'>");}
else if(b==3){document.write("<A HREF='msie4.htm'>");}
else if(b==4){document.write("<A HREF='nn4.htm'>");}
else if(b==5){document.write("<A HREF='msie3.htm'>");}
else if(b==6){document.write("<A HREF='nn3.htm'>");}
else{document.write("<A HREF='other.htm'>");}
}
ChangeLink1();
document.write("リンク</A>");
//-->
</SCRIPT>
<NOSCRIPT><A HREF='other2.htm'>リンク</A></NOSCRIPT>
</BODY>
</HTML>
　このスクリプトは２つのスクリプトで成り立っています。ひとつは<BODY>タグより前のブラウザとそのバージョンを判定するスクリプト、そしてもうひとつは<BODY>タグよりあとのそれに応じて表示を変えるスクリプトです。
　ブラウザを判定するには前半の（１）の「navigator.userAgent.indexOf('MSIE 5.')>=0」の部分で判定を行います。まず「navigator.userAgent」の部分でブラウザのuserAgentプロパティに格納されている情報を参照し、次の「indexOf('MSIE 5.')>=0」でその中に「MSIE 5.」があるかどうか調べます。もしあればindexOfメソッドは０(true)を、なければ−１(false)を返します。同様にネットスケープの場合は「Mozilla/5.」という文字列を使って同じ方法で判定し、判定ができたらそれぞれの場所で変数「b」に代入します。もしブラウザのバージョンにこだわらない場合は、判定する文字列を「MSIE」「Mozilla/」というふうにバージョンを抜かして書くことでNNかIEかを判定します。
　次にブラウザごとにそれぞれのページにリンクさせる方法ですが、後半のスクリプトの「function ChangeLink1()」でChangeLink1関数を呼び出し、前半のスクリプトで出た変数bによって表示するメッセージおよびリンクを変えます。たとえばこのサンプルでは使っているブラウザがネットスケープコミュニケーター４．７の場合、前半のスクリプトで「b=4」と判定され、（バージョンの小数点以下は切り捨て）後半のスクリプトの「b==4」の部分が実行されます。
　なおこの２つのスクリプトは１つにまとめて書くこともできますが、ここではわざわざ２つに分けて書いています。その理由はこのようなスクリプトは同じページ内でたくさん使うことがあるためで、１つにまとめるとそのたびに全部書くことになり、その分ページが重くなるからです。そこで２つに分けることで使い回しができるようにしています。（functionのChangeLink関数を「ChangeLink1」「ChangeLink2」というふうにリンクごとに分けて書けばいいだけのことです。）
BACK