window.open()详解及浏览器兼容性问题
⼀、基本语法:
window.open(pageURL,name,parameters)
其中:
pageURL 为⼦窗⼝路径
name  为⼦窗⼝名字
parameters 为窗⼝参数(各参数⽤逗号分隔)
⼆、⽰例
<script type="text/javascript">
window.open('page.html','newwindow','height=500,width=800,top=0,left=0,
toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')
</script>
page.html将在新窗体newwindow中打开,宽为800,⾼为500,距屏顶0象素,屏左0象素,
⽆⼯具条,⽆菜单条,⽆滚动条,不可调整⼤⼩,⽆地址栏,⽆状态栏。
各浏览器对window.open()的窗⼝特征sFeatures参数⽀持程度存在差异
各浏览器运⾏结果汇总:
上表中为各个浏览器对 features 各参数选项的⽀持程度,其中需要特殊说明的如下:
【标注1】:IE7 IE8 Firefox Chrome Safari 中,当"menubar"选项为"yes"时,默认不显⽰菜单栏,需要按ALT键后菜单栏才可显⽰;相反当"menubar"选项为"no"时,即使按了ALT键也不会显⽰菜单栏。
【标注2】:Safari中,开启"location"选项与开启"toolbar"选项时显⽰效果⼀致。
【标注3】:IE6 IE8 Chrome 中,使⽤"top"和"left"定位,如果出现设定的的坐标值过⼤,弹出窗⼝将可能显⽰在屏幕可视范围外。
【标注4】:IE7 Firefox Safari Opera中,使⽤"top"和"left"定位,如果出现设定的的坐标值过⼤,窗⼝
会⾃动调整"top"与"left"值,确保窗⼝正常显⽰在屏幕可视区域内。
【标注5】:Chrome Opera中,不⽀持在没有设定"width"与"height"值的情况下独⽴使⽤"left"和"top",此时"left""top"设定值均不⽣效。
【标注6】:Chrome 中,不⽀持在没有设定"left"和"height"值的情况下独⽴使⽤"width"与"height",此时"width" "height"设定值均不⽣效。结合【标注5】说明可知,在Chrome中弹出窗⼝不论想要设定宽⾼或位置中的⼀个或⼏个值,都必须将他们全部赋值,否则都将不起作⽤。
【标注7】:Firefox Chrome 中,地址栏会始终显⽰。
【标注8】:Opera 中,地址栏默认不显⽰,但可以点击页⾯最上⽅横条使他显⽰出来,设置"location=yes"后地址栏会⾃动显⽰出来。
【标注9】:Chrome Opera 中,不论"menubar"值如何设置,永远不显⽰菜单栏。
【标注10】:Firefox Safari Chrome Opera中⽆论"resizable"值如何设置,窗⼝永远可由⽤户调整⼤⼩。
【标注11】:Safari Chrome 中,在页⾯存在滚动条的情况下,⽆论"scrollbars"值如何设置,滚动条始终可见。
【标注12】:IE7 在 Windows XP SP3 系统中默认可以⽀持"status "参数隐藏状态栏;⽽在 Windows Vista系统默认环境下不⽀持"status"参数,状态栏始终可见.这与两个系统中默认的 IE7 ⼩版本号不同有关,前者版本号较低,后者版本号较⾼。
【标注13】:Firefox 中,⽆论"status"值如何设置,状态栏始终可见,⽽ Chrome Opera中,则与前者相反,状态栏始终不可见。
【标注14】: Chrome Opera 中,⽆论"toolbar"值如何设置,始终不显⽰⼯具栏。
综上所述,可见window.open⽅法的sFeatures参数⽀持程度存在巨⼤差异,使⽤时须谨慎为之。
⼀般我们⽤window.open打开页⾯都需要居中显⽰,⽰例代码:
var width=800;  //弹出窗⼝的宽度;
var height=500; //弹出窗⼝的⾼度;
var top = (window.screen.availHeight-height)/2; //窗⼝的垂直位置;
var left = (window.screen.availWidth-width)/2;  //窗⼝的⽔平位置;
window.open('page.html','newwindow','height='+height+',width='+width+',top='+top+',left='+left+',
toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')
availHeight和height的区别
window.screen.width 返回当前屏幕宽度(分辨率值)
window.screen.height 返回当前屏幕⾼度(分辨率值)
screen.availWidth,screen.availHeight是指除去taskbar(任务栏)以外的长宽
(三)判断浏览器类型
上⾯了解了在各种浏览器⾥是如何实现获取按键事件对象的⽅法,那么下⾯需要判断浏览器类型,这个⽅法很多,有⽐较⽅便理解的,也有很巧妙的办法,先说⼀般的⽅法:就是利⽤navigator对象的appName属性,当然也可以⽤userAgent属性,这⾥⽤appName来实现判断浏览器类型,IE和Maxthon的appName是“Microsoft Internet Explorer” ,⽽FireFox和Opera的appName是“Netscape”,所以⼀个功能⽐较简单的代码如下:
  function keyUp(e) {
  if(navigator.appName == "Microsoft Internet Explorer")
  {
    var keycode = event.keyCode;
    var realkey = String.fromCharCode(event.keyCode);
  }else
  {
    var keycode = e.which;
    var realkey = String.fromCharCode(e.which);
  }
  alert("按键码: " + keycode + " 字符: " + realkey);
 }
⽐较简洁的⽅法是[2]:
  function keyUp(e) {
  var currKey=0,e=e||event;
  currKey=e.keyCode||e.which||e.charCode;
  var keyName = String.fromCharCode(currKey);
  alert("按键码: " + currKey + " 字符: " + keyName);
}
关于ExtJS、JQuery UI和easy UI的选择问题
⾸先根据你的需求,你需要这些框架具有你需要的UI组件bai,ExtJS、easy ui都具备你需要⽤到的那
⼏款ui组件,⽐如messagebox、tree、grid。相⽐较jQuery UI的ui组件不够全⾯,⽐如grid,但是jquery有很多各种插件,包括grid,但它不在jQuery UI内。⽽Ext JS和easy ui 最新版提供的GRID都有20种以上实现不同功能grid。
轻重⽐较,说ExtJS⽐较⼤,jquery较⼩,那只是浅显的理解。⾸先ExtJS是⼀个完整的Framework,是重量级别的,easy ui 是基于jquery库的⼀套UI组件库,是轻量级的,ExtJS是应⽤application级的,⽽jquery是page页⾯级的。当然application也是由page组成的,那就需要你⾃⼰去完成了,考虑你的需求,和使⽤框架的初衷,选择使⽤哪⼀种。同时ExtJs由于是重量级框架,完全⾯向对象风格,提供API⾮常完备也⾮常庞⼤,所以学习成本也想相对较⼤。
兼容性ExtJS兼容IE全系列浏览器和其他⾮IE现代浏览器,jquery UI向来不太考虑ie低版本浏览器的兼容,从态度上的鄙视。easy UI是基于jquery的,jquery2.X以上的版本不再⽀持IE6、7、8,,已郑重声明,请看官⽅⽹站,easyUI最新版本1.3.3使⽤jQuery2.0,由于⼜很多HTML5特性,不再⽀持IE6\7\8,低版本由⼀些⼩部分的兼容不够好,请⾃⼰做技术选型的时候去测试,你要使⽤那个版本。在兼容问题上,他们都有瑕疵,看你的接收程度。navigator对象
使⽤许可license.  EXTJS  2.1以上版本,商⽤需要购买商业授权,jquery UI 使⽤MIT协议,开源。 jquery easyUI如果商⽤需遵循license commercial商业许可,也就是要购买使⽤权.
上⾯这种⽅法⽐较巧妙,简单地解释⼀下:
⾸先,e=e||event;这句代码是为了进⾏浏览器事件对象获取的兼容。js中这句代码的意思是,如果在FireFox或Opera中,隐藏的变量e是存在的,那么e||event返回e,如果在IE中,隐藏变量e是不存在,则返回event。
其次,currKey=e.keyCode||e.which||e.charCode;这句是为了兼容浏览器按键事件对象的按键码属性(详见第三部分),如IE中,只有keyCode属性,⽽FireFox中有which和charCode属性,Opera中有keyCode和which属性等。
上述代码只是兼容了浏览器,获取了keyup事件对象,简单的弹出了按键码和按键的字符,但是问题出现了,当你按键时,字符键都是⼤写的,⽽按shift键时,显⽰的字符很奇怪,所以就需要优化⼀下代码了。