ホーム プログラミング言語 Web関連 javascript JS Location オブジェクト: URL を取得






JS Location オブジェクト: URL を取得




 
 
JavaScript ロケーション オブジェクトには、現在のページの完全な URL、ポート番号など、現在のページ リンク (URL) に関する情報が含まれています。ロケーション オブジェクトは、window オブジェクトの location 属性を介して取得できます。 window オブジェクトはグローバル オブジェクトであるため、 window.locationを使用する場合は、window プレフィックスを省略できます. たとえば、 window.location.href location.hrefと省略できます.

 

ロケーション オブジェクトのプロパティ

次の表に、JavaScript ロケーション オブジェクトで一般的に使用されるプロパティとその説明を示します。

属性 説明
hash URL のアンカーの部分を返します。例: https://it-kiso.com#js の #js。
host URL のホスト名とポート番号を返します (例: https://it-kiso.com:8080)。
hostname URL のホスト名を返します (例: https://it-kiso.com)。
href https://it-kiso.com/javascript/location-object.html などの完全な URL を返します。
pathname /で始まる URL のパス部分を返します。
port URL のポート番号を返すか、URL に明示的なポート番号が含まれていない場合は空の文字列' 'を返します。
protocol URL プロトコル、つまり http: や https: など、URL のコロン:の前の部分を返します。
search URL のクエリ部分、つまり、URL の?とその後の一連のクエリ パラメータを返します。

サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <a href="https://it-kiso.com:8080/javascript/location-objcet.html?course=javascript&title=location#content" id="url"></a>
    <script type="text/javascript">
        var url = document.getElementById('url');
        document.write("<b>ハッシュ:</b>" + url.hash + "<br>");
        document.write("<b>ホスト:</b>" + url.host + "<br>");
        document.write("<b>ホスト名:</b>" + url.hostname + "<br>");
        document.write("<b>リンク先URL:</b>" + url.href + "<br>");
        document.write("<b>パス名:</b>" + url.pathname + "<br>");
        document.write("<b>ポート番号:</b>" + url.port + "<br>");
        document.write("<b>プロトコル:</b>" + url.protocol + "<br>");
        document.write("<b>パラメータ:</b>" + url.search + "<br>");
    </script>
</body>
</html> 

操作の結果は次のとおりです。

ハッシュ: #コンテンツ
ホスト: it-kiso.com:8080
ホスト名: it-kiso.com
href: https://it-kiso.com:8080/javascript/location-objcet.html?course=javascript&title=location#content
パス名: /javascript/location-objcet.html
ポート: 8080
プロトコル: http:
検索: ?course=javascript&title=場所

JS Location オブジェクト: URL を取得
JS Location オブジェクト: URL を取得

ロケーション オブジェクトのメソッド

次の表に、JavaScript ロケーション オブジェクトで一般的に使用されるメソッドとその説明を示します。

方法 例証する
assign 指定された URL をロードします。つまり、指定されたドキュメントをロードします。
reload 現在の URL を再読み込みします。
replace 現在のドキュメントを指定された URL に置き換えます。assign() メソッドとは異なり、replace() によって置き換えられた新しいページは閲覧履歴に保存されず、ユーザーは back を使用してこのページに戻ることはできません。
toString() href 属性と同じ効果があり、現在の完全な URL を文字列として返します。

サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <a href="https://it-kiso.com:8080/javascript/location-objcet.html?course=javascript&title=location#content" id="url"></a>
    <button onclick="myAssign()">assign()</button>
    <button onclick="myReload()">reload()</button>
    <button onclick="myReplace()">replace()</button>
    <button onclick="myToString()">toString()</button>
    <script type="text/javascript">
        var url = 'https://it-kiso.com';
        function myAssign(){
            location.assign(url);
        }
        function myReload(){
            location.reload();
        }
        function myReplace(){
            location.replace(url);
        }
        function myToString(){
            var url = document.getElementById('url');
            var str = url.toString();
            alert(str);
        }
    </script>
</body>
</html> 
 

「 JS Location オブジェクト: URL を取得」についてわかりやすく解説!絶対に観るべきベスト2動画

HTML5 での Javascript Window Location オブジェクトのクラッシュ コース
JavaScript course : Redirect in JavaScript(window.location)