js return をクリックして指定したページにジャンプする実装 process

この機能については以前にも簡単に紹介しましたが、今回はその原理と問題点について詳しく説明します（html5の新しいAPIを使用しているため、互換性の問題があります。モバイル端末での使用を推奨します）。

機能の説明:

ブラウザで新しいタブを作成し、URL を指定します。Web ページが読み込まれた後は、通常の手順ではクリックして戻ることはできません。現在のタブページには関連する履歴レコードがないため、返されるレコードはありません。

顧客のリクエストに応じて、この場合、リンク (ホームページなど) を履歴レコードに追加する必要があります。これにより、新しく開いたページで「戻る」をクリックするとホームページにジャンプできるようになります。ユーザーは、システムのさまざまな機能、プロモーションプラットフォームを確認できます。

1. 重要な知識

HTML5 では、history.pushState() メソッドとhistory.replaceState() メソッドが導入されており、これにより履歴エントリを 1 つずつ追加および変更できるようになります。これらのメソッドは、window.onpopstate イベントと連携して動作します。

ケース:
http://mozilla.org/foo.html が次の JavaScript コードを実行すると仮定します:

コードをコピーしますコードは次のとおりです。

var stateObj = { foo: "bar" }; .pushState(stateObj, "ページ 2", "bar.html");

これにより、ブラウザのアドレスバーに http://mozilla.org/bar.html が表示されますが、bar.html ページは読み込まれず、HTML もチェックされません。存在します。

ユーザーが http://google.com に移動し、戻るボタンをクリックすると、この時点でアドレスバーに http://mozilla.org/bar.html とすると、このページは、popstate イベントをトリガーします。このイベントの状態オブジェクトには、stateObj のコピーが含まれます。このページは foo.html のように見えますが、ページのコンテンツは Popstate イベントで変更されている可能性があります。

もう一度戻るボタンをクリックすると、URL は

http://mozilla.org/foo.html に戻ります。今度はドキュメントが別の Popstate イベントをトリガーします。状態オブジェクトは null です。ロールバックしてもドキュメントの内容は変更されません。

pushState() メソッド PushState() は、状態オブジェクト、タイトル (現在は無視されています)、およびオプションの URL の 3 つのパラメータを取ります。これら 3 つのパラメータの詳細を個別に調べてみましょう:

state オブジェクト — PushState() メソッドで作成された新しい履歴エントリに関連付けられた JavaScript オブジェクト。ユーザーが新しく作成された状態に移動するたびに、popstate イベントが発生し、イベントオブジェクトの state プロパティには履歴エントリの state オブジェクトのコピーが含まれます。

任意のシリアル化可能なオブジェクトを状態オブジェクトとして使用できます。 FireFox ブラウザは状態オブジェクトをユーザーのハードドライブに保存し、ユーザーがブラウザを再起動した後に復元できるようにするため、状態オブジェクトのサイズに 640k までの制限を設けています。この制限を超える状態オブジェクトを PushState() メソッドに渡すと、メソッドは例外をスローします。大量のデータを保存する必要がある場合は、sessionStorage または localStorage を使用することをお勧めします。

title — FireFox は現在このパラメータを無視しますが、将来的には使用される可能性があります。このメソッドは将来変更される可能性があることを考慮して、空の文字列を渡す方が安全です。あるいは、これから入力しようとしている状態を示す短いタイトルを渡すこともできます。

アドレス (URL) — 新しい履歴エントリのアドレス。ブラウザは、pushState() メソッドを呼び出した後はアドレスをロードしませんが、ユーザーがブラウザを再起動するときなど、後でアドレスをロードしようとする場合があります。新しい URL は絶対パスである必要はありません。相対パスの場合は、受信 URL と現在の URL が同じオリジンを持つ必要があります。そうでない場合は、pushState() が例外をスローします。。このパラメータはオプションです。指定しない場合は、ドキュメントの現在の URL になります。

注: Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) から Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) では、受信オブジェクトは JSON を使用してシリアル化されます。 Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3) 以降、オブジェクトは構造化コピーアルゴリズムを使用してシリアル化されます。これにより、より多くの種類のオブジェクトを安全に渡すことができるようになります。

ある意味では、pushState() の呼び出しは、現在のドキュメント内に新しい履歴エントリを作成してアクティブにするという点で、window.location='#foo' を設定するのと似ています。しかし、pushState() には独自の利点があります:

1. 新しい URL は同じオリジンの URL にすることができます。逆に、window.location メソッドを使用する場合は、ハッシュを変更するだけで同じドキュメント内に留まります。

2. 個人のニーズに応じて URL を変更するかどうかを決定します。代わりに、window.location='#foo' を設定すると、現在のハッシュ値が foo でない場合にのみ新しい履歴レコードが作成されます。

3. 新しい履歴エントリに要約データを追加できます。ハッシュベースの方法を使用する場合、関連するデータを非常に短い文字列にのみトランスコードできます。

新しいアドレスがハッシュを変更するだけであっても、pushState() メソッドは hashchange イベントをトリガーしないことに注意してください。

ポップステートイベントアクティブ化された履歴が変更されるたびに、popstate イベントが発生します。アクティブ化された履歴エントリが PushState によって作成された場合、または replaceState メソッドの影響を受けた場合、popstate イベントの state プロパティには履歴の state オブジェクトのコピーが含まれます。

replaceState() メソッド History.replaceState() オペレーションは、replaceState() メソッドが新しいエントリを作成するのではなく、現在の履歴エントリを変更することを除いて、history.pushState() に似ています。

replaceState() メソッドの使用は、ユーザー操作に応じて現在の履歴エントリの状態オブジェクトまたは URL を更新する場合に特に適しています。

2. 実装アイデア 1. Popstate イベントを使用して、クリックリターンイベントを監視します。

2. イベントがトリガーされると、現在のページの履歴に返せるページがあるかどうかを判断します。

3. 戻るページがない場合は、2 つのレコードを挿入します。

1)、指定されたジャンプページ。

2)、空のレコード。 (現在のページは変更しないでください)

3. 実装方法

 //返回之前没页面则返回首页
    function pushHistory() {
      if (history.length < 2) {
        var state = {
          title: "index",
          url: getHttpPrefix + "index.html"
        };
        window.history.pushState(state, "index", location.href);
        state = {
          title: "index",
          url: ""
        };
        window.history.pushState(state, "index", "");
      }
      //lll("history.state" + history.state)
      //console.log(history.state) 
}

ログイン後にコピー

現在の履歴のレコード数を確認します。ページが読み込まれると、ブラウザーが自動的にレコードをプッシュします。したがって、長さが 2 未満かどうかを判断する必要があります。

挿入された状態オブジェクトは、対応する URL リンクを取得するために使用されます。
注:
最初の PushState では、ジャンプ操作を容易にするためにジャンプ URL を状態オブジェクトに入れました。現在のブラウザは基本的にこのパラメータをサポートしていないため、2 番目のパラメータには実際的な意味はありません。
3 番目のパラメータは現在のアドレスバーのリンクを置き換えますが、ページはジャンプしません。 (以前、3 番目のパラメータをホームページのリンクに設定するという間違いを犯しました。そのため、アドレスバーがホームページのリンクに変更され、現在のページのリンクがホームページに基づいてジャンプし、ページ上のすべてのリンクが間違った転送)

  setTimeout(function () {
      pushHistory()
      window.addEventListener("popstate", function (e) {
        lll("popstate"+window.history.state)
        if (window.history.state != null && window.history.state.url != "") {
          location.href = window.history.state.url
        }
      });
    }, 300);

ログイン後にコピー

このコードは、ページのreadyイベントに配置され、実行されます。300ミリ秒の遅延は、操作を遅らせ、システムのpopイベントとの競合を防ぐためです。
if ステートメントは、履歴に状態オブジェクトがあるかどうかを判断するものです。要件を満たすレコードのみが追加した状態オブジェクトを持つため、この点に基づいてページジャンプ操作を実行できます。
これにより、希望する効果が得られます。
4. 最後に書きます
欠点:
1. 明らかに、冒頭で述べたとおりです。 HTML5 をサポートするブラウザにのみ適しています。
2. WeChat などのモバイル端末でのリターンと同様に、2 つのレコードが挿入されるため、ページを起動して WeChat チャットウィンドウに戻るには、リターンをさらに 2 回クリックする必要があり、ユーザーエクスペリエンスが悪くなります。

概要:
この方法は間違いなく最適化して完成させることができますが、現在の私の力ではそれを完成させるには不十分です。

この記事を読んだ友人がインスピレーションを得たり、それを達成するためのより良い方法を見つけたりできることを願っています。