window.history.go( number )は、ブラウザの履歴リストのうち、引数「number」に指定した数値に一致するページを表示するメソッド。引数「number」は、現在のページを「0」とし、進む場合は正数、戻る場合は負数で指定する。
構文
<script type="text/javascript">
window.history.go( number );
</script>
window.history.go( number );
</script>
引数
- number
- 現在のページを「0」とし、進む場合は正数、戻る場合は負数で指定する。
- 「2」を指定すると、ブラウザの「進む」ボタンを２回クリックするのと同じページを表示する。
- 「-2」を指定すると、ブラウザの「戻る」ボタンを２回クリックするのと同じページを表示する。
サンプルＡ
サンプルＡの動作について
- 「２つ戻る」ボタンをクリックすると、ブラウザの履歴リストの中の２つ前のURLを表示する。
ブラウザの「戻る」ボタンを２回クリックするのと同じ。 - 「２つ進む」ボタンをクリックすると、ブラウザの履歴リストの中の次の次のURLを表示する。
ブラウザの「進む」ボタンを２回クリックするのと同じ。
サンプルＡのソースコード
HTML
<div id="sample">
<button class="sampleButton" onclick="window.history.go( -2 );">２つ戻る</button>
<button class="sampleButton" onclick="window.history.go( 2 );">２つ進む</button>
</div>
<button class="sampleButton" onclick="window.history.go( -2 );">２つ戻る</button>
<button class="sampleButton" onclick="window.history.go( 2 );">２つ進む</button>
</div>
CSS
<style type="text/css">
.sampleButton {
font-size: 16px;
}
</style>
.sampleButton {
font-size: 16px;
}
</style>
サンプルＢ
サンプルＢの動作について
- 「２つ戻る」ボタンをクリックすると、ブラウザの履歴リストの中の２つ前のURLを表示する。
ブラウザの「戻る」ボタンを２回クリックするのと同じ。 - 「２つ進む」ボタンをクリックすると、ブラウザの履歴リストの中の次の次のURLを表示する。
ブラウザの「進む」ボタンを２回クリックするのと同じ。
サンプルＢのソースコード
JavaScript
<script type="text/javascript">
window.onload = initialize;
function initialize() {
document.getElementById( 'sampleBack' ).onclick = sampleBack;
document.getElementById( 'sampleForward' ).onclick = sampleForward;
}
function sampleBack() {
window.history.go( -2 );
}
function sampleForward() {
window.history.go( 2 );
}
</script>
window.onload = initialize;
function initialize() {
document.getElementById( 'sampleBack' ).onclick = sampleBack;
document.getElementById( 'sampleForward' ).onclick = sampleForward;
}
function sampleBack() {
window.history.go( -2 );
}
function sampleForward() {
window.history.go( 2 );
}
</script>
HTML
<div id="sample">
<button id="sampleBack" class="sampleButton">２つ戻る</button>
<button id="sampleForward" class="sampleButton">２つ進む</button>
</div>
<button id="sampleBack" class="sampleButton">２つ戻る</button>
<button id="sampleForward" class="sampleButton">２つ進む</button>
</div>
CSS
<style type="text/css">
.sampleButton {
font-size: 16px;
}
</style>
.sampleButton {
font-size: 16px;
}
</style>