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(任務欄)以外的長寬



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM