↩ プログラミング言語 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=場所

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

次の表に、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 オブジェクトのクラッシュコース

https://www.youtube-nocookie.com/watch?v=yWodQtCStNU

Javascript Window Location Object Crash Course in HTML5 (https://www.youtube-nocookie.com/watch?v=yWodQtCStNU)

JavaScript course : Redirect in JavaScript(window.location)

https://www.youtube-nocookie.com/watch?v=KTeuJxbopnU&pp=ygU0IEpTIExvY2F0aW9uIOOCquODluOCuOOCp-OCr-ODiDogVVJMIOOCkuWPluW-lyZobD1KQQ%3D%3D

JavaScript course : Redirect in JavaScript(window.location) (https://www.youtube-nocookie.com/watch?v=KTeuJxbopnU&pp=ygU0IEpTIExvY2F0aW9uIOOCquODluOCuOOCp-OCr-ODiDogVVJMIOOCkuWPluW-lyZobD1KQQ%3D%3D)

javascript

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=場所

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

次の表に、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 オブジェクトのクラッシュコース

https://www.youtube-nocookie.com/watch?v=yWodQtCStNU

Javascript Window Location Object Crash Course in HTML5 (https://www.youtube-nocookie.com/watch?v=yWodQtCStNU)

JavaScript course : Redirect in JavaScript(window.location)

https://www.youtube-nocookie.com/watch?v=KTeuJxbopnU&pp=ygU0IEpTIExvY2F0aW9uIOOCquODluOCuOOCp-OCr-ODiDogVVJMIOOCkuWPluW-lyZobD1KQQ%3D%3D

JavaScript course : Redirect in JavaScript(window.location) (https://www.youtube-nocookie.com/watch?v=KTeuJxbopnU&pp=ygU0IEpTIExvY2F0aW9uIOOCquODluOCuOOCp-OCr-ODiDogVVJMIOOCkuWPluW-lyZobD1KQQ%3D%3D)

javascript