2008-06-26

Jaxer サーバサイド window.onload のハンドリングいろいろ

Aptana Jaxer で、サーバーサイドでの window.onload イベント相当をハンドリングする方法はいろいろあります。Jaxer 固有の方法と、クライアントサイドの一般的な方法を試してみましたので、その結果をお伝えします。ここで試した Jaxer のバージョンは 0.9.7.2472 です。

body 要素の onserverload 属性を使う Jaxser 固有の方法です。もちろん期待どおり動作します。
<body onserverload="load();">
<script type="text/javascript" runat="server">
//<![CDATA[
function load() {
document.getElementById('r').innerHTML = 'bar';
}
//]]>
</script>
<div id="r">foo</div>
window オブジェクトの onserverload イベントを使っても、期待どおり動作しました。
<script type="text/javascript" runat="server">
//<![CDATA[
window.onserverload = function() {
document.getElementById('r').innerHTML = 'bar';
}
//]]>
</script>
<div id="r">foo</div>
window オブジェクトの onload イベントを使ってみましたが、期待どおり動作しませんでした。Jaxer のドキュメントを読んだ感じだと、onserverload と同じ振る舞いをすると読み取れるのですが、実際は違うようです。
<script type="text/javascript" runat="server">
//<![CDATA[
window.onload = function() {
document.getElementById('r').innerHTML = 'bar';
}
//]]>
</script>
<div id="r">foo</div>
addEventListener を使って DOM ContentLoaded イベントを捕捉してみたところ、期待どおり動作しました。
<script type="text/javascript" runat="server">
//<![CDATA[
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('r').innerHTML = 'bar';
}, false);
//]]>
</script>
<div id="r">foo</div>
DOM ContentLoaded イベントが使えるならと思い、jQuery.ready を試してみたところ、期待どおり動作しました。このとき、jQuery.browser.mozilla はちゃんと ture を示していました。
<script type="text/javascript" src="jquery.js" runat="both"></script>
<script type="text/javascript" runat="server">
//<![CDATA[
jQuery(function($) {
$('#r').text('bar');
});
//]]>
</script>
<div id="r">foo</div>
Mozilla を意識しない window.onload に依存した JavaScript ライブラリなどは、Jaxer のサーバーサイドでの window.onload イベント相当を扱えないかもしれませんね。

2 件のコメント:

aquilegia さんのコメント...

Jaxerの小ネタですが、JaxerはFunctionオブジェクトにrunatプロパティを作成します。他にも既存オブジェクトを汚染してるところがあるかもしれません。たいして使っていないのでこれぐらいですが、情報が集まった段階で投稿できる内容ならしてみようと思ってます。

nakajiman さんのコメント...

サーバサイドという特殊な状況下なので、オブジェクト汚染が "即害" とは言い切れませんが、知った範囲だと Function.runat と Function.proxy っていうのがありますね。