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参数支持程度存在巨大差异,使用时须谨慎为之。

                                                                                                             摘自：http://www.w3help.org/zh-cn/causes/BX1053#

 

一般我们用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);
　}
document.onkeyup = keyUp;

比较简洁的方法是[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);
}
document.onkeyup = keyUp;

关于ExtJS、JQuery UI和easy UI的选择问题

https://zhidao.baidu.com/question/572968258/answer/1442925949.html

首先根据你的需求，你需要这些框架具有你需要的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，低版本由一些小部分的兼容不够好，请自己做技术选型的时候去测试，你要使用那个版本。在兼容问题上，他们都有瑕疵，看你的接收程度。

使用许可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键时，显示的字符很奇怪，所以就需要优化一下代码了。