关于 prototype-window 在 prototype 1.6 下的 ie下报错问题

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

相关文章
相关标签/搜索