お役立ち情報

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

JavaScriptのイメージ

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やそれに類似するコードを紹介してきましたが、基本的にはどれもそれほど難しいものではありません。

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

キャリアカウンセリングのプロとして
あなたに合った案件をご案内します。

まずはお気軽にお問い合わせください!

イメージ