グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

JavaScript内に相対パスを記述すると、
そのJavaScriptが読み込まれるHTMLからの相対パスになります。

同じJavaScriptを複数のページで使うような場合、
相対指定だとページごとにパスが変わってしまうため上手くいきません。

そういうとき、
JavaScript自身の階層を取得し、
自分からの相対パスにするスクリプトを探してみました。

こちらのサイトで紹介されています。

Tipsというかメモ
JavaScript :: 自分自身が設置されているURLを取得する


■自身の階層の取得
----------------------------------------------
(function(){
var root;
var scripts = document.getElementsByTagName("script");
var i = scripts.length;
while (i--) {
var match = scripts[i].src.match(/(^|.*\/)sample\.js$/|>);
if (match) {
root = match[1];
break;
}
}
alert(root);
})();
----------------------------------------------

「sample」の部分には実際のファイル名を記述します。

※そのままではエラーが出てしまっていたため、
　よく分からないままに"|>"を消して
　var match = scripts[i].src.match(/(^|.*\/)sample\.js$/);
　としたらエラーも消えたのでひとまずこれで使用しています。


変数rootに自身のパスが格納されるので、
以降はファイルパスの前にrootを付け足すことで
JavaScript自身からの相対パスで指定することができます。

今回はdocument.write内で使用したのでこんな感じです。

document.write('<img src="'+ root +'../images/sample.jpg" alt="" />');