プログラミング世界へよこそ

JS History オブジェクト: 閲覧履歴を取得する

JS History オブジェクト: 閲覧履歴を取得する
 
 
JavaScript 履歴オブジェクトには、ブラウザで閲覧したページや現在のページの<iframe>によって読み込まれたページなど、ブラウザでユーザーが訪問した履歴レコードが含まれます。 window オブジェクトの History 属性を通じて履歴オブジェクトを取得できます。window オブジェクトはグローバル オブジェクトであるため、 window.history使用する場合は window プレフィックスを省略できます。たとえば、 window.history.go()次のように省略できます。 history.go() 。

 

コンテンツ 非表示
1. 履歴オブジェクトのプロパティ
2. 履歴オブジェクトのメソッド
3. 「 JS History オブジェクト: 閲覧履歴を取得する」についてわかりやすく解説！絶対に観るべきベスト2動画

履歴オブジェクトのプロパティ

次の表に、JavaScript 履歴オブジェクトでよく使用されるプロパティとその説明を示します。

属性 例証する
length 現在ロードされているページを含む閲覧履歴の数を返します。
scrollRestoration ブラウザの機能を使用すると、前または次のページに戻ると、ページは前に閲覧した位置までスクロールされます。このプロパティには、auto (スクロールを示す) と Manual (スクロールしないことを示す) の 2 つの値があります。
state 現在の URL のブラウザのステータス情報を返します。pushState() メソッドまたは replaceState() メソッドが呼び出されていない場合、デフォルト値は null です。

サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script type="text/javascript">
        document.write(history.length + "<br>");
        document.write(history.scrollRestoration + "<br>");
        document.write(history.state + "<br>");
    </script>
</body>
</html>

操作の結果は次のようになります。

5
自動
ヌル

履歴オブジェクトのメソッド

次の表に、JavaScript 履歴オブジェクトで一般的に使用されるメソッドとその説明を示します。

方法 例証する
back() 現在のページを参照して、履歴の前のレコードに戻ります (つまり、前のページに戻ります)。また、ブラウザのツールバーの←ボタンをクリックしても、同じ効果を得ることができます。
forward() 現在のページを参照して、履歴の次のレコードに移動します (つまり、次のページに進みます)。ブラウザのツールバーの→ボタンをクリックしても同じ効果が得られます。
go() 現在のページを参照し、指定されたパラメータに従って指定された履歴レコードを開きます。たとえば、-1 は前のページに戻ることを意味し、1 は次のページに戻ることを意味します。
pushState() ブラウザの履歴に新しいエントリを挿入します。
replaceState() 現在の履歴を指定されたデータ、名前、URL に置き換えます。

サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <button onclick="myBack()">back()</button>
    <button onclick="myForward()">forward()</button>
    <button onclick="myGo()">go()</button>
    <button onclick="myPushState()">pushState()</button>
    <button onclick="myReplaceState()">replaceState()</button>
    <script type="text/javascript">
        function myBack(){
            history.back();
        }
        function myForward(){
            history.forward();
        }
        function myGo(){
            var num = prompt('整数を入力してください','1');
            history.go(num);
        }
        function myPushState(){
            var state = { 'page_id': 1, 'user_id': 5 }
            var title = 'JavaScript'
            var url = 'index.html'

            history.pushState(state, title, url)
            console.log(history.state);
        }
        function myReplaceState(){
            var state = { 'page_id': 3, 'user_id': 5 }
            var title = 'history'
            var url = 'index.html'

            history.replaceState(state, title, url)
            console.log(history.state);
        }
    </script>
</body>
</html>
JS History オブジェクト: 閲覧履歴を取得する
JS History オブジェクト: 閲覧履歴を取得する

「 JS History オブジェクト: 閲覧履歴を取得する」についてわかりやすく解説！絶対に観るべきベスト2動画

【Windows】Google Chromeの閲覧履歴を確認・復元する方法｜Wondershare Recoverit
Go Back and Forward using Javascript History Window Dom | Back(), Forward(), and Go()

admin