[plugin] litebox.rbがIEでうまく動かなかった原因を教えてもらっちゃいました!

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

直接の原因

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

<html>
<head>
<script type="text/javascript" src="http://ebi.dyndns.biz/litebox/js/prototype.lite.js"></script>
<script type="text/javascript" src="http://ebi.dyndns.biz/litebox/js/moo.fx.js"></script>
<script type="text/javascript" src="http://ebi.dyndns.biz/litebox/js/litebox.js"></script>
<head>
<body>
<div class="content">
            <script type="text/javascript">
            <!--
            (function(){
                var anchors = document.getElementsByTagName( 'a' );
                
                for ( var i = 0; i < anchors.length; i++ ){
                    var anchor = anchors[i];
                    var rel    = anchor.getAttribute( 'rel' );
                    var href   = anchor.getAttribute( 'href' );
                    
                    if( ( rel == null || rel == '' ) && href && href.match( /\.(?:jpe?g|gif|png)$/i ) ) {
                        rel = 'lightbox';
                        
                        if( href.match( /\/(\d{8})_\d+\.\w+$/i ) ) {
                            rel += '[' + RegExp.$1 + ']';
                            
                            var imgs = anchor.getElementsByTagName( 'img' );
                            for( var j = 0; j < imgs.length; ++j ) {
                                var title = imgs[j].getAttribute( 'title' );
                                
                                if( title != null<
/span> ) {
                                    anchor.setAttribute( 'title', title );
                                    break;
                                }
                            }
                        }
                        
                        anchor.setAttribute( 'rel', rel );
                    }
                }
            })();
            
            fileLoadingImage = 'http://ebi.dyndns.biz/litebox/images/loading.gif';
            fileBottomNavCloseImage = 'http://ebi.dyndns.biz/litebox/images/closelabel.gif';
            initLightbox();
            // -->
            </script>
</div>
</body>
</html>

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

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

<html>
<head>
<script type="text/javascript" src="http://ebi.dyndns.biz/litebox/js/prototype.lite.js"></script>
<script type="text/javascript" src="http://ebi.dyndns.biz/litebox/js/moo.fx.js"></script>
<script type="text/javascript" src="http://ebi.dyndns.biz/litebox/js/litebox.js"></script>
<head>
<body initLightbox();>
<div class="content">
            <script type="text/javascript">
            <!--
            (function(){
                var anchors = document.getElementsByTagName( 'a' );
                
                for ( var i = 0; i < anchors.length; i++ ){
                    var anchor = anchors[i];
                    var rel    = anchor.getAttribute( 'rel' );
                    var href   = anchor.getAttribute( 'href' );
                    
                    if( ( rel == null || rel == '' ) && href && href.match( /\.(?:jpe?g|gif|png)$/i ) ) {
                        rel = 'lightbox';
                        
                        if( href.match( /\/(\d{8})_\d+\.\w+$/i ) ) {
                            rel += '[' + RegExp.$1 + ']';
                            
                            var imgs = anchor.getElementsByTagName( 'img' );
                            for( var j = 0; j < imgs.length; ++j ) {
                                var title = imgs[j].getAttribute( 'title' );
                                
                                if( title != null ) {
                                    anchor.setAttribute( 'title', title );
                                    break;
                                }
                            }
                        }
                        
                        anchor.setAttribute( 'rel', rel );
                    }
                }
            })();
            
            fileLoadingImage = 'http://ebi.dyndns.biz/litebox/images/loading.gif';
            fileBottomNavCloseImage = 'http://ebi.dyndns.biz/litebox/images/closelabel.gif';
            // -->
            </script>
</div>
</body>
</html>

<div class=”content”>〜</div>は通常のtdiaryでは存在していないタグで、私の場合、自分でサイトのデザインを好き勝手にいじりたくてtdiary/skel内のファイルを直接編集しているためにこのようになっています。

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

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

window.onload での実行は画像などすべてのコンテンツの読み込みが終わった後なので、実行タイミングが遅すぎて画像の多いページなどでは困る場合があること。

onloadイベントハンドラへの設定の仕方に注意しないと、他にonloadイベントハンドラに何かを設定するプラグインがあった場合、どちらかの設定が消えてしまう可能性があること。（litebox.rbで注意しても、他のプラグインが注意していないと上書きされて消えてしまう）

などの理由からです。

litebox.rb 以外でもJavaScriptを使うプラグインで似たようなエラーになる可能性を考えて、<div class=”content”>〜</div> の閉じ</div>の位置を add_footer_proc が埋め込む場所より前にした方がいいかもしれませんね。

なるほど、勉強になります。これでもまだ「initLigthbox()の中では何が行われていて、どこがエラーの原因になるのか」など分かっていない部分もありますが、それはおいおいもしも時間があれば、ということにしようと思います。

このサイトに関してはデザイン自体を見直すかJavascriptでrel属性を追加するのみにするかちょっと考えようと思います。