JavaScriptでWebページの遷移・履歴・タブ操作を解説

はじめに

最近仕事の中でWebブラウザのページの遷移、新しいタブを開く、タブを閉じるなどの機能を実装する機会があったので、Webブラウザを操作するこれらの実装についてまとめてみようと思います。

厳密な機能についてまとめるとすごい量になるので、気になったらこちらなどを参考にしてみてください。

ページ遷移

window.location.href = 'https://example.com'; // 指定URLへ遷移
window.location.replace('https://example.com'); // 履歴を残さず遷移

hrefは履歴が残り、replaceは履歴が残りません。

注意点

• replaceは「戻る」ボタンで元のページに戻ることができません。

新しいタブを開く・閉じる

新しいタブを開く

window.open('https://example.com', '_blank'); // 新しいタブで開く

ウィンドウサイズや位置を指定したい場合

window.open('https://example.com', '_blank', 'width=600,height=400,left=100,top=100');

タブを閉じる

window.close(); // 現在のタブを閉じる

注意点

以下の条件を満たした場合に閉じることができます

• JavaScriptで開いたタブ（window.openで開いたもの）の場合
• 履歴が1つしかない（window.history.length === 1のとき）トップレベルブラウジングコンテキストの場合

履歴を進める

window.history.forward(); // 1つ先のページへ進む
window.history.go(2); // 2つ先のページへ進む

注意点

• 進める履歴がない場合は何も起こりません。

まとめ

これ以外にもページを再読み込みするlocation.reload();など、Webブラウザを操作する機能がたくさんあるので、興味を持った方はぜひ色々調べて見ると楽しいかもしれませんね。