HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM Location portプロパティとは？URLのポート番号を取得・設定する方法

JavaScriptのLocationオブジェクトが持つportプロパティは、現在のURLに含まれるポート番号を取得（読み取り）または設定（書き込み）するためのプロパティです。なお、URLにポート番号が明示的に指定されていない場合、この値は空の文字列として返されるため、画面上には何も表示されない点に注意が必要です。例えば、「https://www.example.com」のようにポート番号を省略したURLでは、デフォルトポート（HTTPSなら443番、HTTPなら80番）が自動的に使用されますが、portプロパティの戻り値は空になります。

構文

portプロパティの基本的な構文は以下の通りです。

ポート番号を取得する場合

location.port

ポート番号を設定する場合

location.port = ポート番号

使用例

それでは、Location portプロパティを使った具体的なサンプルコードを見てみましょう。以下の例では、ボタンをクリックすると現在のURLからポート番号を取得し、画面に表示します。

<!DOCTYPE html>
<html>
<head>
<title>Location port</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Location-port</legend>
<label for="urlSelect">Current URL:</label>
<input type="url" size="30" id="urlSelect" value="https://www.example.com:2544/aboutUs/CTO.htm">
<input type="button" onclick="getport()" value="Get Port">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var urlSelect = document.getElementById("urlSelect");
   function getport(){
      divDisplay.textContent = 'URL port: '+location.port;
   }
</script>
</body>
</html>

実行結果

このコードをブラウザで実行すると、以下のような動作になります。

「Get Port」ボタンをクリックする前：

HTML DOM Location portプロパティとは？URLのポート番号を取得・設定する方法

「Get Port」ボタンをクリックした後：

HTML DOM Location portプロパティとは？URLのポート番号を取得・設定する方法

このように、サンプルURL「https://www.example.com:2544/aboutUs/CTO.htm」にはポート番号「2544」が明示的に含まれているため、ボタンをクリックすると「URL port: 2544」という結果が表示されます。もしURLにポート番号が含まれていなければ、空の文字列が返されます。

  1. HTML DOMのLocation hashプロパティとは？使い方をサンプルコード付きで解説

    Location hashプロパティとは？ Location hashプロパティは、HTML DOMにおいて現在のURLの「アンカー部分」（フラグメント識別子）を取得・設定するためのプロパティです。値を設定すると、先頭に「#」が自動的に付加されたうえでURLに追加されます。 たとえば「https://www.example.com/#section1」というURLの場合、location.hashは「#section1」を返します。 構文 基本の書き方は以下のとおりです。 hashプロパティの値を取得する場合 location.hash hashプロパティに値を設定する場合 location.

  2. HTML DOMのLocation searchプロパティとは？URLクエリ文字列の取得・設定方法を解説

    JavaScriptのLocationオブジェクトにおけるsearchプロパティは、URLに含まれるクエリ文字列（「?」以降の部分）を取得または設定するためのプロパティです。例えば、「https://example.com/page?name=taro&id=123」というURLの場合、searchプロパティは「?name=taro&id=123」という文字列を返します。 構文 searchプロパティの基本的な構文は以下のとおりです。 値の取得 location.search 値の設定 location.search = searchString 使用例 ここでは、実際にsearchプ