window.open()詳解及瀏覽器兼容性問題示例探討
阿新 • • 發佈：2017-12-20
ati 一個 span 如何 用戶 兼容性問題 說明 aid ask 這篇文章主要介紹了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
各瀏覽器運行結果匯總：
上表中為各個瀏覽器對 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中,不支持
【標註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 系統
【標註13】：Firefox 中,無論"status"值如何設置,狀態欄始終可見,而 Chrome Opera中,則與前者相反,狀態欄始終不可見。
【標註14】： Chrome Opera 中,無論"toolbar"值如何設置,始終不顯示工具欄。
綜上所述,可見window.open方法的sFeatures參數支持程度存在巨大差異,使用時須謹慎為之。
一般我們用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(任務欄)以外的長寬
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
各瀏覽器運行結果匯總：
上表中為各個瀏覽器對 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中,不支持
【標註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 系統
【標註13】：Firefox 中,無論"status"值如何設置,狀態欄始終可見,而 Chrome Opera中,則與前者相反,狀態欄始終不可見。
【標註14】： Chrome Opera 中,無論"toolbar"值如何設置,始終不顯示工具欄。
綜上所述,可見window.open方法的sFeatures參數支持程度存在巨大差異,使用時須謹慎為之。
一般我們用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(任務欄)以外的長寬
window.open()詳解及瀏覽器兼容性問題示例探討