以前からlitebox.rbプラグインがうまく動かなくて、仕方なくワークアラウンドを行っていましたが、プラグイン作者のはしもとさんが親切にも原因を調査してくださいました。はしもとさんありがとうございます!以下、その教えてもらった内容をです。

直接の原因

以下が問題が起こせる(たぶん)最小のHTMLです。記述されているjavascriptはlitebox.rbがadd_footer_procを使って出力しているものです。

1:<html>
2:<head>
3:<scripttype="text/javascript"src="http://ebi.dyndns.biz/litebox/js/prototype.lite.js"></script>
4:<scripttype="text/javascript"src="http://ebi.dyndns.biz/litebox/js/moo.fx.js"></script>
5:<scripttype="text/javascript"src="http://ebi.dyndns.biz/litebox/js/litebox.js"></script>
6:<head>
7:<body>
8:<divclass="content">
9:<scripttype="text/javascript">
10:<!--
11:(function(){
12:varanchors=document.getElementsByTagName('a');
13:
14:for(vari=0;i<anchors.length;i++){
15:varanchor=anchors[i];
16:varrel=anchor.getAttribute('rel');
17:varhref=anchor.getAttribute('href');
18:
19:if((rel==nullrel==)&&href&&href.match((?:jpe?g|gif|png)$/i)){
20:rel='lightbox';
21:
22:if(href.match(\d{8})_\d+\.\w+$/i)){
23:rel+='['+RegExp.$1+']';
24:
25:varimgs=anchor.getElementsByTagName('img');
26:for(varj=0;j<imgs.length;+j){
27:vartitle=imgs[j].getAttribute('title');
28:
29:if(title!=null){
30:anchor.setAttribute('title',title);
31:break;
32:}
33:}
34:}
35:
36:anchor.setAttribute('rel',rel);
37:}
38:}
39:})();
40:
41:fileLoadingImage='http://ebi.dyndns.biz/litebox/images/loading.gif';
42:fileBottomNavCloseImage='http://ebi.dyndns.biz/litebox/images/closelabel.gif';
43:initLightbox();
44:
45:/script>
46:/div>
47:/body>
48:/html>

つまり、

というdivタグの中にlitebox.rbの吐き出すjavascriptが入っており、このようになっているとIEではエラーが発生してしまうようなのです。

以下のようにinitlitebox()をbodyタグに記述するようにすると、エラーは起きません。

1:<html>
2:<head>
3:<scripttype="text/javascript"src="http://ebi.dyndns.biz/litebox/js/prototype.lite.js"></script>
4:<scripttype="text/javascript"src="http://ebi.dyndns.biz/litebox/js/moo.fx.js"></script>
5:<scripttype="text/javascript"src="http://ebi.dyndns.biz/litebox/js/litebox.js"></script>
6:<head>
7:<bodyinitLightbox();>
8:<divclass="content">
9:<scripttype="text/javascript">
10:<!--
11:(function(){
12:varanchors=document.getElementsByTagName('a');
13:
14:for(vari=0;i<anchors.length;i++){
15:varanchor=anchors[i];
16:varrel=anchor.getAttribute('rel');
17:varhref=anchor.getAttribute('href');
18:
19:if((rel==nullrel==)&&href&&href.match((?:jpe?g|gif|png)$/i)){
20:rel='lightbox';
21:
22:if(href.match(\d{8})_\d+\.\w+$/i)){
23:rel+='['+RegExp.$1+']';
24:
25:varimgs=anchor.getElementsByTagName('img');
26:for(varj=0;j<imgs.length;+j){
27:vartitle=imgs[j].getAttribute('title');
28:
29:if(title!=null){
30:anchor.setAttribute('title',title);
31:break;
32:}
33:}
34:}
35:
36:anchor.setAttribute('rel',rel);
37:}
38:}
39:})();
40:
41:fileLoadingImage='http://ebi.dyndns.biz/litebox/images/loading.gif';
42:fileBottomNavCloseImage='http://ebi.dyndns.biz/litebox/images/closelabel.gif';
43:
44:/script>
45:/div>
46:/body>
47:/html>
は通常のtdiaryでは存在していないタグで、私の場合、自分でサイトのデザインを好き勝手にいじりたくてtdiary/skel内のファイルを直接編集しているためにこのようになっています。

はしもとさんからはさらに以下のコメントをいただきました。

litebox.rb で initLightbox(); の実行をwindow.onload = initLightbox;のようにonloadイベントハンドラで実行させるようにしていればこのエラーは起こらなかったのですが、このようにしなかったのは、

  • window.onload での実行は画像などすべてのコンテンツの読み込みが終わった後なので、実行タイミングが遅すぎて画像の多いページなどでは困る場合があること。
  • onloadイベントハンドラへの設定の仕方に注意しないと、他にonloadイベントハンドラに何かを設定するプラグインがあった場合、どちらかの設定が消えてしまう可能性があること。(litebox.rbで注意しても、他のプラグインが注意していないと上書きされて消えてしまう)

などの理由からです。

litebox.rb 以外でもJavaScriptを使うプラグインで似たようなエラーになる可能性を考えて、

の閉じ