この記事ではJavaScriptの『location.href』について、以下の内容をサンプルコードを用いてわかりやすく解説します。
location.hrefとはlocation.hrefの構文location.hrefの使い方location.hrefとlocation.replace()とlocation.assign()の違い
location.hrefとは
JavaScriptのlocation.hrefは、現在のURLを取得したり、指定したURLにページ遷移させたりできるプロパティです。
location.hrefを変更すると、指定したURLに即座に遷移し、そのURLが閲覧履歴に追加されます。そのため、ブラウザの「戻る」ボタンを押すと、元のページに戻ることが可能です。
location.hrefの構文を以下に示します。
location.hrefの構文
/*************** 現在のURLを取得する方法 ***************/
const currentUrl = location.href; // 現在のページのURLを取得
console.log(currentUrl); // コンソールに表示
// 以下に示すようにwindowオブジェクトを前につけてもOK
const currentUrl2 = window.location.href;
console.log(currentUrl2); // 結果は同じ
/*************** URLを変更（ページ遷移）する方法 ***************/
location.href = 'https://example.com'; // 指定したURLにページ遷移
// 以下に示すようにwindowオブジェクトを前につけてもOK
window.location.href = 'https://example.com';location.hrefの使い方
以下のURLのWebページを表示している状態にします。
この状態において、location.hrefでURLで変更しましょう。以下のサンプルコードをGoogle Chromeのデベロッパーツールで実行してください。
location.href = 'https://it-infomation.com';上記のサンプルコードを実行すると、https://www.google.co.jpからhttps://it-infomation.comにページ遷移します。
なお、現在のURLを取得するには、以下のコードを実行してください。
console.log('現在のURL:', location.href);location.hrefとlocation.replace()とlocation.assign()の違い
location.hrefとlocation.replace()とlocation.assign()の違いを説明します。これらの違いは閲覧履歴に新しいURLを追加するか否かです。
location.assign(URL) と location.href = URL はほぼ同じ動作をします。どちらも新しいURLを閲覧履歴に追加するので、ブラウザの「戻る」ボタンで前のページに戻ることができます。
一方、location.replace(URL) は、現在のページを新しいURLに置き換え、閲覧履歴を上書きするため、「戻る」ボタンを押しても前のページに戻ることができません。
本記事のまとめ
この記事ではJavaScriptの『location.href』について、以下の内容を説明しました。
location.hrefとはlocation.hrefの構文location.hrefの使い方location.hrefとlocation.replace()とlocation.assign()の違い
お読み頂きありがとうございました。