JavaScript は、refreshing_javascript スキルなしでブラウザの進む関数と戻る関数を実装します。

私は最近バックボーンを学んでいます。バックボーンを理解するには、まずスパを理解する必要があります。スパを理解するには、まずシングルページ アプリケーションがページを更新せずに URL を変更する方法を理解する必要があります。

AJAX は、別のページにジャンプする場合に比べて、ページの切り替えの間に白い画面が表示されることがなくなり、ユーザーのブラウジング エクスペリエンスを大幅に向上させたと言えます。しかし、初期の AJAX アプリケーションの多くはブラウザの前後機能をサポートしていないため、ユーザーが Web サイトのどこを閲覧しても、更新されるとすぐに元の位置に戻ってしまい、ユーザーはブラウザを使用できなくなりました。閲覧履歴を切り替えるための「進む」および「戻る」ボタン。

最初の問題については、Cookie または localStorage を使用してアプリケーションのステータスを記録し、ページを更新するときにこのステータスを読み取り、対応する ajax リクエストを送信してページを変更するだけで、比較的簡単に解決できます。しかし、2 番目の問題は非常に厄介です。まず、最新のブラウザの解決策について話しましょう。

HTML5 ソリューション

HTML5 が順方向と逆方向を実装する方法を理解するには、まず履歴オブジェクトと場所オブジェクトを理解する必要があります。

履歴オブジェクト

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

1.length: ユーザーが現在のタブのページにアクセスするたびに、ブラウザ履歴リスト内の URL の数が 1 ずつ増加します。プライバシー上の理由から、URL の特定の内容は表示されません。
2.state: 現在の URL に関連するオブジェクト。pushState および replaceState を通じてのみ追加または変更できます。これを使用して、URL に関連する情報を保存できます。

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

1.history.back()

このメソッドにはパラメーターがありません。トリガーされた後、前に閲覧したページに戻ります。これは、ブラウザーの「戻る」ボタンをクリックするのと同じです。

2.history.forward()

このメソッドにはパラメータがありません。トリガーされると、戻る前に閲覧していたページに戻ります。これは、ブラウザの進むボタンをクリックするのと同じです。

3.history.go(番号)

このメソッドは整数変数パラメータを受け入れます。history.go(-1) は 1 ページ戻ることと同等、history.go(1) は 1 ページ進むことと同等、history.go(0) は現在のページ。

4.history.pushState(状態、タイトル、URL)

ページを更新せずに URL を変更する鍵は次のとおりです。このメソッドは、現在のページの location.href を変更し、実行後、history.length が 1 増加します。このメソッドは 3 つのパラメータ

を受け入れます。

1.state: 現在の URL に関連するオブジェクト。
2.title: ページのタイトルですが、すべてのブラウザはこれを無視します。タイトルを変更するには、引き続き document.title を使用する必要があります。
3.url: 現在のページと同じドメイン内の URL、location.href がこの値になります。

5.history.replaceState(状態, タイトル, URL)

このメソッドは上記と同じですが、history.length は変更せず、history.state と location.href のみを変更します。

pushState と replaceState の 3 番目のパラメータはドメインを越えることができず、ブラウザの Popstate イベントと onhashchange イベントをトリガーしないことに注意してください (chrome33 でテスト済み)。

位置オブジェクト

進む/戻るボタンと履歴イベントをクリックするだけでなく、場所メソッドを通じて URL を変更したり、場所のプロパティを変更したりすることもできます。

位置オブジェクトの属性 (読み取りおよび書き込み):

1.host: ドメイン名ポート番号
2.ホスト名: ドメイン名
3.port: ポート番号
4.プロトコル: プロトコル
5.href: フルパス
6.origin: プロトコル ドメイン名 ポート
7.hash: #で始まるURL(ハッシュ)
8.pathname: ドキュメントパス ドキュメント名
9.検索:(?)

以降の内容

location.href または location.hash を変更することで、更新なしの目的を達成できます。

位置オブジェクトのメソッド:

1.assign: url の値を変更し、現在の URL を履歴に追加すると、history.length が 1 増加します。 location.asig(‘#’ x) は URL を変更しますが、ページは更新しません。
2.reload: ページを更新します。
3.replace: URL の値を変更しますが、history.length は変更されません。使用方法はassignと同様です。

ポップステートイベント

URL が変更されると、たとえば、ユーザーが進む/戻るボタン、history.go(n) (n は 0 に等しくありません)、location.hash = x (x は現在の場所に等しくありません) をクリックします。ハッシュ）により、このイベントがトリガーされます。これを使用して URL を監視し、さまざまな機能を実装できます。

コードをコピー コードは次のとおりです:

window.onpopstate = function(){
// sth
を実行します }

ハッシュチェンジイベント

ハッシュ値を変更すると、popstate イベントがトリガーされますが、popstate イベントをトリガーしても、必ずしも onhashchange イベントがトリガーされるわけではありません。テスト済み:

1.hash は変更されるが location.pathname は変更されない場合、history.pushState(", ", ‘#abc’); などの onhashchange イベントがトリガーされます。
2.history.pushState(”, ”, ‘a#abc’);

のように、ハッシュと location.pathname が一緒に変更された場合はトリガーされません。

古いブラウザでの書き方

古いブラウザは、pushState と replaceState もサポートしていないため、popstate を介して URL の変更を監視することはできません (実際、このメソッドはサポートされていません)。この場合、url# の後のコンテンツを変更することによってのみ非更新を実現できますが、onhashchange はサポートされていないため、URL の変更には無関心です (ページがページの ID に対応する位置までスクロールすることを除く)。その場合は、ポーリング、setInterval を設定して URL の値を監視するという大きなトリックに頼るしかありません。このように:

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

var prevHash = window.location.hash
var callback = function(){...}
window.setInterval(function() {
If (window.location.hash != prevHash) {
prevHash = window.location.hash
コールバック(prevHash)
}
}, 100);

もちろん、この方法で記述するのは非常に面倒です。ページ上の ID を持つタグをクリックしてハッシュを変更することを考慮しない場合は、デザイン パターンを使用して監視 URL をエレガントに実装できます。たとえば、古典的なオブザーバー パターンでは、ハッシュを変更する機能を実装するためにクラスが特別に使用され、URL の変更を監視するすべてのクラス (オブザーバー) がこの (監視対象) クラスにサブスクライブします。

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

// URL のクラスを変更します
function UrlChanger() {
var _this = this;
This.observers = [];
//オブザーバーを追加
This.addObserver = function(obj) {...}
//オブザーバーを削除
This.deleteObserver = function(obj) {...}
//オブザーバーに通知
This._notifyObservers = function() {
var length = _this.observers.length;
console.log(長さ)
for(var i = 0; i _this.observers[i].update();
}
}
//URLを変更
This.changeUrl = function(hash) {
window.location.hash = ハッシュ;
_this._notifyObservers();
}
}
//リスニングクラス
function oneOfObservers() {
var _this = this;
This.update = function() {...}
}
//実装
var o1 = 新しい UrlChanger();
var o2 = 新しい oneOfObservers();
o1.addObserver(o2);
o1.changeUrl('fun/arg1/arg2/');
//o2 は sth を実行します...