to topto bottom

モバイルファースト時代のマルチデバイス対応を確実・簡単に

JavaScriptのwindow.openメソッドを使ってページ遷移すると、一部の機種でブラウザバックボタンが正常に機能しない場合がある

リンク実装の機種依存問題

こんにちは。x-fit開発チームの山本です。
 
Webサイトのページ遷移は、anchorタグで作成されたリンク、またはJavaScriptなどで行うことができます。ブラウザには、戻るボタンがありますので、通常、Ajax(ブラウザのアドレスバーのURLを変更することなくページを書きかえる)遷移以外の場合は、ブラウザの戻るボタンを押すことで、遷移した順番を一つずつさかのぼるよう戻っていくことになります。
一部のスマートフォンで、JavaScriptで複数回ページ遷移した後に、1回だけブラウザの戻るボタンを使用すると、一つ前のページではなく、JavaScriptでページ遷移する前のページまで戻ってしまう現象が確認されたので、調べてみました。
 
遷移方法として、3つの手法で試します。
・aタグ
・location.href指定
・window.openメソッドコール
 

【ページ遷移コード例】

(コードは抜粋したものです)
 

page1.html(JavaScript遷移を始める前のページ)

<title>PAGE 1</title>
</head>
<body>
<p><a href="./page2.html">go page2</a></p>
</body>

page2.html(JavaScript遷移1回目)

<title>PAGE 2</title>
<script type="text/javascript">
function transitByLocation() {
location.href = "./page3.html";
}
function transitByWindow() {
window.open("./page3.html","_self");
}
</script>
<p><a href="./page3.html">link by anchor tag to page3</a></p>
<form action="#">
<p><input type="button" onclick="transitByLocation()"value="button by script 'location.href' to page3"></p>
<p><input type="button" onclick="transitByWindow()"value="button by script 'window.open' to page3"></p>
</form>

page3.html(JavaScript遷移2回目)

<title>PAGE 3</title>
<script type="text/javascript">
function transitByLocation() {
location.href = "./page4.html";
}
function transitByWindow() {
window.open("./page4.html","_self");
}
</script>
<p><a href="./page4.html">link by anchor tag to page4</a></p>
<form action="#">
<p><input type="button" onclick="transitByLocation()"value="button by script 'location.href' to page4"></p>
<p><input type="button" onclick="transitByWindow()"value="button by script 'window.open' to page4"></p>
</form>

page4.html(最終ページ)

<title>PAGE 4</title>
</head>
<body>
<p>page4</p>
</body>
page1.htmlから、page2.html、page3.htmll、page4.htmlに遷移し、ブラウザの戻るボタンを押して、page3.htmlに戻るかどうかを確認します。

【確認結果】

機種名 OS・Version ひとつ前のページに戻るか
aタグ localtion.href window.open
iPhone 4 iOS 4.0
iPhone 4S iOS 5.0
Xperia Android_1.6
IS04 Android_2.1
X06HT Android_2.2 ×
Xperia arc Android_2.3 ×
GALAXY NEXUS Android_4.0
IS12T Windows Phone 7.5
 
×となった機種では、JavaScript遷移を始める前のページ(前述のpage1.html)まで戻ってしまう現象が確認できました。
 

【対応】

ページ遷移は、アンカータグでページ遷移しましょう。
 
※本記事は、弊社開発チーム所有機での確認結果であり、全機種調査の結果ではありません。同一機種であっても、この現象が必ず発生することを保証するものではありません。これ以外や例外のある可能性がありますことをご了承ください。
このエントリーをはてなブックマークに追加