ywork2020.com

Title

Nodeの絶対基底URLを取得する

目次 (INDEX)

baseURIとは

ここで説明するbaseURI とは次の語句からなるjavascriptのプロパティです。
base
読み: ベース
意味: 基部、底、土台
URI
読み: ユーアールアイ
概略: URL + URN = URI
意味:
URL = ネットワーク上の住所にあたります。
URN = ネットワーク上のファイル名にあたります。
URI = https や http や ftp などのプロトコルを含むネットワーク上の ディレクトリ + ファイル名 の総称にあたります。

目次に戻る

baseURIプロパティの概要

このプロパティは、Nodeがもつ絶対ベースURLとURNを取得することができます。

ただし、ドキュメント内に base要素 がある場合には、絶対ベースURIになるとは限りません。 これは、 base要素 により、基底URLが動的に変更されることに関係しています。 変更された基底URIがURLまでの指定にとどまる場合、プロトコルから変更された基底URLまでを取得することとなり、URNは取得できないことになります。

上記のことを逆に言い換えれば、 base要素 を使用していないのであれば、このプロパティは「プロトコル + ドメイン + ディレクトリ + ファイル名」の全てであるURIを取得できることになります。

このプロパティは読み取り専用であるため、値の代入はできません。

単純に、このドキュメントのURIを取得するのであれば、 window.location.href プロパティを使ってください。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

var nodeBaseURI = node.baseURI;

目次に戻る

サンプルコードと実行結果

このサンプルではrootノードをElementオブジェクトとして取得して、そのbaseURIの値を表示します。 :rootとはhtml要素のことです。

このページにはbase要素を組み込んでありますので baseURIではbase要素で設定されたディレクトリまでのURLしか取得できません。 このことを踏まえて、window.location.href から取得できるURIの値も同時に表示するようにしています。

サンプルコード: HTML
<head>
	<base href="../content/">
</head>
<body>
	<script>...</script>
</body>
  • 02: base (href属性に指定したURIを基底URIに変更します。)
  • 05: script (プログラムを実行します。内容はscriptコードを参照してください。)
サンプルコード: script
<script>
	let elmRoot = document.querySelector(":root");
	document.write(
		elmRoot.baseURI, "<br>",
		window.location.href
	);
</script>
  • 02: elmRoot (querySelector()でroot要素をElementオブジェクトとして取得します。)
  • 03-06: write() (内容を文書ストリームに書き出します。)
  • 04: baseURI (基底URIです。ここではプロトコルからbase要素で指定しているURLまでの値が取得できます。)
  • 05: window.location.href (このページのURIです。)
実行結果:

目次に戻る