【初心者向け】JavaScriptとjQueryでベースURLを取得：分かりやすく解説
JavaScript または jQuery でベース URL を取得する方法
Web ページのベース URL は、現在のページの プロトコル、ホスト名、ポート、および パス を含む URL です。これは、相対パスを使用して静的ファイルや他のリソースへのリンクを作成する際に役立ちます。
JavaScript でベース URL を取得するには、次のいずれかの方法を使用できます。
- window.location オブジェクトを使用する:
var baseUrl = window.location.origin + '/' + window.location.pathname;
このコードは、現在のページの プロトコル と ホスト名 を取得し、パス を追加して完全なベース URL を作成します。
var baseUrl = location.href.replace(location.pathname, '');
var baseUrl = $(location).attr('href').replace($(location).attr('pathname'), '');
例
次の例は、JavaScript と jQuery の両方を使用してベース URL を取得する方法を示しています。
<!DOCTYPE html>
<html>
<head>
<title>Get Base URL</title>
</head>
<body>
<script>
// JavaScript でベース URL を取得
var baseUrlJs = window.location.origin + '/' + window.location.pathname;
console.log('JavaScript ベース URL:', baseUrlJs);
// jQuery でベース URL を取得
var baseUrlJq = $(location).attr('href').replace($(location).attr('pathname'), '');
console.log('jQuery ベース URL:', baseUrlJq);
</script>
</body>
</html>
このコードを実行すると、次の出力がコンソールに表示されます。
JavaScript ベース URL: http://localhost:8080/
jQuery ベース URL: http://localhost:8080/
この例では、http://localhost:8080/ が現在のページのベース URL です。
JavaScript または jQuery でベース URL を取得するには、さまざまな方法があります。上記の例は、最も一般的な方法のいくつかを示しています。
どの方法を使用するかは、個々のニーズによって異なります。ただし、ほとんどの場合、window.location オブジェクトまたは location オブジェクトを使用するだけで十分です。
補足:
- ベース URL を取得する際には、HTTPS を使用しているかどうかを確認する必要があります。HTTPS を使用している場合は、
window.location.originではなくwindow.location.hrefを使用する必要があります。 - 一部の Web サーバーは、URL の末尾にスラッシュ (
/) を追加することがあります。これは、window.location.pathnameプロパティに影響を与える可能性があります。スラッシュを削除するには、次のようなコードを使用できます。
var pathname = window.location.pathname;
if (pathname.charAt(pathname.length - 1) === '/') {
pathname = pathname.substring(0, pathname.length - 1);
}
- 相対パスを使用して静的ファイルや他のリソースへのリンクを作成する場合は、必ずベース URL を先頭に付けます。たとえば、次のようにします。
var link = baseUrl + '/images/logo.png';
このコードは、images/logo.png ファイルへの絶対 URL を作成します。
HTML
<!DOCTYPE html>
<html>
<head>
<title>ベースURLを取得</title>
</head>
<body>
<script>
// JavaScriptでベースURLを取得
var baseUrlJs = window.location.origin + '/' + window.location.pathname;
console.log('JavaScriptベースURL:', baseUrlJs);
// jQueryでベースURLを取得
var baseUrlJq = $(location).attr('href').replace($(location).attr('pathname'), '');
console.log('jQueryベースURL:', baseUrlJq);
</script>
</body>
</html>
解説
このコードは以下の通り動作します。
- JavaScriptでベースURLを取得:
window.location.originとwindow.location.pathnameを組み合わせて、現在のページのベースURLを取得します。- 取得したベースURLは
baseUrlJs変数に格納されます。 - コンソールに
JavaScriptベースURL:とbaseUrlJsの値を出力します。
- jQueryでベースURLを取得:
$(location).attr('href')で現在のページのURLを取得します。- パス部分を空文字に置き換えて、ベースURLを作成します。
実行結果
JavaScriptベースURL: http://localhost:8080/
jQueryベースURL: http://localhost:8080/
- 実際のベースURLは、実行している環境によって異なります。
var pathname = window.location.pathname;
if (pathname.charAt(pathname.length - 1) === '/') {
pathname = pathname.substring(0, pathname.length - 1);
}
var link = baseUrl + '/images/logo.png';
JavaScript または jQuery でベース URL を取得するその他の方法
上記で紹介した方法に加えて、JavaScript または jQuery でベース URL を取得する方法は他にもいくつかあります。
document.baseURI プロパティを使用する:
このプロパティは、HTML ドキュメントのベース URL を返します。ただし、すべてのブラウザでこのプロパティがサポートされているわけではありません。
var baseUrl = document.baseURI;
<base> タグを使用する:
<base> タグは、HTML ドキュメントのベース URL を指定するために使用されます。このタグを使用するには、次のようにします。
<head>
<base href="http://localhost:8080/">
</head>
サーバーサイドスクリプト (例: PHP、ASP.NET) を使用して、現在のページのベース URL を取得することもできます。この方法を使用するには、スクリプトが現在のページの URL にアクセスできるようにする必要があります。
フレームワークを使用する:
多くの JavaScript フレームワーク (例: Angular、React) は、ベース URL を取得するための組み込み機能を提供しています。これらのフレームワークを使用している場合は、フレームワークのドキュメントを参照して、この機能を使用する方法を確認してください。
var pathname = window.location.pathname;
if (pathname.charAt(pathname.length - 1) === '/') {
pathname = pathname.substring(0, pathname.length - 1);
}
var link = baseUrl + '/images/logo.png';
javascript jquery
