【Javascript入門】location.hrefの便利な使い方

locationは現在の位置情報を得るためのコードです。

たとえば、URL、ホスト名のパス、プロトコルの基本データ、といった情報を取得できます。

具体的な使用方法としては、locationの後ろにドット○○と記述することで、必要な情報を取得することができます。

locationのプロパティ

locationで取得できる情報は複数ありますが、プロパティ、メソッドには以下のようなものがあります。

location.href
URLの取得、画面遷移
location.protocol
現在のプロトコル情報(http:、もしくはhttps:)を取得
location.host
プロトコル情報を除外したURLを取得する(port情報あり)
location.hostname
プロトコル情報を除外したURLを取得する(port情報なし)
location.port
ポート番号の取得・設定
location.pathname
URLでパスの部分の取得・設定
location.search
URL内のクエリ情報の抽出、取得
location.hash
URL内のハッシュ情報の抽出、取得
location.origin
プロトコルやポートを含めたURLの取得
location.assign
指定したURLに画面遷移（閲覧履歴に残る）
location.replace
指定したURLへの画面遷移（閲覧履歴に残らない）
location.reload
現在のURLを再読込（true指定だとサーバーから読み込み）
location.tostring
現在のURLを文字列で取得

以上のようなプロパティ、メソッドがありますが、このページでは主に「location.href」について解説します。

location.hrefの使い方

それではlocation.hrefの使い方をいくつか紹介します。

URLの取得

location.hrefはURLの取得がメインの使い方になります。具体的には以下のサンプルコードのように使います。

var page_url = location.href;
console.log(page_url);

上記のソースコードを実行すると、現在アクセスしているURL情報の取得、表示ができます。

画面遷移

次に、location.hrefを使用することで画面遷移ができます。以下のようなコードで遷移できます。

location.href = 'https://www.〇〇 ';

上記のように遷移させたいコードを記述すると、そこに遷移します。たとえばユーザーがボタンをクリックした際に別のページに飛ばすようなロジックで使用することが多いですが、記述方法はこのように非常にシンプルです。

window.openと組み合わせて使用する

location.hrefはwindows.openと組み合わせて画面遷移させることもできます。具体的には、以下のようなコードになります。

window.open().location.href = 'http://www.〇〇';

このように記述すると、動的にページを遷移させることができます。また、location.hrefを使用しているため別タブで開きます。ただし、通常は以下のようにシンプルなコードで遷移させます。

window.open('http://www.〇〇 ');

location.hrefの応用的な使い方

次に、location.hrefの応用的な使い方を紹介します。

応用的と言っても難しいわけではなく、イベント発生時のURLジャンプやフレーム解除についてですが、まずイベント発生時にURLを飛ぶ方法ですが、以下のサンプルコードのように実装します。

<script>
function jump(){
 　　　　if (confirm("ジャンプしますか？")==true)
 　　　　 　　　　//OKなら〇〇ページにジャンプさせる
 　　　　 　　　　location.href = "https://www.〇〇 ";
}
</script>
<input type="button" name="link" value="ジャンプ " onclick="jump()">

上記のソースコードでは「ジャンプ」ボタンを設定し、ボタンをクリックすると「ジャンプしますか？」という確認が表示される仕様になっています。OKを押すと○○ページにジャンプします。

実践的にHTMLと組み合わせたコードなので応用編として紹介しましたが、実際は基本的な使用方法になります。次に、インラインフレームでフレームを解除する方法もあります。方法は以下のコードです。

top.location.href="URL"
//全フレームを解除
parent.location.href="URL"
//親フレームを解除

hrefsと似たような使い方ができるメソッド

hrefsと似たような使い方ができるメソッドとしてreplaceがあります。使い方も同様で、以下のコードでそれぞれぺージ遷移が可能です。

location.replace('http://www.〇〇 ');

location.href = 'http://www.〇〇 ';

このように使い方は同じで、なおかつ遷移の仕方も同じです。

ではまったく同じかというと、実は明確な違いがあります。その違いとは、「ブラウザ履歴に残るかどうか」と「前のページに戻ることができるかどうか」の二点です。

まずreplaceを使用した場合履歴が残らず、前のページに戻ることができません。一方で、hrefsの場合履歴が残り、前のページに戻ることができます。どちらが良いというわけではなく、用途に応じて使い分けることになるでしょう。

利用頻度としては、hrefsの方が多いかと思います。なぜなら、ページを戻れた方が便利な場合が多いからです。

その他のプロパティ、メソッド

locationに使えるプロパティ、メソッドの一覧を紹介しましたが、パスやプロトコルの取得方法を紹介しておきます。

//ディレクトリを取得
console.log( location.pathname );
//別のパスに置き換える
location.pathname = ' http://www.〇〇 ';

上記の通りpathnameを使用すればディレクトリの取得やパスの置換ができます。次に、protocolを使用すると現在開いているページのプロトコル情報の取得が可能です。具体的には以下のようになります。

var proto = location.protocol;
console.log( proto );

上記のように記述すると、現在開いているWebページのプロトコルが表示されます。ちなみにプロトコルとは、「http:」「https:」のことです。同じように、ポート番号のみを取得することもできます。以下のように記述します。

//ポート番号を取得する
console.log( location.port );

//ポート番号を再設定する
location.port = 80;

上記のソースコードでは、ポート番号を取得した後に再度ポート番号を設定しています。location.hrefやそれに類似するコードを紹介してきましたが、基本的にはどれもそれほど難しいものではありません。

また頑張って覚えなければならないものでもないので、ざっくりと概要を把握しておけば、実際に使用する際に詳細なコードを調べて記述すれば問題ないでしょう。

案件量が豊富なアルマサーチ

最後に、アルマサーチのご紹介！

アルマサーチはフリーランス向けに案件をご紹介することに特化したエージェントサービスです。豊富な案件量から、安定して継続的な案件のご紹介を実現しており、口コミから登録エンジニアが急増中です。

アルマサーチが選ばれる理由

1. 豊富な案件量。週3?4日の案件や在宅リモート案件も。
2. 優秀なコンサルタント陣。
3. 案件に参画後もしっかりサポート。

豊富な案件量

フリーランス向けに特化し、業界屈指の案件量を誇ります！週3?4日の案件や、在宅リモート案件もありますし、その他あらゆる希望をしっかりお伝えください。最適な案件のご紹介をさせていただきます。

優秀なコンサルタント陣

技術に疎く、開発の希望を伝えても響かないエージェント・・・嫌ですよね。アルマサーチにはそのような者は一切おりません！さらに独立にまつわる税金や保険関係に詳しいスタッフが徹底的にサポートさせていただきます。

案件に参画後もしっかりサポート

常駐先が決まった瞬間に、一度も連絡が取れなくなるエージェント・・・いますよね？アルマサーチでは、そのようなことは一切ありません！常に電話やメールは即対応しますし、月に１度のランチミーティングなどから現場の状況を細かくヒアリングし、就業環境改善に尽力いたします。