LoginSignup
19
14

More than 5 years have passed since last update.

相対URLを絶対URL(URI)に変換する方法について

Last updated at Posted at 2014-12-12

注意

本記事は、クライアントサイド(ブラウザ上)でのJavaScriptについて言及しています。
サーバサイドのJavaScriptは考慮していません。

概要

相対URLを絶対URLに変換する方法として、a要素のhrefプロパティを参照する方法を考えた。
hrefプロパティに設定したURLは、絶対URLに変換される。それを利用する方法だ。
具体的には、以下のようにすれば良いと考えた。

function absolutePath(path) {
    var e = document.createElement('a');
    e.href = path;
    return e.href;
}

検索

しかし、この程度の思いつき、既に誰かがやっているだろう。
Googleで検索した所、innerHTMLプロパティを使用した方法を発見。

【javascript】 相対パスを絶対パスに変換する|自家用辞典

IE 6、IE 7、Firefox 2.0、Opera 9 対応。

function absolutePath(path) {
    var e = document.createElement('span');
    e.innerHTML = '<a href="' + path + '" />';
    return e.firstChild.href;
}

alert(absolutePath('/'));

Internet Explorer 11.0.9600.17501のF12開発者ツールで試した所、
IE5,IE7ではinnerHTMLプロパティを使用しないとhrefプロパティの値が絶対URLに変換されない。
初めて知った…

改善案

だが、innerHTMLプロパティによる挿入は遅い。
そこで、insertAdjacentHTMLメソッドによる動作を試みる。

function absolutePath(path) {
    var e = document.createElement('span');
    e.insertAdjacentHTML('beforeend', '<a href="' + path + '" />');
    return e.firstChild.href;
}

Internet Explorer 11.0.9600.17501のF12開発者ツールで試した所、
IE5,IE7でも正常に動作した。

問題

insertAdjacentHTMLメソッド自体がFirefox 8.0以降から対応しているため、
Firefox 2.0からFirefox 7.xまでの対応は不可能になるが、
普及していたInternet Explorer 6の対応も不要となり、Internet Explorer 8も見限られるような現在、
Firefox 7.x以前のブラウザを気にかける必要があるだろうか。

まとめ

本記事のinsertAdjacentHTMLメソッドを利用したコードについて、意見を聞きたい。

追記

"はそもそもURLに使用できない文字だが、それも許容するならば&quot;に置換した方が良いかもしれない。

function absolutePath(path) {
    var e = document.createElement('span');
    e.insertAdjacentHTML('beforeend', '<a href="' + path.replace(/"/g, '&quot;') + '" />');
    return e.firstChild.href;
}

更に追記

2018年3月4日現在、JavaScriptでURLを操作するためのURLインターフェイスが一部のWebブラウザで実装されつつある。

URL() - Web API インターフェイス | MDN

IEやOpera Miniなど以外のブラウザであれば、だいたい使える。

Can I use... Support tables for HTML5, CSS3, etc

このURLインターフェイスのコンストラクタ関数は、第二引数に基準となるURLを指定することで、相対パスを絶対パスに変換してくれる。
よって、以下のようなやり方で絶対URLに変換できる。

function absolutePath(path) {
    var baseUrl = location.href;
    var url = new URL(path, baseUrl);
    return url.href;
}
19
14
6

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
14