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)整窗口大小) |
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彈出窗口 window.open使用方法以及參數(shù)說(shuō)明分析篇
window.open是網(wǎng)頁(yè)中經(jīng)常遇到的彈出窗口代碼,不是網(wǎng)絡(luò)中比較反感的那類彈出代碼。用于新頁(yè)面?zhèn)髦?,回傳等?/div> 2009-12-12淺談JavaScript_DOM學(xué)習(xí)篇_圖片切換小案例
這篇文章主要介紹了JavaScriptDOM圖片切換小案例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03Flash對(duì)聯(lián)廣告的關(guān)閉按鈕討論
Flash對(duì)聯(lián)廣告的關(guān)閉按鈕討論...2007-01-01JavaScript入門之事件、cookie、定時(shí)等
本文從上一篇文章結(jié)束的地方開(kāi)始,解釋其他的一些基本的JavaScript語(yǔ)言概念,繼續(xù)為初學(xué)者提供對(duì)語(yǔ)言的基礎(chǔ)理解2011-10-10ajax不執(zhí)行success回調(diào)而是執(zhí)行了error回調(diào)
最近在看jQuery的API文檔,在使用到j(luò)Query的ajax時(shí),如果指定了dataType為json,老是不執(zhí)行success回調(diào),而是執(zhí)行了error回調(diào)函數(shù),極度郁悶2012-12-12javascript 觸發(fā)事件列表 比較不錯(cuò)
javascript 觸發(fā)事件列表,整理的一些js的事件,一般常用的就是onclick,onmouseover等。大家可以了解下,方便以后應(yīng)用。2009-09-09Javascript入門學(xué)習(xí)第二篇 js類型
上篇文章講了js中的一些概念(詞法結(jié)構(gòu)) 和 數(shù)據(jù)類型(部分)。 這章我們 繼續(xù).然后了解下js中操作數(shù)據(jù) 和 函數(shù)的 作用域。2008-07-07最新評(píng)論