JavascriptでWEBページのURLを取得、ブラウザに表示する方法

Javascriptのwindow.locationオブジェクトを使って開いているWEBページのURLに関する様々な情報を取得する事ができます。

Javascriptで取得するデータは基本的にユーザーには見せないので、コンソールパネルのログ画面で確認します。

あえてWEBページに複数のlocationプロパティのログを表示させるなら、insertAdjacentHTML()メソッドを使うのが便利です。

JavascriptでWEBページのURLを取得する

本記事ではJavascriptを使って、今表示しているWEBページのURLを取得する方法を紹介します。

WEBアプリなどを構築する際、URL情報を取得して使うケースがよくありますので知っておいて損はありません。

JavascriptでページURLを取得するには、「locationオブジェクト」を使います。

locationオブジェクト

一口にURLと言っても、その中にはホスト情報・アンカー・パス・パラメータなど、様々なデータが詰め込まれています。

それらのデータを取得するのが、window.locationオブジェクトです。

現在表示しているURL上のあらゆる情報が、各種locationプロパティから参照できます。

プロパティの種類と参照できるデータ

この様にJavascriptを使って、様々なURL情報が取得できる訳です。

Javascriptのconsole.logによる取得方法

以下は、現在のページのURL情報を取得するコードになります。

<input type="button" value="location情報取得" id="btnCheck"> <script> let btnCheck = document.getElementById('btnCheck'); btnCheck.addEventListener('click', function(){ console.log('href:' + location.href); console.log('protocol:' + location.protocol); console.log('host:' + location.host); console.log('hostname:' + location.hostname); console.log('port:' + location.port); console.log('pathname:' + location.pathname); console.log('search:' + location.search); console.log('hash:' + location.hash); }); </script>

locationプロパティの種類

以下は本記事URL「https://lpeg.info/html/Javascript_url.html」からデータを取得するときの例です。

URL全体の取得（location.href）

この場合URL情報を丸ごと取得します。

ホスト名の取得（location.host）

この場合ドメイン情報が表示されます。

パス名の取得（location.pathname）

この場合、ドメイン名以外のディレクトリ＋ページファイル名が表示されます。

パラメータ部分の取得（location.search）

URLにパラメータがついている場合は、その部分が表示されます。

アンカー部分の取得（location.hash）

いわゆるページ内リンクに使われるidのついた箇所で、#で始まる部分です。

ポート番号の取得（location.port）

ポート番号は、省略されている場合は取得することができません。

仮に指定していてもブラウザによって表示を省略するため、location.portを参照しても空白となります。

プロトコルの取得（location.protocol）

http:やhttps:などの通信プロトコル部分を表示します。

本サイトはSSL暗号化をしているので、https:になりますね。

取得した情報を確認する方法

Javascriptで取得したデータは、基本的にWEBページ上に直接表示されません。

そもそも取得したデータをユーザーに見せるように作られていないためです。

それをあえて見るためには、「アラートパネル」や管理者ツールの「console画面」が必要になります。

コンソール画面のログを確認する

まずはconsole画面上の「ログ」データとして確認する方法です。

管理者ツールのコンソールパネルから、取得したlocationプロパティのログデータを確認する事ができます。

コンソール画面での確認

このページを開いた状態でキーボードのF12を押しましょう。

管理者向けのディベロッパーツールが表示されます。

画面右側にある「console」パネルタブをクリックして開きましょう。

既にいろいろデータが表示されていると思いますが、それは気にしないで下さい。

この状態でWEBページにある「コンソール確認」ボタンを押すと、コンソール画面上にデータが表示されます。

実行サンプル

では実際にキーボードのF12を押してコンソール画面を出し、下のボタンを押してみて下さい。

alertで確認する

コンソール画面ではなくブラウザのアラート画面に出す方法もあります。

Javascriptコード

<input type="button" value="URLを取得" onClick="showUrl()"> <script> function showUrl(){ var url= location.href; //url情報全体 alert(url); } </script>

上記は「location.href」情報1種のみ取得しています。

これによりブラウザ画面上部に「このページの内容」のアラートパネルが出てきます。

その中にlocation.hrefで取得したURL情報が記載されているのがわかります。

実行サンプル

実際にアラート画面が表示されますので、確認してみて下さい。

取得した情報をWEBページ上に出力したい

先程も説明した通り、本来Javascriptで取得したデータはそのまま表示するのではなく、別の用途に使う事が多いです。

そのため直接WEBページ上に表示する事はあまりありません。

しかし本記事ではあえて、コンソール画面やアラート画面を使わずにWEBページ上にテキストとして出力をしてみます。

Javascriptの基本的なルール

今回locationオブジェクトプロパティで参照したデータを表示する訳ですが、基本的なお約束事があります。

Javascriptではphpの「print」命令の様に、無作為にデータ出力する事は許されていません。

あくまで「掲載する位置」を特定し、その「指定位置の中身」を「指定した内容」に「書き換える」事が基本になります。

この事を念頭にした場合、まずは出力する場所を指定しなければなりません。

指定位置の設置

そこで今回のURLを表示させる位置を決めましょう。

今回は以下のidをつけた個所にしました。

表示用HTMLタグ

<div id="url_display"></div>

divタグの中身は空白にしておきます。ここにlocationオブジェクトの取得データが入ります。

Javascriptではこのように、中身を書き換える（データを出力する）位置をidなどで指定する必要があります。

ボタンの設置

単に確認をするだけなのでダイレクトに表示しても良いのですが、今回はボタンアクションでURL情報を表示させる様にします。

<input type="button" value="URLを取得" onClick="showUrl()">

上記の様なinputボタンを設置し、onclickイベントでJavascriptを実行します。

Javascriptコード

<script> function showUrl(){ var url= location.href; document.getElementById('url_display').innerHTML = url ; } </script>

HTML要素の中身を書き換える「.innerHTML」

上記では出力に「.innerHTML」メソッドを使っています。

innerHTMLはHTML要素の中身を変更する際に利用します。

document.getElementById("ID")と組み合わせて使うパターンが主流ですね。

.textContent

似たようなメソッドに「.textContent」メソッドもあります。

.innerHTMLと.textContentには明確な違いがあります。

.innerHTMLでは<br>タグなどのHTMLタグも、書き換え内容に含む事ができます。

それに対し.textContentは、<br>をタグとして解釈せずそのまま文字列として出力します。

という使い分けですね。

実行サンプル

下のURLを取得ボタンを押すと枠内のテキストがURLに書き換えられます。

連続して中身を書き換える場合

いま紹介したinnerHTMLは、あくまで「中身を1度書き換える」ものです。

locationオブジェクトには様々なプロパティがあり、他にも複数のデータが存在します。

コンソール画面で表示させたように、location.href以外の複数のプロパティデータも一度に出したいですよね。

こんな時は、書き換えるよりも「追加する」べきでしょう。

ここで活用されるのが「insertAdjacentHTML()」メソッドです。

insertAdjacentHTML()

.insertAdjacentHTML()は、特定の位置にテキストを挿入するメソッドです。

書式は以下の通りです。

前のポジション部分には、次の4つの文字列のいずれかを記入指定します。

後ろの「テキスト」部分には文字列はもちろん、変数なども入れる事ができます。

このメソッドを使えば、複数のlocationデータを所定位置にどんどん追加で入れていく事ができますよね。

Javascriptコード

<script> function showUrl(){ var url= location.href; var url2= location.pathname; …以下すべてのプロパティ var id = document.getElementById("url_display"); id.insertAdjacentHTML("beforeend",url); id.insertAdjacentHTML("beforeend","<br>"); id.insertAdjacentHTML("beforeend",url2); } </script>

上記コードでは「beforeend」を使っています。

beforeendは、要素内の頭から順々に追加するためのポジションです。

実際にコンソールを確認してみると、url_displayタグの中に頭から追加されているのがわかると思います。

実行サンプル

下のURLを取得ボタンを押すと枠内にURLが表示されます。

この様にinsertAdjacentHTMLを使う事で、全てのlocation情報をページ上に表示する事ができます。

ポジションを間違えない様に

ポジションの「beforebegin」は、要素の直前の位置に入ります。

つまりdivタグ「url_display」要素の直前という事で、divタグの中には入らないのです。

常にdivタグの前に挿入されるので注意しましょう。

一押し人気コーナー紹介