prototype-window 的官方站點: http://prototype-window.xilinus.com/
是一套基於 prototype的AJAX彈出窗口,特效很是好看,並且有很高的可定製性,
其做者擁有多年的程序開發經驗,如今在開發rails應用,若是選擇prototype 框架,做爲您的AJAX應用基礎的話,幾乎都要考慮一下這彈出的ajax窗口特效,但很遺憾,做者自2006年發佈基於Prototype 1.5.1_rc3版本的 prototype-window 1.3 版本後,就再也沒更新過,官方網站的最後更新時間仍是 2006年,window.js裏面的發佈時間也是2006年:「Copyright (c) 2006 Sébastien Gruhier (http://xilinus.com, http://itseb.com) 」
現在prototype的stable版本已經出到了1.6.0.3,候選版本(Release Candidate)已經發布到了 1.6.1_RC2版了!不得不讓人爲這套成熟的jaxa窗口可惜!
最近由於一個項目用到了彈出窗口,儘管基於 prototype的彈出窗口很是多,但最後仍是選擇了 prototype-window,畢竟用的人也最多,令我意外的是,prototype-window在 prototype 1.6.0.3版本下也能正常運行,不料在項目快要結束的時候,測試了一下,發信在ie下居然報告錯誤,其餘全部瀏覽器都正常,包括 Opera , Konqueror等都是正常的,雖百思不得其解。
查看報錯的位置是在 prototype 1.6.0.3的 第 1903行的 getStyle函數中的
var value = element.style[style]; 這一行,
getStyle: function(element, style) {
element = $(element);
style = style == 'float' ? 'cssFloat' : style.camelize();
var value = element.style[style];
if (!value || value == 'auto') {
var css = document.defaultView.getComputedStyle(element, null);
value = css ? css[style] : null;
}
if (style == 'opacity') return value ? parseFloat(value) : 1.0;
return value == 'auto' ? null : value;
},
報出 element.style 爲空或者沒定義!這個錯誤但是很厲害!
無論怎麼說,我也不肯去考慮是prototype框架出錯了,寧願是認爲是 prototype-window這個框架出了問題。不過一開始,我以爲,既然你ie下報沒定義的錯誤,那我就給你改寫一下:
va value= element.style ? element.style[style] : '' ;
這樣改完後,其地方又包括錯誤(只是ie,其餘瀏覽器自始自終都是正常的)!
全部仍是想辦法在prototype-window這個框架下入手,
打開主文件:window.js 找到了第1046行開始有以下代碼:
_checkIEOverlapping: function() {
if(!this.iefix && (navigator.appVersion.indexOf('MSIE')>0) && (navigator.userAgent.indexOf('Opera')<0) && (this.element.getStyle('position')=='absolute')) {
new Insertion.After(this.element.id, '<iframe id="' + this.element.id + '_iefix" '+ 'style="display:none;position:absolute;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" ' + 'src="javascript:false;" frameborder="0" scrolling="no"></iframe>');
this.iefix = $(this.element.id+'_iefix');
}
if(this.iefix)
setTimeout(this._fixIEOverlapping.bind(this), 50);
},
_fixIEOverlapping: function() {
Position.clone(this.element, this.iefix);
this.iefix.style.zIndex = this.element.style.zIndex - 1;
this.iefix.show();
},
估計問題應該出在這段代碼上。
打開netbeans 對比一下 prototype 1.5 和 1.6.0.3版本
發如今 prototype 1.6.0.3版本的 第 2008行開始多出不少代碼。其中有一段:
自(2221行開始):
else if (Prototype.Browser.IE) {
// IE doesn't report offsets correctly for static elements, so we change them
// to "relative" to get the values, then change them back.
Element.Methods.getOffsetParent = Element.Methods.getOffsetParent.wrap(
function(proceed, element) {
element = $(element);
// IE throws an error if element is not in document
try { element.offsetParent }
catch(e) { return $(document.body) }
var position = element.getStyle('position');
if (position !== 'static') return proceed(element);
element.setStyle({ position: 'relative' });
var value = proceed(element);
element.setStyle({ position: position });
return value;
}
);
能夠發現,這是prototype1.6.0.3版本修復了1.5版本下ie下兼容性問題,
能夠想象,window.js發佈的時候, protoype1.5在ie下使用getStyle()函數會出問題的,
因此window.js的做者就搞了一段代碼修復了這個問題?
帶着這個想法,把 window.js 自1046到1054內的函數代碼體註釋掉:
(函數 _checkIEOverlapping 的內部代碼所有註釋),
測試了一下,在ie下果真沒有問題了。
不得再也不次佩服 prototype-window 框架做者的js的深厚功力!
同時,深深的鄙視一下 prototype框架,這個框架一點都不完美,並且問題很是的多,若是不是由於他發佈的是最先的框架,(能夠說是javascript框架的鼻祖),估 計不會有那麼多人使用了,
那爲何我又選擇這個鳥框架了呢?我也不知道爲何,由於其餘框架貌似都太大了,想dojo,Ext之類的,太過於冗餘了,先湊合着用吧。javascript