IEのHTMLAnchorElement.pathnameの実装

IEのHTMLAnchorElement.pathnameの実装 | Inhale n’ Exhale状況に応じてフォームの送信先URL（formタグのaction属性値）のクエリーストリングを書き換えるという処理をするために、こんなJavaScriptを書いてみた。

function updateQuery(query)
{
  var form = document.forms[0]
    , action = document.createElement('a')
  ;

  // オリジナルの送信先URLからパス部分を切り出して、クエリーストリングだけを書き換える。
  action.href = form.getAttribute('action');
  form.setAttribute('action', action.pathname+'?'+query);
}

しかし、

• フォームを表示しているページのURLがWebサイトのルート直下ではない
• オリジナルのフォームの送信先URLが絶対パスで書かれている

という条件下では、フォームを送信した時にIEでだけ「404 Not Found」になってしまった。

例えば http://yourdomain.com/welcome/form.htmlというページにフォームがあって、formタグのaction属性値が/app/updateだったとすると、updateQuery('xxx')が実行された後にフォームを送信すると、http://yourdomain.com/welcome/app/updateにリクエストが飛んでしまう。

どうやらHTMLAnchorElementの実装がIEだけ違うみたいで、pathnameプロパティの先頭にスラッシュが付いていない。

試しに、JSFiddleにテストコードを書いてみたところ、IEだけ「path/to/resource」となってしまう。他のブラウザはみんな「/path/to/resource」になる。

IEは常に混乱をもたらしてくれる…。

ということで、クロスブラウザ対応するには

function updateQuery(query)
{
  ...（略）...
  form.setAttribute('action', (action.pathname.charAt(0) == '/' ? '' : '/')+action.pathname+'?'+query);
}

と書いてやらなければならない。

location.pathnameはIEでもちゃんとスラッシュが先頭に付いているのにね…やれやれ。