2023年6月21日发(作者：)

（）详解及浏览器兼容性问题

⼀、基本语法：(pageURL,name,parameters)其中：pageURL 为⼦窗⼝路径name 为⼦窗⼝名字parameters 为窗⼝参数(各参数⽤逗号分隔)⼆、⽰例

将在新窗体newwindow中打开,宽为800,⾼为500,距屏顶0象素,屏左0象素,

⽆⼯具条,⽆菜单条,⽆滚动条,不可调整⼤⼩,⽆地址栏,⽆状态栏。各浏览器对()的窗⼝特征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"值如何设置,始终不显⽰⼯具栏。综上所述,可见⽅法的sFeatures参数⽀持程度存在巨⼤差异,使⽤时须谨慎为之。

⼀般我们⽤打开页⾯都需要居中显⽰，⽰例代码：

var width=800; //弹出窗⼝的宽度;var height=500; //弹出窗⼝的⾼度;var top = (eight-height)/2; //窗⼝的垂直位置;var left = (idth-width)/2; //窗⼝的⽔平位置;('','newwindow','height='+height+',width='+width+',top='+top+',left='+left+', toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')availHeight和height的区别

返回当前屏幕宽度(分辨率值) 返回当前屏幕⾼度(分辨率值) idth,eight是指除去taskbar(任务栏)以外的长宽(三)判断浏览器类型上⾯了解了在各种浏览器⾥是如何实现获取按键事件对象的⽅法，那么下⾯需要判断浏览器类型，这个⽅法很多，有⽐较⽅便理解的，也有很巧妙的办法，先说⼀般的⽅法：就是利⽤navigator对象的appName属性，当然也可以⽤userAgent属性，这⾥⽤appName来实现判断浏览器类型，IE和Maxthon的appName是“Microsoft Internet Explorer” ,⽽FireFox和Opera的appName是“Netscape”，所以⼀个功能⽐较简单的代码如下：　　 function keyUp(e) {

　　 if(e == "Microsoft Internet Explorer")　　 {　　 　　var keycode = e;

　　 　　var realkey = arCode(e);

　　 }else　　 {　　 　　 var keycode = ;

　　 　 　 var realkey = arCode();

　　 }　　 alert("按键码: " + keycode + " 字符: " + realkey);　}p = keyUp;⽐较简洁的⽅法是[2]：　　 function keyUp(e) {　 var currKey=0,e=e||event;　 currKey=e||||de;　　var keyName = arCode(currKey);　 alert("按键码: " + currKey + " 字符: " + keyName);}p = keyUp;关于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特性，不再⽀持IE678，低版本由⼀些⼩部分的兼容不够好，请⾃⼰做技术选型的时候去测试，你要使⽤那个版本。在兼容问题上，他们都有瑕疵，看你的接收程度。使⽤许可license. EXTJS 2.1以上版本，商⽤需要购买商业授权，jquery UI 使⽤MIT协议，开源。 jquery easyUI如果商⽤需遵循licensecommercial商业许可，也就是要购买使⽤权.上⾯这种⽅法⽐较巧妙，简单地解释⼀下：⾸先，e=e||event;这句代码是为了进⾏浏览器事件对象获取的兼容。js中这句代码的意思是，如果在FireFox或Opera中，隐藏的变量e是存在的，那么e||event返回e，如果在IE中，隐藏变量e是不存在，则返回event。其次，currKey=e||||de;这句是为了兼容浏览器按键事件对象的按键码属性（详见第三部分），如IE中，只有keyCode属性，⽽FireFox中有which和charCode属性，Opera中有keyCode和which属性等。上述代码只是兼容了浏览器，获取了keyup事件对象，简单的弹出了按键码和按键的字符，但是问题出现了，当你按键时，字符键都是⼤写的，⽽按shift键时，显⽰的字符很奇怪，所以就需要优化⼀下代码了。

2023年6月21日发(作者：)

（）详解及浏览器兼容性问题

⼀、基本语法：(pageURL,name,parameters)其中：pageURL 为⼦窗⼝路径name 为⼦窗⼝名字parameters 为窗⼝参数(各参数⽤逗号分隔)⼆、⽰例

将在新窗体newwindow中打开,宽为800,⾼为500,距屏顶0象素,屏左0象素,

⽆⼯具条,⽆菜单条,⽆滚动条,不可调整⼤⼩,⽆地址栏,⽆状态栏。各浏览器对()的窗⼝特征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"值如何设置,始终不显⽰⼯具栏。综上所述,可见⽅法的sFeatures参数⽀持程度存在巨⼤差异,使⽤时须谨慎为之。

⼀般我们⽤打开页⾯都需要居中显⽰，⽰例代码：

var width=800; //弹出窗⼝的宽度;var height=500; //弹出窗⼝的⾼度;var top = (eight-height)/2; //窗⼝的垂直位置;var left = (idth-width)/2; //窗⼝的⽔平位置;('','newwindow','height='+height+',width='+width+',top='+top+',left='+left+', toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')availHeight和height的区别

返回当前屏幕宽度(分辨率值) 返回当前屏幕⾼度(分辨率值) idth,eight是指除去taskbar(任务栏)以外的长宽(三)判断浏览器类型上⾯了解了在各种浏览器⾥是如何实现获取按键事件对象的⽅法，那么下⾯需要判断浏览器类型，这个⽅法很多，有⽐较⽅便理解的，也有很巧妙的办法，先说⼀般的⽅法：就是利⽤navigator对象的appName属性，当然也可以⽤userAgent属性，这⾥⽤appName来实现判断浏览器类型，IE和Maxthon的appName是“Microsoft Internet Explorer” ,⽽FireFox和Opera的appName是“Netscape”，所以⼀个功能⽐较简单的代码如下：　　 function keyUp(e) {

　　 if(e == "Microsoft Internet Explorer")　　 {　　 　　var keycode = e;

　　 　　var realkey = arCode(e);

　　 }else　　 {　　 　　 var keycode = ;

　　 　 　 var realkey = arCode();

　　 }　　 alert("按键码: " + keycode + " 字符: " + realkey);　}p = keyUp;⽐较简洁的⽅法是[2]：　　 function keyUp(e) {　 var currKey=0,e=e||event;　 currKey=e||||de;　　var keyName = arCode(currKey);　 alert("按键码: " + currKey + " 字符: " + keyName);}p = keyUp;关于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特性，不再⽀持IE678，低版本由⼀些⼩部分的兼容不够好，请⾃⼰做技术选型的时候去测试，你要使⽤那个版本。在兼容问题上，他们都有瑕疵，看你的接收程度。使⽤许可license. EXTJS 2.1以上版本，商⽤需要购买商业授权，jquery UI 使⽤MIT协议，开源。 jquery easyUI如果商⽤需遵循licensecommercial商业许可，也就是要购买使⽤权.上⾯这种⽅法⽐较巧妙，简单地解释⼀下：⾸先，e=e||event;这句代码是为了进⾏浏览器事件对象获取的兼容。js中这句代码的意思是，如果在FireFox或Opera中，隐藏的变量e是存在的，那么e||event返回e，如果在IE中，隐藏变量e是不存在，则返回event。其次，currKey=e||||de;这句是为了兼容浏览器按键事件对象的按键码属性（详见第三部分），如IE中，只有keyCode属性，⽽FireFox中有which和charCode属性，Opera中有keyCode和which属性等。上述代码只是兼容了浏览器，获取了keyup事件对象，简单的弹出了按键码和按键的字符，但是问题出现了，当你按键时，字符键都是⼤写的，⽽按shift键时，显⽰的字符很奇怪，所以就需要优化⼀下代码了。