XHTMLをMIMEタイプapplication/xhtml+xmlにして、JavaScriptではまったことと解決法

Tweet

MIMEタイプtext/htmlで吐き出していたXHTMLページを、application/xhtml+xmlにすると、あちこち直さなくてはならなくなったのでメモ。

1.真のapplication/xhtml+xmlは、document.writeができない

メンテナンスしているところで、こんなコードがあった。

<script type="text/javascript">
// <![CDATA[
document.write('<input type="hidden" '
             + 'name="thisTITLE" value="'
             + document.title
             + '" />'
);
document.write('<input type="hidden" '
             + 'name="thisURL" value="'
             + document.URL
             + '" />'
);
// ]]>
</script>

とか書いてあった。何年前のコードなんだろう……

document.writeができないのですが、いまどきjQuery時代なんでこうしちゃえばいいんじゃねって思う。

<script type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"
></script>
 
...
 
<input type="hidden" name="thisTITLE" value="" />    
<input type="hidden" name="thisURL"   value="" />
<script type="text/javascript">
// <![CDATA[
$(function() {
  $('input[name=thisTITLE]').val( document.title );
  $('input[name=thisURL]'  ).val( document.URL   );
});
// ]]>
</script>

あらかじめ要素用意してあって、DOMが生成された後だったら、値の挿入は文句ないよね。

2.真のapplication/xhtml+xmlは、formにつけた名前で値が取得できない

<form name="nForm">
  <dl>
    <dt>
      <label for="email00">メールアドレス</label>
    </dt>
    <dd>
      <input type="text" name="email00" id="email00" value="" />
    </dd>
    <dt>
      <label for="email01">もういっちょ</label>
    </dt>
    <dd>
      <input type="text" name="email01" id="email01" value="" />
    </dd>
  </dl>
</form>

var errstr = '';
if (document.nForm.email00.value != document.nForm.email01.value) {
  errstr += "メールアドレスの確認をしてください。\n";
}

ていうコードがあった。名前の付け方が無駄にキャメルケース。

んで、このコードが、text/htmlからapplication/xhtml+xmlになったとたん、動かなくなる。document.nFormがいなくなる！

これに関しては、document.formsの中にいるので、あわてずにこう書けばOK。

var errstr = '';
if (document.forms['nForm'].email00.value != document.forms['nForm'].email01.value) {
  errstr += "メールアドレスの確認をしてください。\n";
}

さらにこう書ける。

var errstr = '';
if (document.forms.nForm.email00.value != document.forms.nForm.email01.value) {
  errstr += "メールアドレスの確認をしてください。\n";
}

これは、JavaScriptの書き方が古かっただけじゃねえかっていう話ではあります。

以上、XHTMLで書いてあれば、text/htmlからapplication/xhtml+xmlにするだけでいいんじゃね、て思っている人が実際にはまった２点でした。document.writeの話なんて、５年遅れの話題ですよね……

2011.08.29 20:45 投稿　大野 義貴 [XHTML/XHTML5] | 固定リンク |