W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
在瀏覽器中,window
對象(注意,w
為小寫)指當前的瀏覽器窗口。它也是所有對象的頂層對象。
“頂層對象”指的是最高一層的對象,所有其他對象都是它的下屬。JavaScript規(guī)定,瀏覽器環(huán)境的所有全局變量,都是window
對象的屬性。
var a = 1;
window.a // 1
上面代碼中,變量a
是一個全局變量,但是實質(zhì)上它是window
對象的屬性。聲明一個全局變量,就是為window
對象的同名屬性賦值。
從語言設(shè)計的角度看,所有變量都是window
對象的屬性,其實不是很合理。因為window
對象有自己的實體含義,不適合當作最高一層的頂層對象。這個設(shè)計失誤與JavaScript語言匆忙的設(shè)計過程有關(guān),最早的設(shè)想是語言內(nèi)置的對象越少越好,這樣可以提高瀏覽器的性能。因此,語言設(shè)計者Brendan Eich就把window
對象當作頂層對象,所有未聲明就賦值的變量都自動變成window
對象的屬性。這種設(shè)計使得編譯階段無法檢測出未聲明變量,但到了今天已經(jīng)沒有辦法糾正了。
window
對象的window
屬性指向自身。
window.window === this // true
window.name
屬性用于設(shè)置當前瀏覽器窗口的名字。
window.name = 'Hello World!';
console.log(window.name)
// "Hello World!"
各個瀏覽器對這個值的儲存容量有所不同,但是一般來說,可以高達幾MB。
該屬性只能保存字符串,且當瀏覽器窗口關(guān)閉后,所保存的值就會消失。因此局限性比較大,但是與<iframe>
窗口通信時,非常有用。
window.location
返回一個location
對象,用于獲取窗口當前的URL信息。它等同于document.location
對象,詳細介紹見《document對象》一節(jié)。
window.location === document.location // true
window.closed
屬性返回一個布爾值,表示窗口是否關(guān)閉。
window.closed // false
上面代碼檢查當前窗口是否關(guān)閉。這種檢查意義不大,因為只要能運行代碼,當前窗口肯定沒有關(guān)閉。這個屬性一般用來檢查,使用腳本打開的新窗口是否關(guān)閉。
var popup = window.open();
if ((popup !== null) && !popup.closed) {
// 窗口仍然打開著
}
window.opener
屬性返回打開當前窗口的父窗口。如果當前窗口沒有父窗口,則返回null
。
window.open().opener === window // true
上面表達式會打開一個新窗口,然后返回true
。
通過opener
屬性,可以獲得父窗口的的全局變量和方法,比如window.opener.propertyName
和window.opener.functionName()
。但這只限于兩個窗口屬于同源的情況(參見《同源政策》一節(jié)),且其中一個窗口由另一個打開。
window.frames
屬性返回一個類似數(shù)組的對象,成員為頁面內(nèi)所有框架窗口,包括frame
元素和iframe
元素。window.frames[0]
表示頁面中第一個框架窗口。
如果iframe
元素設(shè)置了id
或name
屬性,那么就可以用屬性值,引用這個iframe
窗口。比如<iframe name="myIFrame">
就可以用frames['myIFrame']
或者frames.myIFrame
來引用。
frames
屬性實際上是window
對象的別名。
frames === window // true
因此,frames[0]
也可以用window[0]
表示。但是,從語義上看,frames
更清晰,而且考慮到window
還是全局對象,因此推薦表示多窗口時,總是使用frames[0]
的寫法。更多介紹請看下文的《多窗口操作》部分。
window.length
屬性返回當前網(wǎng)頁包含的框架總數(shù)。如果當前網(wǎng)頁不包含frame
和iframe
元素,那么window.length
就返回0
。
window.frames.length === window.length // true
window.frames.length
與window.length
應(yīng)該是相等的。
window.screenX
和window.screenY
屬性,返回瀏覽器窗口左上角相對于當前屏幕左上角((0, 0)
)的水平距離和垂直距離,單位為像素。
window.innerHeight
和window.innerWidth
屬性,返回網(wǎng)頁在當前窗口中可見部分的高度和寬度,即“視口”(viewport),單位為像素。
當用戶放大網(wǎng)頁的時候(比如將網(wǎng)頁從100%的大小放大為200%),這兩個屬性會變小。因為這時網(wǎng)頁的像素大小不變(比如寬度還是960像素),只是每個像素占據(jù)的屏幕空間變大了,因為可見部分(視口)就變小了。
注意,這兩個屬性值包括滾動條的高度和寬度。
window.outerHeight
和window.outerWidth
屬性返回瀏覽器窗口的高度和寬度,包括瀏覽器菜單和邊框,單位為像素。
window.pageXOffset
屬性返回頁面的水平滾動距離,window.pageYOffset
屬性返回頁面的垂直滾動距離,單位都為像素。
舉例來說,如果用戶向下拉動了垂直滾動條75像素,那么window.pageYOffset
就是75。用戶水平向右拉動水平滾動條200像素,window.pageXOffset
就是200。
window
對象的navigator
屬性,指向一個包含瀏覽器信息的對象。
navigator.userAgent
屬性返回瀏覽器的User-Agent字符串,標示瀏覽器的廠商和版本信息。
下面是Chrome瀏覽器的userAgent
。
navigator.userAgent
// "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.57 Safari/537.36"
通過userAgent
屬性識別瀏覽器,不是一個好辦法。因為必須考慮所有的情況(不同的瀏覽器,不同的版本),非常麻煩,而且無法保證未來的適用性,更何況各種上網(wǎng)設(shè)備層出不窮,難以窮盡。所以,現(xiàn)在一般不再識別瀏覽器了,而是使用“功能識別”方法,即逐一測試當前瀏覽器是否支持要用到的JavaScript功能。
不過,通過userAgent
可以大致準確地識別手機瀏覽器,方法就是測試是否包含mobi
字符串。
var ua = navigator.userAgent.toLowerCase();
if (/mobi/i.test(ua)) {
// 手機瀏覽器
} else {
// 非手機瀏覽器
}
如果想要識別所有移動設(shè)備的瀏覽器,可以測試更多的特征字符串。
/mobi|android|touch|mini/i.test(ua)
navigator.plugins
屬性返回一個類似數(shù)組的對象,成員是瀏覽器安裝的插件,比如Flash、ActiveX等。
navigator.platform
屬性返回用戶的操作系統(tǒng)信息。
navigator.platform
// "Linux x86_64"
navigator.onLine
屬性返回一個布爾值,表示用戶當前在線還是離線。
navigator.onLine // true
navigator.geolocation
返回一個Geolocation對象,包含用戶地理位置的信息。
javaEnabled
方法返回一個布爾值,表示瀏覽器是否能運行Java Applet小程序。
navigator.javaEnabled() // false
cookieEnabled
屬性返回一個布爾值,表示瀏覽器是否能儲存Cookie。
navigator.cookieEnabled // true
注意,這個返回值與是否儲存某個網(wǎng)站的Cookie無關(guān)。用戶可以設(shè)置某個網(wǎng)站不得儲存Cookie,這時cookieEnabled
返回的還是true
。
window.screen
對象包含了顯示設(shè)備的信息。
screen.height
和screen.width
兩個屬性,一般用來了解設(shè)備的分辨率。
// 顯示設(shè)備的高度,單位為像素
screen.height // 1920
// 顯示設(shè)備的寬度,單位為像素
screen.width // 1080
上面代碼顯示,某設(shè)備的分辨率是1920x1080。
除非調(diào)整顯示器的分辨率,否則這兩個值可以看作常量,不會發(fā)生變化。顯示器的分辨率與瀏覽器設(shè)置無關(guān),縮放網(wǎng)頁并不會改變分辨率。
下面是根據(jù)屏幕分辨率,將用戶導向不同網(wǎng)頁的代碼。
if ((screen.width <= 800) && (screen.height <= 600)) {
window.location.replace('small.html');
} else {
window.location.replace('wide.html');
}
screen.availHeight
和screen.availWidth
屬性返回屏幕可用的高度和寬度,單位為像素。它們的值為屏幕的實際大小減去操作系統(tǒng)某些功能占據(jù)的空間,比如系統(tǒng)的任務(wù)欄。
screen.colorDepth
屬性返回屏幕的顏色深度,一般為16(表示16-bit)或24(表示24-bit)。
window.moveTo
方法用于移動瀏覽器窗口到指定位置。它接受兩個參數(shù),分別是窗口左上角距離屏幕左上角的水平距離和垂直距離,單位為像素。
window.moveTo(100, 200)
上面代碼將窗口移動到屏幕(100, 200)
的位置。
window.moveBy
方法將窗口移動到一個相對位置。它接受兩個參數(shù),分布是窗口左上角向右移動的水平距離和向下移動的垂直距離,單位為像素。
window.moveBy(25, 50)
上面代碼將窗口向右移動25像素、向下移動50像素。
window.scrollTo
方法用于將網(wǎng)頁的指定位置,滾動到瀏覽器左上角。它的參數(shù)是相對于整張網(wǎng)頁的橫坐標和縱坐標。它有一個別名window.scroll
。
window.scrollTo(0, 1000);
window.scrollBy
方法用于將網(wǎng)頁移動指定距離,單位為像素。它接受兩個參數(shù):向右滾動的像素,向下滾動的像素。
window.scrollBy(0, window.innerHeight)
上面代碼用于將網(wǎng)頁向下滾動一屏。
window.open
方法用于新建另一個瀏覽器窗口,并且返回該窗口對象。
var popup = window.open('somefile.html');
上面代碼會讓瀏覽器彈出一個新建窗口,網(wǎng)址是當前域名下的somefile.html
。
open
方法一共可以接受四個參數(shù)。
about:blank
。_blank
,表示新建一個沒有名字的窗口。history
對象之中的當前網(wǎng)址記錄,默認值為false
。顯然,這個參數(shù)只有在第二個參數(shù)指向已經(jīng)存在的窗口時,才有意義。下面是一個例子。
var popup = window.open(
'somepage.html',
'DefinitionsWindows',
'height=200,width=200,location=no,status=yes,resizable=yes,scrollbars=yes'
);
上面代碼表示,打開的新窗口高度和寬度都為200像素,沒有地址欄和滾動條,但有狀態(tài)欄,允許用戶調(diào)整大小。
注意,如果在第三個參數(shù)中設(shè)置了一部分參數(shù),其他沒有被設(shè)置的yes/no
參數(shù)都會被設(shè)成no
,只有titlebar
和關(guān)閉按鈕除外(它們的值默認為yes
)。
另外,open
方法的第二個參數(shù)雖然可以指定已經(jīng)存在的窗口,但是不等于可以任意控制其他窗口。為了防止被不相干的窗口控制,瀏覽器只有在兩個窗口同源,或者目標窗口被當前網(wǎng)頁打開的情況下,才允許open
方法指向該窗口。
open
方法返回新窗口的引用。
var windowB = window.open('windowB.html', 'WindowB');
windowB.window.name // "WindowB"
下面是另一個例子。
var w = window.open();
w.alert('已經(jīng)打開新窗口');
w.location = 'http://example.com';
上面代碼先打開一個新窗口,然后在該窗口彈出一個對話框,再將網(wǎng)址導向example.com
。
由于open
這個方法很容易被濫用,許多瀏覽器默認都不允許腳本自動新建窗口。只允許在用戶點擊鏈接或按鈕,腳本做出反應(yīng),彈出新窗口。因此,有必要檢查一下打開新窗口是否成功。
if (popup === null) {
// 新建窗口失敗
}
window.close
方法用于關(guān)閉當前窗口,一般用來關(guān)閉window.open
方法新建的窗口。
popup.close()
該方法只對頂層窗口有效,iframe
框架之中的窗口使用該方法無效。
print
方法會跳出打印對話框,同用戶點擊菜單里面的“打印”命令效果相同。
頁面上的打印按鈕代碼如下。
document.getElementById('printLink').onclick = function() {
window.print();
}
非桌面設(shè)備(比如手機)可能沒有打印功能,這時可以這樣判斷。
if (typeof window.print === 'function') {
// 支持打印功能
}
getComputedStyle
方法接受一個HTML元素作為參數(shù),返回一個包含該HTML元素的最終樣式信息的對象。詳見《DOM》一章的CSS章節(jié)。
window.matchMedia
方法用來檢查CSS的mediaQuery語句。詳見《DOM》一章的CSS章節(jié)。
focus
方法會激活指定當前窗口,使其獲得焦點。
var popup = window.open('popup.html', 'Popup Window');
if ((popup !== null) && !popup.closed) {
popup.focus();
}
上面代碼先檢查popup
窗口是否依然存在,確認后激活該窗口。
當前窗口獲得焦點時,會觸發(fā)focus
事件;當前窗口失去焦點時,會觸發(fā)blur
事件。
window.getSelection
方法返回一個Selection
對象,表示用戶現(xiàn)在選中的文本。
var selObj = window.getSelection();
使用Selction
對象的toString
方法可以得到選中的文本。
var selectedText = selObj.toString();
由于網(wǎng)頁可以使用iframe
元素,嵌入其他網(wǎng)頁,因此一個網(wǎng)頁之中會形成多個窗口。另一情況是,子網(wǎng)頁之中又嵌入別的網(wǎng)頁,形成多級窗口。
各個窗口之中的腳本,可以引用其他窗口。瀏覽器提供了一些特殊變量,用來返回其他窗口。
top
:頂層窗口,即最上層的那個窗口parent
:父窗口self
:當前窗口,即自身下面代碼可以判斷,當前窗口是否為頂層窗口。
top === self
// 更好的寫法
window.top === window.self
下面的代碼讓父窗口的訪問歷史后退一次。
parent.history.back();
與這些變量對應(yīng),瀏覽器還提供一些特殊的窗口名,供open
方法、<a>
標簽、<form>
標簽等引用。
_top
:頂層窗口_parent
:父窗口_blank
:新窗口下面代碼就表示在頂層窗口打開鏈接。
<a href="somepage.html" target="_top">Link</a>
對于iframe
嵌入的窗口,document.getElementById
方法可以拿到該窗口的DOM節(jié)點,然后使用contentWindow
屬性獲得iframe
節(jié)點包含的window
對象,或者使用contentDocument
屬性獲得包含的document
對象。
var frame = document.getElementById('theFrame');
var frameWindow = frame.contentWindow;
// 等同于 frame.contentWindow.document
var frameDoc = frame.contentDocument;
// 獲取子窗口的變量和屬性
frameWindow.function()
// 獲取子窗口的標題
frameWindow.title
iframe
元素遵守同源政策,只有當父頁面與框架頁面來自同一個域名,兩者之間才可以用腳本通信,否則只有使用window.postMessage
方法。
iframe
窗口內(nèi)部,使用window.parent
引用父窗口。如果當前頁面沒有父窗口,則window.parent
屬性返回自身。因此,可以通過window.parent
是否等于window.self
,判斷當前窗口是否為iframe
窗口。
if (window.parent !== window.self) {
// 當前窗口是子窗口
}
iframe
嵌入窗口的window
對象,有一個frameElement
屬性,返回它在父窗口中的DOM節(jié)點。對于那么非嵌入的窗口,該屬性等于null
。
var f1Element = document.getElementById('f1');
var fiWindow = f1Element.contentWindow;
f1Window.frameElement === f1Element // true
window.frameElement === null // true
window
對象的frames
屬性返回一個類似數(shù)組的對象,成員是所有子窗口的window
對象??梢允褂眠@個屬性,實現(xiàn)窗口之間的互相引用。比如,frames[0]
返回第一個子窗口,frames[1].frames[2]
返回第二個子窗口內(nèi)部的第三個子窗口,parent.frames[1]
返回父窗口的第二個子窗口。
需要注意的是,window.frames
每個成員的值,是框架內(nèi)的窗口(即框架的window
對象),而不是iframe
標簽在父窗口的DOM節(jié)點。如果要獲取每個框架內(nèi)部的DOM樹,需要使用window.frames[0].document
的寫法。
另外,如果iframe
元素設(shè)置了name
或id
屬性,那么屬性值會自動成為全局變量,并且可以通過window.frames
屬性引用,返回子窗口的window
對象。
// HTML代碼為<iframe id="myFrame">
myFrame // [HTMLIFrameElement]
frames.myframe === myFrame // true
另外,name
屬性的值會自動成為子窗口的名稱,可以用在window.open
方法的第二個參數(shù),或者<a>
和<frame>
標簽的target
屬性。
window
對象可以接收以下事件。
load
事件發(fā)生在文檔在瀏覽器窗口加載完畢時。window.onload
屬性可以指定這個事件的回調(diào)函數(shù)。
window.onload = function() {
var elements = document.getElementsByClassName('example');
for (var i = 0; i < elements.length; i++) {
var elt = elements[i];
// ...
}
};
上面代碼在網(wǎng)頁加載完畢后,獲取指定元素并進行處理。
瀏覽器腳本發(fā)生錯誤時,會觸發(fā)window對象的error
事件。我們可以通過window.onerror
屬性對該事件指定回調(diào)函數(shù)。
window.onerror = function (message, filename, lineno, colno, error) {
console.log("出錯了!--> %s", error.stack);
};
由于歷史原因,window
的error
事件的回調(diào)函數(shù)不接受錯誤對象作為參數(shù),而是一共可以接受五個參數(shù),它們的含義依次如下。
老式瀏覽器只支持前三個參數(shù)。
并不是所有的錯誤,都會觸發(fā)JavaScript的error
事件(即讓JavaScript報錯),只限于以下三類事件。
以下兩類事件不會觸發(fā)JavaScript的error事件。
下面是一個例子,如果整個頁面未捕獲錯誤超過3個,就顯示警告。
window.onerror = function(msg, url, line) {
if (onerror.num++ > onerror.max) {
alert('ERROR: ' + msg + '\n' + url + ':' + line);
return true;
}
}
onerror.max = 3;
onerror.num = 0;
需要注意的是,如果腳本網(wǎng)址與網(wǎng)頁網(wǎng)址不在同一個域(比如使用了CDN),瀏覽器根本不會提供詳細的出錯信息,只會提示出錯,錯誤類型是“Script error.”,行號為0,其他信息都沒有。這是瀏覽器防止向外部腳本泄漏信息。一個解決方法是在腳本所在的服務(wù)器,設(shè)置Access-Control-Allow-Origin
的HTTP頭信息。
Access-Control-Allow-Origin: *
然后,在網(wǎng)頁的<script>
標簽中設(shè)置crossorigin
屬性。
<script crossorigin="anonymous" src="http://example.com/file.js"></script>
上面代碼的crossorigin="anonymous"
表示,讀取文件不需要身份信息,即不需要cookie和HTTP認證信息。如果設(shè)為crossorigin="use-credentials"
,就表示瀏覽器會上傳cookie和HTTP認證信息,同時還需要服務(wù)器端打開HTTP頭信息Access-Control-Allow-Credentials
。
網(wǎng)頁URL的合法字符分成兩類。
;
),逗號(’,’),斜杠(/
),問號(?
),冒號(:
),at(@
),&
,等號(=
),加號(+
),美元符號($
),井號(#
)a-z
,A-Z
,0-9
,連詞號(-
),下劃線(_
),點(.
),感嘆號(!
),波浪線(~
),星號(*
),單引號(\
),圓括號(
()`)除了以上字符,其他字符出現(xiàn)在URL之中都必須轉(zhuǎn)義,規(guī)則是根據(jù)操作系統(tǒng)的默認編碼,將每個字節(jié)轉(zhuǎn)為百分號(%
)加上兩個大寫的十六進制字母。比如,UTF-8的操作系統(tǒng)上,http://www.example.com/q=春節(jié)
這個URL之中,漢字“春節(jié)”不是URL的合法字符,所以被瀏覽器自動轉(zhuǎn)成http://www.example.com/q=%E6%98%A5%E8%8A%82
。其中,“春”轉(zhuǎn)成了%E6%98%A5
,“節(jié)”轉(zhuǎn)成了“%E8%8A%82”。這是因為“春”和”節(jié)“的UTF-8編碼分別是E6 98 A5
和E8 8A 82
,將每個字節(jié)前面加上百分號,就構(gòu)成了URL編碼。
JavaScript提供四個URL的編碼/解碼方法。
encodeURI()
encodeURIComponent()
decodeURI()
decodeURIComponent()
encodeURI
方法的參數(shù)是一個字符串,代表整個URL。它會將元字符和語義字符之外的字符,都進行轉(zhuǎn)義。
encodeURI('http://www.example.com/q=春節(jié)')
// "http://www.example.com/q=%E6%98%A5%E8%8A%82"
encodeURIComponent
只轉(zhuǎn)除了語義字符之外的字符,元字符也會被轉(zhuǎn)義。因此,它的參數(shù)通常是URL的路徑或參數(shù)值,而不是整個URL。
encodeURIComponent('春節(jié)')
// "%E6%98%A5%E8%8A%82"
encodeURIComponent('http://www.example.com/q=春節(jié)')
// "http%3A%2F%2Fwww.example.com%2Fq%3D%E6%98%A5%E8%8A%82"
上面代碼中,encodeURIComponent
會連URL元字符一起轉(zhuǎn)義,所以通常只用它轉(zhuǎn)URL的片段。
decodeURI
用于還原轉(zhuǎn)義后的URL。它是encodeURI
方法的逆運算。
decodeURI('http://www.example.com/q=%E6%98%A5%E8%8A%82')
// "http://www.example.com/q=春節(jié)"
decodeURIComponent
用于還原轉(zhuǎn)義后的URL片段。它是encodeURIComponent
方法的逆運算。
decodeURIComponent('%E6%98%A5%E8%8A%82')
// "春節(jié)"
alert()
、prompt()
、confirm()
都是瀏覽器與用戶互動的全局方法。它們會彈出不同的對話框,要求用戶做出回應(yīng)。
需要注意的是,alert()
、prompt()
、confirm()
這三個方法彈出的對話框,都是瀏覽器統(tǒng)一規(guī)定的式樣,是無法定制的。
alert
方法彈出的對話框,只有一個“確定”按鈕,往往用來通知用戶某些信息。
// 格式
alert(message);
// 實例
alert('Hello World');
用戶只有點擊“確定”按鈕,對話框才會消失。在對話框彈出期間,瀏覽器窗口處于凍結(jié)狀態(tài),如果不點“確定”按鈕,用戶什么也干不了。
alert
方法的參數(shù)只能是字符串,沒法使用CSS樣式,但是可以用\n
指定換行。
alert('本條提示\n分成兩行');
prompt
方法彈出的對話框,在提示文字的下方,還有一個輸入框,要求用戶輸入信息,并有“確定”和“取消”兩個按鈕。它往往用來獲取用戶輸入的數(shù)據(jù)。
// 格式
var result = prompt(text[, default]);
// 實例
var result = prompt('您的年齡?', 25)
上面代碼會跳出一個對話框,文字提示為“您的年齡?”,要求用戶在對話框中輸入自己的年齡(默認顯示25)。
prompt
方法的返回值是一個字符串(有可能為空)或者null
,具體分成三種情況。
null
。prompt
方法的第二個參數(shù)是可選的,但是如果不提供的話,IE瀏覽器會在輸入框中顯示undefined
。因此,最好總是提供第二個參數(shù),作為輸入框的默認值。
confirm
方法彈出的對話框,除了提示信息之外,只有“確定”和“取消”兩個按鈕,往往用來征詢用戶的意見。
// 格式
var result = confirm(message);
// 實例
var result = confirm("你最近好嗎?");
上面代碼彈出一個對話框,上面只有一行文字“你最近好嗎?”,用戶選擇點擊“確定”或“取消”。
confirm
方法返回一個布爾值,如果用戶點擊“確定”,則返回true
;如果用戶點擊“取消”,則返回false
。
var okay = confirm('Please confirm this message.');
if (okay) {
// 用戶按下“確定”
} else {
// 用戶按下“取消”
}
confirm
的一個用途是,當用戶離開當前頁面時,彈出一個對話框,問用戶是否真的要離開。
window.onunload = function() {
return confirm('你確定要離開當面頁面嗎?');
}
這三個方法都具有堵塞效應(yīng),一旦彈出對話框,整個頁面就是暫停執(zhí)行,等待用戶做出反應(yīng)。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: