Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

注意

本記事は、クライアントサイド(ブラウザ上)での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;
}
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away