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键时，显⽰的字符很奇怪，所以就需要优化⼀下代码了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。