ブラウザによって .innerHTML の結果が異なるので jTemplates に置き換えました

The geo microformat 生成ツールを公開しました

郵便番号、住所、場所、または画像の URL を入力すると、自動的に位置情報を取得します。そして、その結果から、ブログやホームページに貼り付けるための HTML を生成します。

先週公開した The geo microformat 生成ツール ですが、ブラウザによって生成する HTML にかなりの差が出てしまっていました。

IE6 だと、次のような HTML を生成していました。要素名が大文字で、属性値のダブルクオートがありません。

<SPAN class=geo>
<SPAN class=latitude>35.695204</SPAN>, 
<SPAN class=longitude>139.701969</SPAN>
</SPAN>

Opera9 だと、次のような HTML を生成していました。要素名が大文字で、閉じ要素がありません。

<SPAN class="geo">
<SPAN class="latitude">35.689718, 
<SPAN class="longitude">139.691699

このようなブラウザによる違いが出てしまったのは、Element.innerHTML (jQuery.fn.html) を使って HTML を取得していたのが原因でした。ソースコードを書くのを簡略化しようとサボったのがよくなかった。ちょっと反省です。

ブラウザによる Element.innerHTML の違いを吸収するのは現実的ではないので、HTML の文字列を自前で組み立てるようにしました。ただ、すべて自前で組み立てると XSS などの心配があるため、次のように、jTemplates プラグイン を使って、テンプレートから HTML を生成するようにしています。

var template = 
  '<span class="geo">' +
  '<span class="latitude">{$T.y}</span>, ' +
  '<span class="longitude">{$T.x}</span>' +
  '</span>';
return $.createTemplate(template)
  .get({label: label, x: x, y: y }, {}, window);

そして、jTemplates プラグインを使って生成した HTML の文字列を、次のように、そのまま表示するようにしました。

$('.tabs-preview', tabs)
  .html(geo);

$('.tabs-html', tabs)
  .val(geo)
  .focus(function() {
    $(this).later(function() {
      this.select();
    }); // Safari
  });

この対応で、The geo microformat 生成ツールをどのブラウザから 使っても、同じ HTML が生成されるようになりました。また、生成する HTML は XHTML に準ずるようにしました。

The geo microformat 生成ツールを公開しました

The abbr design pattern は、abbr タグを使います。IE6 は abbr タグに対応していないため、期待どおりの HTML が生成されず表示もできませんので、注意してください。

という不都合もありましたが、今回の対応で、自前で組み立てた HTML の文字列を Element.innerHTML (jQuery.fn.html) するようにしたため、abbr タグが無視されるようになり、見た目だけは表示されるようになりました。

そうそう。先ほど、"ブラウザによる Element.innerHTML の違いを吸収するのは現実的ではない" と書きましたが、この問題を解決しようとする jQuery プラグイン を見つけました。が、試してはいません。IE をターゲットとしているようです。