【Javascript】a要素のpathnameがIEとIE以外で違う

Tweet

Category JavaScript 2012/07/25

問題

以下のようなa要素について、

<a href="https://www.softel.co.jp/blogs/tech/">あるリンク</a>

a要素.pathnameプロパティを参照すると、以下のようにブラウザによって取得できる値が違う。

IE以外の場合

/blogs/tech/

IEの場合

blogs/tech/

どっちが正しいの？

答え

あなたの環境ではどちら？

仕様を確認すると、先頭に/（スラッシュ）が付いている方が正しい様子。

pathname

If it has no leading “/” (U+002F) character, prepend a “/” (U+002F) character to the new value

http://www.w3.org/TR/html5/urls.html#urls

Uniform Resource Identifier (URI)

http://tools.ietf.org/html/rfc3986

pathname

This attribute represents the path component of the Location’s URI which consists of everything after the host and port up to and excluding the first question mark (?) or hash mark (#).

http://www.w3.org/TR/Window/#location-attributes

でもIEは違う。

IEでも、window.location.pathname にはスラッシュが付くくせに、a要素ではそうでない。いったい何なんだと、釈然としない気分である。。。

問題が発生する場合は、IEさんには期待しないで、pathname の先頭に /（スラッシュ）がないときは付け足す処理を追加しましょう。

IE対策の例

//取ってきたpathnameの
var x = a.pathname
//先頭がスラッシュならそのまま、スラッシュがない場合は/を付け足す
x = x.indexOf('/') == 0 ? x : '/' + x;