History.forward() - 進む
forward()は、Historyのメソッドです。1つ後の履歴エントリーに遷移します。
概要
- 名前
- forward
- 所属
- History
- IDL
void forward();
- 仕様書
- https://html.spec.whatwg.org/multipage/history.html#dom-history-forward
説明
引数はありません。返り値もありません。
デモ
History.forward()のデモです。ページ内リンクをクリックして履歴エントリーを増やして、back()の後にforward()を実行してみて下さい。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
body { word-break: break-all ; }
div#result {
white-space: pre-wrap ;
}
</style>
</head>
<body>
<p id="location"></p>
<hr>
<p><a href="#link1">リンク1</a> / <a href="#link2">リンク2</a> / <a href="#link3">リンク3</a> / <a href="#link4">リンク4</a></p>
<hr>
<p><button id="back">戻る [back()]</button></p>
<p><button id="forward">進む [forward()]</button></p>
<hr>
<div id="result"></div>
<script>
var locationElement = document.getElementById( "location" ) ;
var resultElement = document.getElementById( "result" ) ;
function getHistoryInfo () {
console.log( history ) ;
locationElement.textContent = location.href ;
resultElement.textContent = "" ;
resultElement.textContent += "length: " + history.length + "\n" ;
}
onhashchange = getHistoryInfo ;
getHistoryInfo() ;
document.getElementById( "back" ).onclick = function () {
history.back() ;
} ;
document.getElementById( "forward" ).onclick = function () {
history.forward() ;
} ;
</script>
</body>
</html>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● | ● | ● | ● | ● 9+ | ● | ● | ● |
関連記事
- History.back()
- back()は、Historyのメソッドです。1つ前の履歴エントリーに遷移します。
- History.length
- lengthは、Historyのプロパティです。コンテキストが保有している履歴エントリーの数を返します。
- History.go()
- go()は、Historyのメソッドです。現在の履歴エントリーからの相対指定で、別の履歴エントリーに移動します。
- History.index
- indexは、Historyのプロパティです。現在位置が、保有している履歴エントリーの中のどこかを表すインデックス番号を返します。