15
クロスブラウザチックなonbeforeunload。
Filed Under (Uncategorized) by on 15-10-2008
どうも。ひろきのです。
Prototype.jsといえばクロスブラウザでDOMの足回りを提供してくれているすばらしいフレームワークですが、ちょっとばかり不満があります。
Event.observeで、あたえたeventHandlerの戻り値を完全に無視しているところです。
具体的には
-
function createWrapper(element, eventName, handler) {
-
var id = getEventID(element);
-
var c = getWrappersForEventName(id, eventName);
-
if (c.pluck("handler").include(handler)) return false;
-
-
var wrapper = function(event) {
-
if (!Event || !Event.extend ||
-
(event.eventName && event.eventName != eventName))
-
return false;
-
Event.extend(event);
-
handler.call(element, event) //ここでハンドラの戻り値を返してない。
-
};
-
-
wrapper.handler = handler;
-
c.push(wrapper);
-
return wrapper;
-
}
このぐらい書き換えろとか思うかもしれませんがこれらの重要なライブラリについて元自体をいじってしまうのが難しい環境もあるかもしれません。
そもそもEventObjectのevt.returnValueを使えばいいじゃんとかありますが、WebKitのevt.returnValueの挙動が他のブラウザとちがい、実際にハンドラからreturnしないと受け付けないというものがあるため、コレ自体を完全にクロスブラウザにするのは難しかったりします。(evtオブジェクトのreturnValueを上書きできないのかも。。)
そもそもOperaにはonbeforeunloadが存在しませんし・・・
このハンドラからの戻り値をダイレクトに使用しなければならない場面はそう多くはありませんが、最近のWebアプリケーションでは一般的になっている編集中にページ遷移しようとするとでるメッセージ（Gmailなどで書きかけで移動するとでてくるやつ）を実現するためにはこの機能が必須になります。
ちなみにOperaの場合はステートが保存されているので、
戻るボタンを押せば編集中の内容が復帰します。
-
Event.observe(window,'beforeunload',function(e){
-
return e.returnValue = 'このままページを移動すると編集中の内容は保存されませんがよろしいですか？';
-
});
のようにしたい場合、現行のPrototype.jsでは上手くいきません。
そこで、Webkitでbeforeunloadの場合に限り、Event.observeをフックすることを考えました。
以下コードです。
実用上は、Webkitの場合にはaddEventListenerを用いればよいのですが、透過的に行えたほうが自然といえば自然なので。
同様のテクニックで、Prototype.jsのカスタムイベントをよりリッチにすることができますが、それについてはまた今度。
-
if(Prototype.Browser.WebKit)(function(){
-
-
Event._observe = Event.observe;
-
Event.observe=function(element,name,func){
-
if(/beforeunload/.test(name)){
-
element.addEventListener('beforeunload',function(evt){
-
return func.bind(element)(evt);
-
});
-
}else{
-
Event._observe(element,name,func);
-
}
-
}
-
Object.extend(window, {
-
observe: Event.observe.methodize()
-
});
-
})();