JavaScript を使用して back 関数を実装する方法

JavaScript は、Web アプリケーションや Web サイトの開発で一般的に使用されるスクリプト言語です。このプロセスでは、ユーザー インターフェイス機能が重要であり、その 1 つが「戻る」ボタンの機能です。履歴オブジェクトは HTML5 で提供されており、戻る機能と進む機能を簡単に実装できます。この記事では、JavaScriptを使用してback関数を実装する方法を紹介します。

1.history.back() を使用する

history.back() メソッドは、ユーザーのアクセス履歴の前のレコードに移動するために使用されます。たとえば、ユーザーが検索機能を使用する場合、いくつかのリンクをクリックした後、前のページに戻って変更を加えたい場合があります。この場合、history.back() メソッドを使用できます。

次のように使用します:

history.back();

前のページに戻ります。ユーザーが最初にアクセスしたページが検索結果ページだった場合は、検索前のページが返されます。これは、履歴オブジェクトにはユーザーのアクセス履歴が保存されるためです。

2.history.go() を使用する

history.go() メソッドを使用して前のページに移動することもできますが、history.back() との違いは、返すレコードの数を指定できます。たとえば、ユーザーが前に表示した 3 番目のページに戻りたい場合は、次のコードを使用できます。

history.go(-2);

これにより、3 番目に新しいページが返されます。ユーザーが訪問しているページが 3 ページ未満のときに 3 ページに戻ろうとすると、最も古いレコードが返されます。

3. window.location.hrefを使用する

もう1つの方法は、location オブジェクトを使用して前のページに戻ることです。 window.location.href プロパティを使用して現在のページの URL を取得し、それを前のページの URL にリダイレクトします。このメソッドのコード例は次のとおりです。

window.location.href = document.referrer;

document.referrer プロパティを使用して前のページの URL を取得し、window.location.href を前のページにリダイレクトします。

概要

上記の 3 つの方法は、JavaScript アプリケーションや Web サイトに「戻る」ボタンの機能を実装するのに役立ちます。これらの方法のいずれかを使用すると、ユーザーの履歴に簡単に戻り、ユーザー エクスペリエンスを向上させることができます。

ただし、Web サイトまたはアプリケーションがシングル ページ アプリケーション (SPA) アーキテクチャを使用している場合は、バック アンド フォワード機能を実装するためにフロントエンド フレームワークのルーター機能を使用する必要がある場合があることに注意することが重要です。 、Vue ルーターや React ルーターなど。これは、SPA では、ページの切り替えがブラウザーの履歴ではなく、フロントエンド ルーターを通じて管理されるためです。

「戻る」ボタンを実装するときは、ユーザー エクスペリエンスを念頭に置き、実装方法がアプリまたは Web サイトのニーズを満たしていることを確認してください。

以上がJavaScript を使用して back 関数を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。