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鍵時，顯示的字符很奇怪，所以就需要優化一下代碼了。