上表中为各个浏览器对 features 各参数选项的支持程度,其中需要特殊说明的如下:

【标注1】:IE7 IE8 Firefox Chrome Safari 中,当"menubar"选项">
首頁 > web前端 > js教程 > window.open()詳解及瀏覽器相容性問題範例探討_javascript技巧

window.open()詳解及瀏覽器相容性問題範例探討_javascript技巧

WBOY
發布: 2016-05-16 16:46:33
原創
1354 人瀏覽過

一、基本語法:
window.open(pageURL,name,parameters)
其中:
pageURL 為子視窗路徑
name 為子視窗名稱
parameters 為視窗參數(各參數用逗號分隔)

二、範例

複製程式碼 程式碼如下:


程式碼如下:


碼如下:



page.html將在新窗體newwindow中開啟,寬為800,高為500,距屏頂0像素,屏左0像素,
window.open()詳解及瀏覽器相容性問題範例探討_javascript技巧無工具條,無選單條,無捲軸,不可調整大小,無地址列,無狀態列。

各瀏覽器對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參數支持程度存在巨大差異,使用時須謹慎為之。 一般我們用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(工作列)以外的長寬
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板