ホームページ  >  記事  >  ウェブフロントエンド  >  ES6 のページ リダイレクトについて説明しますか?

ES6 のページ リダイレクトについて説明しますか?

WBOY
WBOY転載
2023-09-13 16:33:03660ブラウズ

解释一下 ES6 中的页面重定向?

このチュートリアルでは、ES6 バージョンの JavaScript で導入されたページ リダイレクトについて紹介します。ページ リダイレクトは、Web ページ訪問者を現在の URL から別の URL に送信する方法です。当社は、ユーザーを同じ Web サイト上の別のページ、または別の Web サイトまたはサーバーにリダイレクトする場合があります。

JavaScript では、ウィンドウは位置オブジェクトを含むグローバル オブジェクトです。 ES6 では、location オブジェクトのさまざまなメソッドを使用してページをリダイレクトできます。これについては、次に学習します。

window.location オブジェクトの href 属性値を使用します

ウィンドウ グローバル オブジェクトの location オブジェクトには、href 属性が含まれています。 location オブジェクトには、現在表示しているページの位置に関するすべての情報が含まれています。 location オブジェクトの「href」属性には、現在の URL が含まれます。

訪問者を別の URL にリダイレクトするには、Web ブラウザーで現在の URL を変更する必要があります。これは、location オブジェクトの href 属性の値を変更することで実現できます。

###文法###

ユーザーは、次の構文に従って href 属性の値を変更することで、訪問者を別のページにリダイレクトできます。

リーリー

上記の構文で、新しい URL 値を window.location オブジェクトに割り当てると、デフォルトでは、location オブジェクトの href 属性の値が変更されます。

###例###

以下の例では、「別の Web ページにリダイレクト」というテキストを含むボタンを作成しました。ユーザーがボタンをクリックすると、JavaScript の redirect() 関数が呼び出されます。

redirect() 関数では、訪問者を新しい URL に誘導する location オブジェクトの href 属性の値を変更しています。

リーリー

location.assign()

メソッドを使用します

assign()

は、position オブジェクト内で定義されたメソッドです。 location.assign() メソッドを使用して、ブラウザ ウィンドウに新しいドキュメントをロードできます。ブラウザに新しいドキュメントを再ロードすることは、リダイレクトを意味します。

###文法### 次の構文に従って、allocate() メソッドを使用してリダイレクトします。 リーリー 上記の構文では、場所オブジェクトを参照として使用して assign() メソッドを呼び出します。

パラメータ

New_URL

- これは、ユーザーをリダイレクトする URL です。

    ###例###
  • この例では、location オブジェクトの assign() メソッドを使用して、現在のブラウザ ウィンドウに別の Web ページを読み込みます。

    リーリー 使用 location.replace()

    メソッド
location オブジェクトの

replace()

メソッドは assign() メソッドと同じように機能します。 Replace() メソッドと assign() メソッドの唯一の違いは、replace() メソッドは現在の URL を履歴スタックからの新しい URL に置き換えることです。したがって、履歴スタックに前の Web ページに関する情報を含めることはできません。つまり、ユーザーは戻ることができません。

assign() メソッドは、履歴スタックに新しいエントリを追加します。したがって、ユーザーは Web ブラウザの戻るボタンを使用して前のページに戻ることができます。 ###文法###

ユーザーは、replace() メソッドを使用して、次の構文に従ってページをリダイレクトできます。

リーリー パラメータ

Redirection_URL

- リダイレクト URL は、Web ページへの訪問者をリダイレクトする新しい URL です。

###例###

この例では、location オブジェクトの replace() メソッドを使用して、ユーザーを新しい Web ページにリダイレクトします。出力では、ユーザーはリダイレクト後に戻るボタンをクリックして戻ることができます。 Replace() メソッドは戻ることができません。

リーリー

さらに、ユーザーはウィンドウ オブジェクトの navigate() メソッドをリダイレクトに使用することもできます。 navigate() メソッドは非推奨であるため、リダイレクトには推奨されません。
  • ユーザーを別の Web ページにリダイレクトする 3 ~ 4 つの方法を学びました。ユーザーはニーズに応じて任意の方法を使用できます。たとえば、現在の URL を置き換える場合は Replace() メソッドを使用し、それ以外の場合は assign() メソッドを使用します。ユーザーは reload() メソッドを使用して新しいサーバー データを取得できます。

以上がES6 のページ リダイレクトについて説明しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はtutorialspoint.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。