JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのwindow.location.href・replace・assignの違いを徹底解説

JavaScriptでは、windowオブジェクトの中にlocationオブジェクトが含まれています。このlocationオブジェクトを利用することで、現在のページURLの取得や、別ページへの遷移制御などが可能になります。主なプロパティ・メソッドは以下の通りです。

window.location.hrefとは

window.location.hrefは、現在表示しているページの完全なURLを文字列として取得するプロパティです。取得したURLは画面表示や条件分岐などに活用でき、逆に新しいURLを代入すれば、そのページへ遷移させることもできます。

使用例

<!DOCTYPE html>
<html>
   <body>
      <p>下のボタンをクリックすると、ページの完全なURLを取得して表示します。</p>
      <button onclick="display()">URLを取得</button>
      <script>
         function display() {
            var res = location.href;
            document.write(res);
         }
      </script>
   </body>
</html>

window.location.replaceとは

window.location.replace()は、現在のドキュメントを指定したURLのドキュメントに置き換えるメソッドです。重要なポイントとして、このメソッドで遷移した場合はブラウザの履歴に新しいエントリが追加されません。そのため、遷移後に「戻る」ボタンを押しても、元のページには戻れません。一時的なページや、ユーザーに戻ってほしくない画面への遷移に適しています。

使用例

<!DOCTYPE html>
<html>
   <body>
      <button onclick="display()">現在のドキュメントを置き換える</button>
      <script>
         function display() {
            location.replace("https://www.qries.com");
         }
      </script>
   </body>
</html>

window.location.assignとは

新しいドキュメントを読み込みたい場合は、window.location.assign()を使用します。指定したURLへ遷移し、その際ブラウザの履歴にも記録されます。つまり、遷移後も「戻る」ボタンで元のページに戻ることができるのが特徴です。

使用例

<!DOCTYPE html>
<html>
   <body>
      <button onclick="display()">新しいドキュメントを開く</button>
      <script>
         function display() {
            location.assign("https://www.qries.com");
         }
      </script>
   </body>
</html>

3つの違いの比較まとめ

それぞれの動作とブラウザ履歴の扱いの違いを、以下の表にまとめました。

方法動作履歴への記録
location.href = "URL"指定したURLへ遷移する記録される（戻れる）
location.assign("URL")指定したURLへ遷移する記録される（戻れる）
location.replace("URL")現在のページを置き換えて遷移する記録されない（戻れない）

通常のページ遷移であればhrefやassign()を使い、履歴を残したくないケース（リダイレクト処理など）ではreplace()を選ぶのが基本です。用途に応じて適切に使い分けましょう。

  1. HTMLとHTML5の違いとは?主要な5つの相違点をわかりやすく解説

    Webページ制作の基礎となるHTMLについて学ぶ前に、まず「マークアップ言語」という概念を理解しておきましょう。HTMLは「Hyper Text Mark-up Language(ハイパーテキスト・マークアップ言語)」の略称で、タグ(tag)を使ってテキスト文書の構造を定義する言語です。このタグによって、Webページ全体の構造が決定されます。つまりHTMLとは、「ハイパーテキスト」と「マークアップ言語」を組み合わせたものなのです。 HTML5はHTMLの発展版(上位バージョン)にあたるため、新たに追加された機能を中心として、両者にはいくつかの顕著な違いが存在します。以下の表は、HTMLとHT

  2. HTMLとASPの違いとは？5つの観点でわかりやすく解説

    HTMLとASPは、どちらもWeb開発で広く利用されている技術であり、Webサーバーのページやアプリケーション開発に欠かせない存在です。しかし、両者は動作の仕組みや役割において大きく異なります。 本記事では、HTMLとASPそれぞれの性質をもとに、「定義」「処理方式」「ページの種類」「データベース対応」「ファイル拡張子」の5つの観点から、両者の違いをわかりやすく解説します。 HTMLとASPの比較一覧表 比較項目HTMLASP 正式名称Hypertext Markup Language（ハイパーテキスト・マークアップ言語）Active Server Pages（アクティブサーバーペー