javascriptでのパスについて

Question

javaScript初心者です。
firefox3.5を使っています。

最近、プログラムを組んでいたのですが
絶対パスや相対パスをあまり意識しないでプログラムを書いていました。
プログラム中では
document.getElementById(a).src = "画像.jpg";
のように代入していたのですが

ふと絶対パスや相対パスはどうなっているのだろうと不安になり
alert(document.getElementById(a).src);
のようにalertで表示させてみると絶対パスが入っていることがわかりました。

インターネットで検索してみたところIEでは
どうやらバグとして認知されているようなのですが
（参考：http://css-bug.jp/win/ie/ver6_under/0043/）、
FireFoxでも同じようなことがあるのですか？
中で変換されているのでしょうか？
どういった仕組みになっているのか教えてください。

そして相対パスと比較を行うときにはどのように比較することができるでしょうか。
いまはファイルの文字数がはっきりしているのでfor文の中で

document.getElementById(i).src.slice(-9) == file + i + ".jpg"

のように行っていますが、もっとよい方法がありますか？

初歩的な質問かもしれませんがよろしくお願いします。

fujillin · Accepted Answer

ご提示の参考サイトの記事は
　element.getAttribute("src")だと、通常のブラウザはソース上の属性値
　（もとの値により相対パスだったり絶対パスだったりする）が取得できるの
　だけれど、ＩＥだと常に絶対パスが返されてしまう。
という意味ではないでしょうか？
逆に言えば、.多くの場合、getAttribute()で相対パスを取得することが可能です。

＞もっとよい方法がありますか？
似たようなものですが、正規表現で最後の「/」（又は先頭）からURIの終わりまでを比較してあげるとか…
（ご提示のように文字数を限定しなくてもよくなる）

ちゃんとやるなら、「最後まで」ではなく、クエリやハッシュの部分を除くようにしておく方がよいでしょう。
また、そのようになってくると、正規表現で処理するのが適切になってくるのではないでしょうか？

Chaire · Answer

僭越ながら No.2 に補足させて頂くと、img 要素（HTMLImageElement オブジェクト）の src プロパティが絶対 URI であるかは DOM Level 2 HTML 仕様書に記述されていません。しかし仕様書の正誤表で「絶対 URI を返す」と追記されました（→参考 URL）。

ご質問にある「バグ」はそれとは別です。DOM Level 3 Core 仕様書によれば、img.getAttribute('src') は指定値、つまり相対 URI をそのまま返すはずです。しかし、IE5-7 ではまるで img.src と同じように勝手に絶対 URI に直してしまいます。このことは No.1 でも指摘済みですね。

DOM Level 3 Core 仕様書は一般的な XML 処理のためのもの（HTML も含む）、DOM Level 2 HTML 仕様書は HTML 4.01/XHTML 1.0 処理に特化したものです。現在、これらは HTML ブラウザ用に再整理され、

・HTML Standard 仕様書（別名 HTML5）には、値が URI であるプロパティ値は絶対 URI に直されると明記されました（2.8.1 節。絶対 URI に直すアルゴリズムも同仕様書 2.6.3 節に書かれています）。

・DOM Core 仕様書（旧名 Web DOM Core）には、getAttribute() の戻り値は生成時の値であると明記されました（5.6、5.6.1 節）。

長々と書きましたが、要するに img.getAttribute('src') はもとが相対 URI ならそのままを、img.src は必ず絶対 URI に直した形を返すことで合意されています。そうでなければブラウザの不具合ですので、バグ報告して下さい。

---
URI の仕様である RFC 3986 には、URI を分解するための正規表現例が掲載されています。

var URIPattern = /^(([^:/?#]+):)?(\/\/([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?/;
var uri = 'http://example.org/pub/hoge/photo1.png?date=2011/06/05#xywh=30,30,100,100';
var components = URIPattern.exec(uri);

components[0]; // オリジナル URI
components[1]; // "http:"
components[2]; // "http"
components[3]; // "//ecxample.org"
components[4]; // "example.org"
components[5]; // "/pub/hoge/photo1.png"
components[6]; // "?date=2011/06/05"
components[7]; // "date=2011/06/05"
components[8]; // "#xywh=30,30,100,100"
components[9]; // "xywh=30,30,100,100"

これを使えば、仮に画像 URI の後ろに余計なものがついていたとしても、パス成分 components[5] だけを操作できます。パス成分の 0 文字目が "/" なら絶対パスです。また、components[1] が存在するなら絶対 URI です。

これを使うほどではないかもしれませんが、覚えておいて損はないと思います。

参考URL：http://www.w3.org/2000/11/DOM-Level-2-errata

taloo · Answer

>FireFoxでも同じようなことがあるのですか？
>中で変換されているのでしょうか？
>どういった仕組みになっているのか教えてください。
どういう仕組みかはわかりません。
ソースコードを読んだり、IEならMicrosoft関係者ならソースコードを読めるかもしれませんが、でなければ逆アセンブルなどで解析すればわかると思いますが。

ブラウザごとに属性値が違うのはよくありますね。
backgroundColorを色名で指定しても、backgroundColorを取得しなおすとrgb(0,0,0)だったりとか、#000000だったりとか、
けっこうめちゃくちゃです。

仕様かバグかはわかりません。
・W3C定義のDOMと異なった仕様の元で動いている仕様通りの動きなのか、
・W3C定義のDOMと同じ仕様の元で動いているが、その仕様と違う動き（バグ）なのか、
・W3C定義のDOMと同じ仕様にしてブラウザの仕様を作ったつもりが、仕様書が間違えていた、しかしブラウザは制作された仕様書通りに作った（仕様書のバグ）なのか、
仕様かバグかというのは、制作者自身しかわからないと思うのですが。

特にIEはJScriptというJavaScriptと似て非なる言語で動いています。
（JavaScript自体、派生が多すぎて混沌としてると思いますけどね。
JScript、Firefox用JavaScript（JavaScript1.7やE4X）、標準JavaScript（ECMAScript）、Safari用、Opera用、Chrome用、、、）

>そして相対パスと比較を行うときにはどのように比較することができるでしょうか。
絶対パスは必ず/から始まります。
相対パスは必ず/以外の文字から始まります。
絶対URLは://が入っています。

ファイル名を取得するときの別案として。
var a=src.split('/');
alert(a[a.length-1]);

var a=src.match(/\/(.*)$/);
alert(a);

画像のsrcは、"/"で終わることはないと思うので、/\/(.+)$/の方がいいかもしれません。

よくわかりませんが、HTML5の規定をHTML4やXHTMLに適用してはダメなのでは？

think49 · Answer

IE8- の getAttribute() のバグについては下記URLにまとめたので参考にしてください。このバグはIE9 で修正されているはず。
http://vird2002.s8.xrea.com/javascript/getAttribute.html

IE8 では element.getAttribute('src', 2); で期待通りの結果、つまり「属性値」が返されます。
http://msdn.microsoft.com/en-us/library/ms536429%28v=vs.85%29.aspx
一方、element.src は絶対URIを返す仕様です。IE8- でなくても絶対URIを返します。
http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-ref/HTML/HTMLImageElement.html#HTMLImageElement-src

IE7- には getAttribute でプロパティを参照するというバグがありますので、IE7- をサポートするなら getAttribute は使わない方がいいです。
srcプロパティは絶対URIであるという前提の元に element.src を利用するのが無難だと思います。

element.src = 'hoge.jpg';

のように相対URIを代入することは問題ありません。ブラウザは自動的に絶対URIに変換します。

javascriptでのパスについて

ご提示の参考サイトの記事は

僭越ながら No.2 に補足させて頂くと、img 要素（HTMLImageElement オブジェクト）の src プロパティが絶対 URI であるかは DOM Level 2 HTML 仕様書に記述されていません。

>FireFoxでも同じようなことがあるのですか？

IE8- の getAttribute() のバグについては下記URLにまとめたので参考にしてください。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング