先日、あるサイトをPHPで構築した時にブラウザによって動作が異なる現象が発生しました。
CSSなどでブラウザ間の違いが発生することは多々あり、別に不思議なことではなかったのですが、CSSなどのデザイン面の違いではなく動作がブラウザ間で異なる現象が発生していました。
その異なる現象というのはちょっとわかりにくいのですが、Internet ExplorerやFirefoxとSafariで｢戻る｣の動作が異なるのです。
その詳細は以下に。
通常、Webの開発では私の場合、Firefox(以下FF)を主に開発を行います。今回開発を行った内容はもちろんそのまま書くことができないのですが、検証のためにソースをピックアップして明記します。
ファイルは全部で3つ。一つ目はstart.phpという入口になるページです。PHPファイルとなっていますが、中身はHTMLなので｢start.html｣でも構いません。ソースは下記の通りで2つめのファイルであるform.phpへのリンクだけがあります。
【start.php】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>開始ページ</title>
</head>
<body>
<a href="form.php">form.phpページへ移動</a>
</body>
</html>
2つめはform.phpファイルでFormタグがあるだけです。これもPHPファイルじゃなくHTMLファイルでもOKです。Formタグには3つめのファイルlocation.phpへ移動するボタンとJavaScriptでブラウザの｢戻る｣ボタンを実装しています。
【form.php】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Formページ</title>
</head>
<body>
<form name="form1" method="post" action="location.php">
<input type="submit" name="Submit" value="location.phpページへ移動">
<input type="button" name="Button" value="戻る" onClick="history.back();">
</form>
</body>
</html>
3つめのファイルはlocation.phpファイルでPHPのheaderでform.phpファイルに移動するだけのプログラムです。
【location.php】
<?php
header('Location: form.php');
?>
さて、一番初めのページであるstart.phpにアクセスすると｢form.phpページへ移動｣のリンクがあるので、クリックします。するとform.phpファイルのページへ移動します。当たり前ですね。
form.phpへ移動すると｢location.phpページへ移動｣のボタンがありますのでこれをクリックします。｢戻る｣ボタンはここでは触りません。するとlocation.phpへ移動するのですが、headerの｢Location: form.php｣でform.phpへ戻されます。これもごく普通のこと。そして、再度、｢location.phpページへ移動｣をクリックして何度か同じ作業を繰り返します。
さて、ここからFFやIEとSafariで動作が異なるのです。FFやIEの場合は｢戻る｣ボタンをクリックするとstart.phpに戻ります。しかし、Safariの場合、｢戻る｣ボタンをクリックすると一つ前のform.phpに戻ります。もう一度｢戻る｣ボタンを押すともう一つ前のform.phpに戻って、最終的にはstart.phpに戻るのです。図にすると下記のようになります。
FirefoxとIEの動作
Safariの動作
上の図ではわかりやすいように各ページを図に表示していますが、実際には｢location.phpページへ移動｣ボタンでグルグル回っているイメージになります。
Safariの場合の｢戻る｣はブラウザの戻る出も同じ症状でした。ただ、form.phpのFormのInputタグをやめてaタグにするとこの様な症状は発生しないのです。(FFやIEと同じ動作です)
今回使用したSafariはWindows版のVer.4を使用し、FFはWindows版の3.0、IEは7を使用しました。上記の動きの内、どちらが正しい動作なのかはわかりません。ただ、aタグだとFFやIEと同じ動作をすることからFF、IEの方が正しい様な気もしますが、Safariの｢戻る｣の動作も｢戻る｣という観点からすると正しいような気もします。
今回、この様な問題は初めてだったのですが、ごく当たり前のことなのでしょうか?もし御存知の方がいらっしゃいましたら下記コメントにお願いしますm(__)m
価格￥1,500
順位703,610位
著佐藤 信正
発行技術評論社
発売日2006/10/14
