div 要素に src 属性はちょっと......

アイデアとしては面白いと思うし、こんなこと書くと細けーなぁと言われそうなのでなんですが、それでもできるだけ valid な (X)HTML を書いた方がいいよと思っている者としては一応書いておきます。参考までに。

• SSIならぬクライアントサイドインクルード（CSI）を実現できる「sprinkle.js」 ： phpspot開発日誌

ちなみに元ネタは Sprinkle Javascript library by Jon Davis。

簡単に言えば

<script src="sprinkle.js"></script>
 
<div src="info.html"></div>

みたいなソースを書くわけだけど、気になったのはタイトルの通り。

例えば XHTML 1.0 Strict DTD で div 要素は、

<!ELEMENT div %Flow;>  <!-- generic language/style container -->
<!ATTLIST div
  %attrs;
  >

であり、%attrs; は

<!ENTITY % attrs "%coreattrs; %i18n; %events;">

だから、使用できる属性は

<!ENTITY % coreattrs
 "id          ID             #IMPLIED
  class       CDATA          #IMPLIED
  style       %StyleSheet;   #IMPLIED
  title       %Text;         #IMPLIED"
  >
 
<!ENTITY % i18n
 "lang        %LanguageCode; #IMPLIED
  xml:lang    %LanguageCode; #IMPLIED
  dir         (ltr|rtl)      #IMPLIED"
  >
 
<!ENTITY % events
 "onclick     %Script;       #IMPLIED
  ondblclick  %Script;       #IMPLIED
  onmousedown %Script;       #IMPLIED
  onmouseup   %Script;       #IMPLIED
  onmouseover %Script;       #IMPLIED
  onmousemove %Script;       #IMPLIED
  onmouseout  %Script;       #IMPLIED
  onkeypress  %Script;       #IMPLIED
  onkeydown   %Script;       #IMPLIED
  onkeyup     %Script;       #IMPLIED"
  >

なわけで、div 要素に src 属性付けると valid じゃなくなっちゃう。これは 他の XHTML でも、HTML 4.01 でも同じ。

それなら記述自体は SSI と統一して

<!--#include virtual="example.html"-->

とかって書いてあったら該当ファイルを差し込んでくれたりしたらいいのにな。これなら SSI が使える環境でも使えない環境でも同じファイルが使えるし。ならお前が書けとか言われそうでドキドキしますが。

あと、この sprinkle.js 、色々とオプションもあるみたいですね。「Other notes」 以下に他の属性と組み合わせて色々やる方法が書かれています。

9月21日 追記
紹介記事としては下記の方が先のようですね。

• [JS]JavaSctiptでファイルをインクルードする -sprinkle.js ： コリス