window.open()詳解及瀏覽器兼容性問題示例探討
更新時(shí)間：2014年05月29日 14:43:36 作者：
這篇文章主要介紹了window.open()的使用及瀏覽器兼容性問題方面的知識(shí)，感興趣的朋友可以參考下
一、基本語法：
window.open(pageURL,name,parameters)
其中：
pageURL 為子窗口路徑
name 為子窗口名字
parameters 為窗口參數(shù)(各參數(shù)用逗號(hào)分隔)
二、示例
<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象素,
無工具條,無菜單條,無滾動(dòng)條,不可調(diào)整大小,無地址欄,無狀態(tài)欄。
各瀏覽器對(duì)window.open()的窗口特征sFeatures參數(shù)支持程度存在差異
各瀏覽器運(yùn)行結(jié)果匯總：
上表中為各個(gè)瀏覽器對(duì) features 各參數(shù)選項(xiàng)的支持程度，其中需要特殊說明的如下：
【標(biāo)注1】：IE7 IE8 Firefox Chrome Safari 中，當(dāng)"menubar"選項(xiàng)為"yes"時(shí),默認(rèn)不顯示菜單欄,需要按ALT鍵后菜單欄才可顯示；相反當(dāng) "menubar"選項(xiàng)為"no"時(shí),即使按了ALT鍵也不會(huì)顯示菜單欄。
【標(biāo)注2】：Safari中,開啟"location"選項(xiàng)與開啟"toolbar"選項(xiàng)時(shí)顯示效果一致。
【標(biāo)注3】：IE6 IE8 Chrome 中,使用"top"和"left"定位,如果出現(xiàn)設(shè)定的的坐標(biāo)值過大,彈出窗口將可能顯示在屏幕可視范圍外。
【標(biāo)注4】：IE7 Firefox Safari Opera中,使用"top"和"left"定位,如果出現(xiàn)設(shè)定的的坐標(biāo)值過大,窗口會(huì)自動(dòng)調(diào)整"top"與"left"值,確保窗口正常顯示在屏幕可視區(qū)域內(nèi)。
【標(biāo)注5】：Chrome Opera中,不支持在沒有設(shè)定"width"與"height"值的情況下獨(dú)立使用"left"和"top",此時(shí)"left""top"設(shè)定值均不生效。
【標(biāo)注6】：Chrome 中,不支持在沒有設(shè)定"left"和"height"值的情況下獨(dú)立使用"width"與"height",此時(shí)"width" "height"設(shè)定值均不生效。結(jié)合【標(biāo)注5】說明可知,在Chrome中彈出窗口不論想要設(shè)定寬高或位置中的一個(gè)或幾個(gè)值,都必須將他們?nèi)抠x值,否則都將不起作用。
【標(biāo)注7】：Firefox Chrome 中,地址欄會(huì)始終顯示。
【標(biāo)注8】：Opera 中,地址欄默認(rèn)不顯示,但可以點(diǎn)擊頁面最上方橫條使他顯示出來,設(shè)置"location=yes"后地址欄會(huì)自動(dòng)顯示出來。
【標(biāo)注9】：Chrome Opera 中,不論"menubar"值如何設(shè)置,永遠(yuǎn)不顯示菜單欄。
【標(biāo)注10】：Firefox Safari Chrome Opera中無論"resizable"值如何設(shè)置,窗口永遠(yuǎn)可由用戶調(diào)整大小。
【標(biāo)注11】：Safari Chrome 中，在頁面存在滾動(dòng)條的情況下,無論"scrollbars"值如何設(shè)置,滾動(dòng)條始終可見。
【標(biāo)注12】：IE7 在 Windows XP SP3 系統(tǒng)中默認(rèn)可以支持"status "參數(shù)隱藏狀態(tài)欄；而在 Windows Vista系統(tǒng)默認(rèn)環(huán)境下不支持"status"參數(shù)，狀態(tài)欄始終可見.這與兩個(gè)系統(tǒng)中默認(rèn)的 IE7 小版本號(hào)不同有關(guān),前者版本號(hào)較低,后者版本號(hào)較高。
【標(biāo)注13】：Firefox 中,無論"status"值如何設(shè)置,狀態(tài)欄始終可見,而 Chrome Opera中,則與前者相反,狀態(tài)欄始終不可見。
【標(biāo)注14】： Chrome Opera 中,無論"toolbar"值如何設(shè)置,始終不顯示工具欄。
綜上所述,可見window.open方法的sFeatures參數(shù)支持程度存在巨大差異,使用時(shí)須謹(jǐn)慎為之。
一般我們用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的區(qū)別
window.screen.width 返回當(dāng)前屏幕寬度(分辨率值)
window.screen.height 返回當(dāng)前屏幕高度(分辨率值)
screen.availWidth,screen.availHeight是指除去taskbar(任務(wù)欄)以外的長寬
window.open(pageURL,name,parameters)
其中：
pageURL 為子窗口路徑
name 為子窗口名字
parameters 為窗口參數(shù)(各參數(shù)用逗號(hào)分隔)
二、示例
復(fù)制代碼 代碼如下:
<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象素,
無工具條,無菜單條,無滾動(dòng)條,不可調(diào)整大小,無地址欄,無狀態(tài)欄。
各瀏覽器對(duì)window.open()的窗口特征sFeatures參數(shù)支持程度存在差異
各瀏覽器運(yùn)行結(jié)果匯總：
上表中為各個(gè)瀏覽器對(duì) features 各參數(shù)選項(xiàng)的支持程度，其中需要特殊說明的如下：
【標(biāo)注1】：IE7 IE8 Firefox Chrome Safari 中，當(dāng)"menubar"選項(xiàng)為"yes"時(shí),默認(rèn)不顯示菜單欄,需要按ALT鍵后菜單欄才可顯示；相反當(dāng) "menubar"選項(xiàng)為"no"時(shí),即使按了ALT鍵也不會(huì)顯示菜單欄。
【標(biāo)注2】：Safari中,開啟"location"選項(xiàng)與開啟"toolbar"選項(xiàng)時(shí)顯示效果一致。
【標(biāo)注3】：IE6 IE8 Chrome 中,使用"top"和"left"定位,如果出現(xiàn)設(shè)定的的坐標(biāo)值過大,彈出窗口將可能顯示在屏幕可視范圍外。
【標(biāo)注4】：IE7 Firefox Safari Opera中,使用"top"和"left"定位,如果出現(xiàn)設(shè)定的的坐標(biāo)值過大,窗口會(huì)自動(dòng)調(diào)整"top"與"left"值,確保窗口正常顯示在屏幕可視區(qū)域內(nèi)。
【標(biāo)注5】：Chrome Opera中,不支持在沒有設(shè)定"width"與"height"值的情況下獨(dú)立使用"left"和"top",此時(shí)"left""top"設(shè)定值均不生效。
【標(biāo)注6】：Chrome 中,不支持在沒有設(shè)定"left"和"height"值的情況下獨(dú)立使用"width"與"height",此時(shí)"width" "height"設(shè)定值均不生效。結(jié)合【標(biāo)注5】說明可知,在Chrome中彈出窗口不論想要設(shè)定寬高或位置中的一個(gè)或幾個(gè)值,都必須將他們?nèi)抠x值,否則都將不起作用。
【標(biāo)注7】：Firefox Chrome 中,地址欄會(huì)始終顯示。
【標(biāo)注8】：Opera 中,地址欄默認(rèn)不顯示,但可以點(diǎn)擊頁面最上方橫條使他顯示出來,設(shè)置"location=yes"后地址欄會(huì)自動(dòng)顯示出來。
【標(biāo)注9】：Chrome Opera 中,不論"menubar"值如何設(shè)置,永遠(yuǎn)不顯示菜單欄。
【標(biāo)注10】：Firefox Safari Chrome Opera中無論"resizable"值如何設(shè)置,窗口永遠(yuǎn)可由用戶調(diào)整大小。
【標(biāo)注11】：Safari Chrome 中，在頁面存在滾動(dòng)條的情況下,無論"scrollbars"值如何設(shè)置,滾動(dòng)條始終可見。
【標(biāo)注12】：IE7 在 Windows XP SP3 系統(tǒng)中默認(rèn)可以支持"status "參數(shù)隱藏狀態(tài)欄；而在 Windows Vista系統(tǒng)默認(rèn)環(huán)境下不支持"status"參數(shù)，狀態(tài)欄始終可見.這與兩個(gè)系統(tǒng)中默認(rèn)的 IE7 小版本號(hào)不同有關(guān),前者版本號(hào)較低,后者版本號(hào)較高。
【標(biāo)注13】：Firefox 中,無論"status"值如何設(shè)置,狀態(tài)欄始終可見,而 Chrome Opera中,則與前者相反,狀態(tài)欄始終不可見。
【標(biāo)注14】： Chrome Opera 中,無論"toolbar"值如何設(shè)置,始終不顯示工具欄。
綜上所述,可見window.open方法的sFeatures參數(shù)支持程度存在巨大差異,使用時(shí)須謹(jǐn)慎為之。
一般我們用window.open打開頁面都需要居中顯示，示例代碼：
復(fù)制代碼 代碼如下:
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的區(qū)別
復(fù)制代碼 代碼如下:
window.screen.width 返回當(dāng)前屏幕寬度(分辨率值)
window.screen.height 返回當(dāng)前屏幕高度(分辨率值)
screen.availWidth,screen.availHeight是指除去taskbar(任務(wù)欄)以外的長寬
相關(guān)文章
本文通過實(shí)例代碼給大家介紹了基于js實(shí)現(xiàn)瀏覽上傳文件的代碼，非常不錯(cuò)，代碼簡單易懂，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-08-08
這篇文章主要介紹了ES6中Proxy代理用法,結(jié)合實(shí)例形式簡單分析了Proxy代理的概念、功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-04-04
JavaScript設(shè)計(jì)模式之迭代者模式詳情
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之迭代者模式詳情，迭代器設(shè)計(jì)模式能夠可以讓我們更方便的且有規(guī)矩的進(jìn)行訪問復(fù)合數(shù)據(jù)的每一項(xiàng)，也可以通過迭代器進(jìn)行完成一些流線式操作2022-06-06
js中setTimeout的妙用--防止循環(huán)超時(shí)
本文主要介紹了使用setTimeout實(shí)現(xiàn)防止循環(huán)超時(shí)的方法，具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
本文整理了一些常用的web打印及局部打印的方法以備不時(shí)之需，感興趣的朋友可以學(xué)習(xí)下2013-05-05
uniapp改變底部安全區(qū)頂部手機(jī)信號(hào)時(shí)間電池欄顏色樣式
這篇文章主要為大家介紹了uniapp改變底部安全區(qū)頂部手機(jī)信號(hào)時(shí)間電池欄顏色樣式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
JavaScript實(shí)現(xiàn)QQ聊天室功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)QQ聊天室功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript實(shí)現(xiàn)指定數(shù)量的并發(fā)限制的示例代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)指定數(shù)量的并發(fā)限制的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
鼠標(biāo)劃過實(shí)現(xiàn)延遲加載并隱藏層的js代碼
鼠標(biāo)劃過延遲加載隱藏層的效果，想必大家都有見到過吧，在本文將為大家詳細(xì)介紹下使用js是如何實(shí)現(xiàn)的，感興趣的朋友可以參考下2013-10-10
淺談html轉(zhuǎn)義及防止javascript注入攻擊的方法
下面小編就為大家?guī)硪黄獪\談html轉(zhuǎn)義及防止javascript注入攻擊的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-12-12