JavaScript瀏覽器對(duì)象之一Window對(duì)象詳解
JavaScript提供了一組以window為核心的對(duì)象,實(shí)現(xiàn)了對(duì)瀏覽器窗口的訪問(wèn)控制。JavaScript中定義了6種重要的對(duì)象:
window對(duì)象 表示瀏覽器中打開(kāi)的窗口;
document對(duì)象 表示瀏覽器中加載頁(yè)面的文檔對(duì)象;
location對(duì)象包含了瀏覽器當(dāng)前的URL信息;
navigation對(duì)象 包含了瀏覽器本身的信息;
screen對(duì)象 包含了客戶端屏幕及渲染能力的信息;
history對(duì)象 包含了瀏覽器訪問(wèn)網(wǎng)頁(yè)的歷史信息。
除了window對(duì)象之外,其他的5個(gè)對(duì)象都是window對(duì)象的屬性,它們的關(guān)系如下圖:

一、window對(duì)象
window對(duì)象就是JavaScript的Global對(duì)象,所以在使用window對(duì)象的屬性和方法是不需要特別指明。如:alert,實(shí)際上完整的調(diào)用是window.alert,通常省略了window對(duì)象的引用。
1. windows對(duì)象的屬性、方法、和事件
| 屬性名 | 作用 | demo |
|---|---|---|
| name | 指定窗口的名稱 | |
| parent | 當(dāng)前窗口(框架)的父窗口,使用它返回對(duì)象的方法和屬性 | |
| opener | 返回產(chǎn)生當(dāng)前窗口的窗口對(duì)象,使用它返回對(duì)象的方法和屬性 | |
| top | 代表主窗口,是最頂層的窗口,也是所有其他窗口的父窗口。可通過(guò)該對(duì)象訪問(wèn)當(dāng)前窗口的方法和屬性 | |
| self | 返回當(dāng)前窗口的一個(gè)對(duì)象,可通過(guò)該對(duì)象訪問(wèn)當(dāng)前窗口的方法和屬性 | |
| defaultstatus | 返回或設(shè)置將在瀏覽器狀態(tài)欄中顯示的默認(rèn)內(nèi)容 | |
| status | 返回或設(shè)置將在瀏覽器狀態(tài)欄中顯示的指定內(nèi)容 |
| 方法名 |
作用 |
demo |
|---|---|---|
| alert() |
顯示一個(gè)警示對(duì)話框,包含一條信息和一個(gè)確定按鈕 |
|
| confirm() |
顯示一個(gè)確認(rèn)對(duì)話框 |
|
| prompt() |
顯示一個(gè)提示對(duì)話框,提示用戶輸入數(shù)據(jù) |
|
| open() |
打開(kāi)一個(gè)已存在的窗口,或者創(chuàng)建一個(gè)新窗口,并在該窗口中加載一個(gè)文檔 |
|
| close() |
關(guān)閉一個(gè)打開(kāi)的窗口 |
|
| navigate() |
在當(dāng)前窗口中顯示指定網(wǎng)頁(yè) |
|
| setTimeout() |
設(shè)置一個(gè)定時(shí)器,在經(jīng)過(guò)指定的時(shí)間間隔后調(diào)用一個(gè)函數(shù) |
|
| clearTimeout() |
給指定的計(jì)時(shí)器復(fù)位 |
|
| focus() |
使一個(gè)Window對(duì)象得到當(dāng)前焦點(diǎn) |
|
| blur() |
使一個(gè)Window對(duì)象失去當(dāng)前焦點(diǎn) |
| 事件 |
說(shuō)明 |
demo |
|---|---|---|
| onload |
HTML文件載入瀏覽器時(shí)發(fā)生 |
|
| onunload |
HTML文件從瀏覽器刪除時(shí)發(fā)生 |
|
| onfocus |
窗口獲得焦點(diǎn)時(shí)發(fā)生 |
|
| onblur |
窗口失去焦點(diǎn)時(shí)發(fā)生 |
|
| onhelp |
用戶按下F1鍵時(shí)發(fā)生 |
|
| onresize |
用戶調(diào)整窗口大小時(shí)發(fā)生 |
|
| onscroll |
用戶滾動(dòng)窗口時(shí)發(fā)生 |
|
| onerror |
載入HTML文件出錯(cuò)時(shí)發(fā)生 |
2. window對(duì)象提供的主要功能:
調(diào)整窗口的尺寸和位置、打開(kāi)新窗口、系統(tǒng)提示框、狀態(tài)欄控制、定時(shí)操作,下面分別對(duì)這5個(gè)功能詳細(xì)講述。
(1) 調(diào)整窗口的尺寸和位置
|
方法 |
用法 |
說(shuō)明 |
|
window.moveBy 將瀏覽器窗口移動(dòng)到指定位置(相對(duì)定位) |
window.moveBy(dx,dy) |
出于安全性和對(duì)用戶有好的考慮,不允許使用JavaScript腳本將窗口移動(dòng)到可視區(qū)域之外,必須始終保證瀏覽器窗口在屏幕的可視區(qū)域。 |
|
window.moveTo 將瀏覽器窗口移動(dòng)到指定位置 (絕對(duì)定位) |
window.moveBy(x,y) |
如果指定的坐標(biāo)(x,y)會(huì)使部分或全部窗口置于可視區(qū)域之外,那么窗口將停留在最接近屏幕邊緣的位置。 |
|
window.resizeBy 將瀏覽器窗口的尺寸改變指定的寬度和高度(相對(duì)調(diào)整窗口大?。?/span> |
window.resizeBy(dw,dh) |
|
|
window.resizeTo 將瀏覽器窗口的尺寸改變指定的寬度和高度(絕對(duì)調(diào)整窗口大?。?/span> |
window.resizeTo(w,h) |
指定的寬度和高度不能為負(fù)數(shù) |
(2) 打開(kāi)新窗口
用法:window.open([url],[target],[options])
參數(shù)url:打開(kāi)新新窗口將要加載的url。如果未指定參數(shù),將默認(rèn)加載空白頁(yè)。如:window.open("test.htm");
參數(shù)target:新打開(kāi)窗口的定位目標(biāo)或者名稱
_self 在當(dāng)前窗口加載新頁(yè)面
_blank 在新窗口加載新頁(yè)面
_parent 在父窗口加載新頁(yè)面
_top在頂層窗口加載新頁(yè)面
參數(shù)options:新打開(kāi)窗口的屬性,是由若干個(gè)選項(xiàng)組成,選項(xiàng)之間用逗號(hào)分隔開(kāi),每個(gè)選項(xiàng)都包含了選項(xiàng)的名稱和值。
|
選項(xiàng) |
說(shuō)明 |
|
height |
窗口的高度,單位像素 |
|
width |
窗口的寬度,單位像素 |
|
left |
窗口的左邊緣位置 |
|
top |
窗口的上邊緣位置 |
|
fullscreen |
是否全屏,默認(rèn)值no |
|
location |
是否顯示地址欄,默認(rèn)值yes |
|
menubar |
是否顯示菜單欄,默認(rèn)值yes |
|
resizable |
是否允許改變窗口大小,默認(rèn)值yes |
|
scrollbars |
是否顯示滾動(dòng)條,默認(rèn)值yes |
|
status |
是否顯示狀態(tài)欄,默認(rèn)值yes |
|
titlebar |
是否顯示標(biāo)題欄,默認(rèn)值yes |
|
toolbar |
是否顯示工具條,默認(rèn)值yes |
(3) 系統(tǒng)提示框
window.alert 顯示消息提示框,用法 window.alert([Message]); (注:一般都省略window對(duì)象,直接使用alert)
window.confirm 顯示一個(gè)確認(rèn)對(duì)話框,其中包括“確定”和“取消”按鈕。
window.prompt 顯示一個(gè)消息提示框,其中包含一個(gè)文本輸入框。
用法:window.prompt([Message],[default]); Message是顯示在提示框上的文本,default是設(shè)置文本框的默認(rèn)值。
(4) 狀態(tài)欄控制
通過(guò)window.status屬性進(jìn)行控制。如:window.status="錯(cuò)誤提示"; 這樣做會(huì)影響用戶體驗(yàn),所以不建議對(duì)狀態(tài)欄信息進(jìn)行修改。
(5) 定時(shí)操作
定時(shí)操作是web開(kāi)發(fā)中常用功能,在基于Ajax技術(shù)的開(kāi)發(fā)中,有一類應(yīng)用需要定時(shí)的訪問(wèn)后臺(tái)服務(wù)器并且更新前臺(tái)頁(yè)面,這類應(yīng)用實(shí)現(xiàn)通常依賴于定時(shí)操作函數(shù)。
定時(shí)操作函數(shù)有四個(gè):window.setInterval、window.clearInterval、window.setTimeout、window.clearTimeout,這四個(gè)函數(shù)都是window對(duì)象的方法,這說(shuō)明瀏覽器中的定時(shí)操作是由瀏覽器窗口完成的。下面對(duì)這四種方法的用法詳細(xì)介紹。
① window.setInterval 設(shè)置定時(shí)器,每隔一段時(shí)間執(zhí)行指定的代碼 window.setInterval(code,time);
說(shuō)明: code參數(shù)可以是一個(gè)函數(shù),也可以是一個(gè)字符串形式的JavaScript代碼
time參數(shù)是執(zhí)行代碼的時(shí)間間隔,單位是ms。
② window.clearInterval 清除setInterval函數(shù)設(shè)置的定時(shí)器 window. clearInterval(time);
③ window.setTimeout 設(shè)置定時(shí)器,每隔一段時(shí)間執(zhí)行指定的代碼 window.setTimeout(code,time);
說(shuō)明: code參數(shù)可以是一個(gè)函數(shù),也可以是一個(gè)字符串形式的JavaScript代碼,setTimeout與setInterval區(qū)別在于setTimeout對(duì)指定的代碼只執(zhí)行一次。
time參數(shù)是執(zhí)行代碼的時(shí)間間隔,單位是ms。
④ window.clearTimeout 清除 setTiimeout 函數(shù)設(shè)置的定時(shí)器 window. clearTimeout(time);
以上這篇JavaScript瀏覽器對(duì)象之一Window對(duì)象詳解就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript關(guān)鍵字this的用法總結(jié)
這篇文章介紹了JavaScript關(guān)鍵字this的用法,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06
WiFi開(kāi)發(fā)|WiFi無(wú)線技術(shù)介紹
本文通過(guò)介紹WiFi無(wú)線技術(shù)來(lái)達(dá)成一種網(wǎng)絡(luò)延申目的,具體知識(shí)點(diǎn)請(qǐng)看下文2021-08-08
JavaScript中instanceof運(yùn)算符的使用示例
這篇文章主要介紹了JavaScript中instanceof運(yùn)算符的使用示例,instanceof的使用是JavaScript入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2016-06-06
Javascript實(shí)例教程(19) 使用HoTMetal(7)
Javascript實(shí)例教程(19) 使用HoTMetal(7)...2006-12-12
JavaScript中使用自然對(duì)數(shù)ln的方法
這篇文章主要介紹了JavaScript中使用自然對(duì)數(shù)ln的方法,是JS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
使用JavaScript 實(shí)現(xiàn)各種跨域的方法
本篇文章是對(duì)在JavaScript中實(shí)現(xiàn)各種跨域方法的介紹。需要的朋友參考下2013-05-05
深入學(xué)習(xí)JavaScript 高階函數(shù)
這篇文章主要介紹了深入學(xué)習(xí)JavaScript 高階函數(shù),在 JavaScript 中,函數(shù)是一種特殊類型的對(duì)象,它們是 Function objects。,需要的朋友可以參考下2019-06-06

