Extensions GreyBox GreyBoxが動かない: GreyBox Show plugin
GreyBoxが動かないことでの説明は、簡単ですが以前にもしていますが、あらためておさらいします。
動かない原因のほとんどが、window.onloadイベントを上書きしてしまっていることが原因です。それは、GreyBoxに限らず、multiboxでもlightboxでも上書きしてしまったら結果は同じです。
まず、winodow.onloadについてとてもわかりやすくどう書いていると動かなくなるのかを説明されているサイトがありましたのでご覧ください。
後で追加されるwindow.onloadイベントの追加方法が、すでに追加されているイベントを上書きするような追加方法で記述されていると、GreyBoxのwindow.onloadイベントが実行されません。GreyBoxでは、AJSというJavascriptライブラリを使っておりAJSライブラリで用意されているonloadイベント追加メソッドは、
AJS.AEV(window, 'load', .....);
です。
例えば、GreyBoxのライブラリを読み込んだ上で下記のようなコードを書いてみます。
例：１
<script type="text/javascript">
window.onload = function(){
alert('before AJS');
}
AJS.AEV(window, 'load', function() {
GB_show("Hello world", "http://google.com");
});
</script>
</head>
<body onload="alert('body');">
<script type="text/javascript">
window.onload = function(){
alert('after AJS');
}
</script>実行結果は、"after AJS"のみ表示されるだけです。では、少し変更してみます。
例：２
<script type="text/javascript">
window.onload = function(){
alert('before AJS');
}
AJS.AEV(window, 'load', function() {
GB_show("Hello world", "http://google.com");
});
</script>
</head>
<body onload="alert('body');">
<script type="text/javascript">
//window.onload = function(){
// alert('after AJS');
//}
</script>最後のwindow.onloadをコメントアウトして実行すると、"body"と表示されるだけです。また、少し変更してみます。
例：３
<script type="text/javascript">
window.onload = function(){
alert('before AJS');
}
AJS.AEV(window, 'load', function() {
GB_show("Hello world", "http://google.com");
});
</script>
</head>
<body>
<script type="text/javascript">
//window.onload = function(){
// alert('after AJS');
//}
</script>さらにbody部のonloadを消して実行すると、"before AJS"と表示され、GoogleのページがGreyBoxによって表示されます。
Joomla!でヘッドタグにGreyBoxライブラリのScriptタグが書き込まれるタイミングは、テンプレートに依存しており、また大抵headタグ開始直後に書き込まれるようになっていると思います。とすれば、後から書かれるJavascriptの影響を受けるのは当然です。その後から書かれているonloadイベントがイベント追加タイプでなかったらたとえGreyBoxで無くてもonloadイベントは消失してしまうので注意しなければなりません。
では、どのように対策すれば良いのか。
たとえば、例：１の場合以下のように書き換えます。
<script type="text/javascript">
window.onload = function(){
alert('before call AJS');
}
AJS.AEV(window, 'load', function() {
GB_show("Hello world", "http://google.com");
});
</script>
</head>
<body>
<script type="text/javascript">
AJS.AEV(window, 'load', function(){
alert('body');
});
AJS.AEV(window, 'load', function(){
alert('after AJS');
});
</script>これですべてのonloadイベントが実行されます。
もっと簡略に書くと
<script type="text/javascript">
AJS.AEV(window, 'load', function() {
alert('after AJS');
alert('body');
GB_show("Hello world", "http://google.com");
alert('before call AJS');
});
</script>
</head>
<body>このようにも書けます。イベントの順番が異なりますがそれは実行してみればわかります。
これは、GreyBoxに限らず、Javascriptを使用する以上避けては通れません。onloadイベントを追加する場合は、必ず先に登録されているイベントがあることを考慮し、イベントを追加するようにコードを書かなければなりません。Javascriptライブラリを使用されている場合はそれが考慮されていることが多いですが中には考慮されていない物もあるので注意が必要です。その時はそのライブラリの書式にしたがってonloadイベントの登録をするか、最初に紹介させていただいたサイトで説明されているような関数を独自に使用して登録しなければなりません。
特定のJavascriptライブラリに依存していないJoomla!を使用しているなら、独自関数をお薦めします。それは、そのサイトが特定のライブラリに依存しているならそのライブラリのものを使用すれば良いと思いますが、独自関数であればどのライブラリにも依存しないから例えライブラリが、ロードされていなくても実行されるからです。Joomla!1.5では、デフォルトでmootoolsをサポートしているのでそのライブラリを使用するようにすることが、親切かもしれません。（これは開発者またはテンプレート作成者に対してです。）また、そのためのメソッドも備えているようです。
Joomla!では、手軽にサードパーティーのエクステンションを利用できるので便利なのですが、JavascriptやPHPコードは限られた環境でのみ動作する物かもしれません。私もつい先日Fireboardを表示するとJavascriptが動かなくなったので調べたらFireboardは、JQueryを使っているんですね。multiboxと干渉していて気づきましたが、他のライブラリの使用を考慮した書き方をされているようで一行付け加えるだけで動作しました。最初からその一行を書いておいて欲しかったですが・・・。私も気をつけねばなりませんね。
開発・テスト中のCombineコンポーネントでは、開発者にやさしいメソッドを提供しています。onloadイベントをCombineがサポートしているのでそこに書き加えるだけで一括でonloadイベントが書き出されます。サポートしているライブラリは、mootools, Prototype, JQuery, Originalです。メリットは、干渉が無い・ソースが綺麗になることです。
次回は他のライブラリでのonloadを書いてみます。
