2003年09月05日

[テクニック]自動的にジャンプする1

（別館から）
ページを開いたときに自動的に別なページにジャンプしてくれるページが必要になることがありますよね。そのテクニックの紹介。

ちょうどこのあいだ、「にょろにょろ工房」の各ページの拡張子を変更しました。そのときに使った方法です。

いろんなブラウザに対応するために、３種類の方法を併用します。もっとも原始的な方法は、メッセージとともに表示する直リンクです。HTTPのプロトコルで用意されている方法がメタタグを用いる方法です。スクリプトがなかったときには、これで作られたアニメーションなんてものもありましたね。最後がJavaScriptを使った方法です。

まず、それぞれの記述方法を観てみましょう。使うときにはindex.shtmlのところを飛ばしたいページに書き換えて下さい。

1.自動的にリフレッシュしてジャンプするメタタグを用意します。古いブラウザーやJavaScriptがOFFになっているユーザーさん用です。
<meta http-equiv="refresh" content="5;URL=index.shtml">
2. JavaScriptが有効になっているユーザーさん向けに、簡単なJavascriptの関数を用意して、<BODY>タグの「onLoad」アトリビュートで呼び出します。
<script language="JavaScript"> <!-- function switch(){ location.href="index.shtml"; } //--> </script>

<body onLoad="setTimeout('switch()',5000)">



3.ブラウザーの種類や設定の違い、待つのが面倒な人向けに、<a>タグを使った直リンクをページ内に用意します。

飛び先は<a href="index.shtml">こちら</a>です。
4.これを組み込んだのが、下のサンプル。「index.shtml」に飛びます 。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="refresh" content="5;URL=index.shtml"> <title>サンプル</title> <script language="JavaScript"> <!-- function switch(){ location.href="index.shtml" } //--> </script> </head> <body onLoad="setTimeout('switch()',5000)"> 約5秒後に自動的にジャンプします。 飛び先は<a href="index.shtml">こちら</a>です。 </body> </html>
こんな感じになります。 う〜ん、ためになるね〜。
11:00