Panda Noir

JavaScript の限界を究めるブログです。

絶対URLと相対URLを理解できてなかった

意外と指定方法がたくさんあることをつい最近知りました。

絶対URLの記述

基本的な絶対URLはhttp://example.comです。しかし、指定したいURLが現在のページと同じプロトコル(httpやhttps、fileといったもの)の時に限り、//example.comとしてもいけます。

相対URLの記述

実は相対URLは二種類あります。一つは「現在のページを基準とした相対URL」、もう一つは「ドメインのルートを基準とした相対URL」です。

前者はhoge/fuga あるいは ./hoge/fugaのように記述し、後者は/hoge/fugaとなります。

たとえば現在のページがhttp://example.com/article/1の場合、hoge/fugahttp://example.com/article/hoge/fugaを指します。

それに対して/hoge/fugahttp://example.com/hoge/fugaを指します。

この後者の相対URLはかなり便利です。たとえばhttp://example.comのどこかからhttp://example.com/js/jquery.min.jsにアクセスしたいとき、絶対URLはめんどうですし、かといって通常の相対URLでは現在のディレクトリ構造に依存するため、ファイルを移動した際などに不都合が生じます。

しかし、後者の相対URLならば/js/jquery.min.jsとさえ書けばどのページからでもアクセスができます。つまり絶対URLのような挙動をしてくれます。

ちなみにbaseタグを使うと相対URLの基準を自由に指定できます。が、それくらいならこの方法を使った方が安全で理解もしやすいです。