摘要：Window 對象表示一個瀏覽器窗口或一個框架照筑。在客戶端 JavaScript 中缔俄，Window 對象是全局對象烙懦，所有的表達式都在當(dāng)前的環(huán)境中計算。也就是說昆烁，要引用當(dāng)前窗口根本不需要特殊的語法吊骤，可以把那個窗口的屬性作為全局變量來使用。
Window對象屬性
| 屬性名 | 屬性功能 |
|---|---|
| closed | 返回窗口是否已被關(guān)閉 |
| defaultStatus | 設(shè)置或返回窗口狀態(tài)欄中的默認(rèn)文本 |
| document | 對Document對象的只讀引用 |
| history | 對History對象的只讀引用 |
| innerHeight | 返回窗口的文檔顯示區(qū)域的搞丟 |
| innerWidth | 返回窗口的文檔顯示區(qū)域的寬度 |
| length | 設(shè)置或返回窗口中的框架數(shù)量 |
| location | 用于窗口或框架的Location對象 |
| name | 設(shè)置或返回窗口的名稱 |
| Navigator | 對Navigator對象的只讀引用 |
| opener | 返回對創(chuàng)建此窗口的窗口引用 |
| outerheight | 返回窗口的外部高度 |
| outerwidth | 返回窗口的外部寬度 |
| pageXOffset | 設(shè)置或返回當(dāng)前頁面相對于窗口顯示區(qū)左上角的X位置 |
| pageYOffset | 設(shè)置或返回當(dāng)前頁面相對于窗口顯示區(qū)左上角的Y位置 |
| parent | 返回父窗口 |
| Screen | 對Sreen對象的只讀引用 |
| Self | 返回對當(dāng)前窗口的引用静尼。等價于Window屬性 |
| status | 設(shè)置窗口狀態(tài)欄的文本 |
| top | 返回最頂層的先輩窗口 |
| window | window屬性等價于self屬性白粉，它包含了對窗口自身的引用 |
Window對象方法
| 對象名稱(-) | 對象功能(-) |
|---|---|
| alert() | 顯示帶有一段消息和一個確認(rèn)按鈕的警告框 |
| blur() | 把鍵盤焦點從頂層窗口移開 |
| clearInterval() | 取消由 setInterval() 設(shè)置的 timeout |
| close() | 關(guān)閉瀏覽器窗口 |
| confirm() | 顯示帶有一段消息以及確認(rèn)按鈕和取消按鈕的對話框 |
| createPopup() | 創(chuàng)建一個 pop-up 窗口 |
| focus() | 把鍵盤焦點給予一個窗口 |
| moveBy() | 可相對窗口的當(dāng)前坐標(biāo)把它移動指定的像素 |
| moveTo() | 把窗口的左上角移動到一個指定的坐標(biāo) |
| open() | 打開一個新的瀏覽器窗口或查找一個已命名的窗口 |
| print() | 打印當(dāng)前窗口的內(nèi)容 |
| prompt() | 顯示可提示用戶輸入的對話框 |
| resizeBy() | 按照指定的像素調(diào)整窗口的大小 |
| resizeTo() | 把窗口的大小調(diào)整到指定的寬度和高度 |
| scrollBy() | 按照指定的像素值來滾動內(nèi)容 |
| scrollTo() | 把內(nèi)容滾動到指定的坐標(biāo) |
| setInterval() | 按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達式 |
| setTimeout() | 在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式 |
Window對象描述
Window 對象表示一個瀏覽器窗口或一個框架。在客戶端JavaScript中茅郎， Window對象時全局對象蜗元，所有的表達式都在當(dāng)前的環(huán)境中計算。也就是說系冗，要引用當(dāng)前窗口根本不需要特殊的語法奕扣，可以把那個窗口的屬性作為你全局變量來用。例如掌敬，可以只寫document, 而不用window.document
同樣惯豆，可以把當(dāng)前窗口對象的方法當(dāng)做函數(shù)來使用，如只寫alert()奔害，而不必寫 Window.alert()
除了上面列出的屬性和方法楷兽，Window 對象還實現(xiàn)了核心 JavaScript 所定義的所有全局屬性和方法
Window 對象的 window 屬性和 self 屬性引用的都是它自己。當(dāng)你想明確地引用當(dāng)前窗口华临，而不僅僅是隱式地引用它時芯杀，可以使用這兩個屬性。除了這兩個屬性之外雅潭，parent 屬性揭厚、top 屬性以及 frame[] 數(shù)組都引用了與當(dāng)前 Window 對象相關(guān)的其他 Window 對象。
要引用窗口中的一個框架扶供，可以使用如下語法:
- frame[i] //當(dāng)前窗口的框架
- self.frame[i] //當(dāng)前窗口的框架
- w.frame[i] //窗口 w 的框架
要引用一個框架的父窗口（或父框架）筛圆，可以使用下面的語法：
- parent //當(dāng)前窗口的父窗口
- self.parent //當(dāng)前窗口的父窗口
- w.parent //窗口 w 的父窗口
要從頂層窗口含有的任何一個框架中引用它，可以使用如下語法：
- top //當(dāng)前框架的頂層窗口
- self.top //當(dāng)前框架的頂層窗口
- f.top //框架 f 的頂層窗口
新的頂層瀏覽器窗口由方法 Window.open() 創(chuàng)建椿浓。當(dāng)調(diào)用該方法時太援，應(yīng)把 open() 調(diào)用的返回值存儲在一個變量中闽晦，然后使用那個變量來引用新窗口。新窗口的 opener 屬性反過來引用了打開它的那個窗口
一般來說提岔，Window 對象的方法都是對瀏覽器窗口或框架進行某種操作;而 alert() 方法仙蛉、confirm() 方法和 prompt 方法則不同，它們通過簡單的對話框與用戶進行交互唧垦。
全局的window對象
JavaScript中的任何一個全局函數(shù)或變量都是window的屬性
<script type="text/javascript">
var name="aaaa";
document.write(window.name);
</script>
window與self對象
self對象與window對象完全相同捅儒，self通常用于確認(rèn)就是在當(dāng)前的窗體內(nèi)
<script type="text/javascript">
document.write(window == self); //必須相等液样，永遠都相等
document.write(window.Top == window.self); //判斷當(dāng)前框架是否是主框架
</script>
window振亮、self、window.self三者是等價的
window的子對象
window的主對象主要有：
- JavaScript document 對象
- JavaScript frames 對象
- JavaScript history 對象
- JavaScript location 對象
- JavaScript navigator 對象
- JavaScript screen 對象
window函數(shù)索引(僅對IE有效)
窗體控制函數(shù)：
moveBy() 函數(shù)：從當(dāng)前位置水平移動窗體x個像素鞭莽，垂直移動窗體y個像素坊秸，x為負(fù)數(shù)，將向左移動窗體澎怒，y為負(fù)數(shù)褒搔，將向上移動窗體
moveTo() 函數(shù)：移動窗體左上角到相對于屏幕左上角的(x,y)點，當(dāng)使用負(fù)數(shù)做為參數(shù)時會把窗體移出屏幕的可視區(qū)域
resizeBy() 函數(shù)：相對窗體當(dāng)前的大小喷面，寬度調(diào)整w個像素星瘾，高度調(diào)整h個像素。如果參數(shù)為負(fù)值惧辈，將縮小窗體琳状，反之?dāng)U大窗體。
resizeTo() 函數(shù)：把窗體寬度調(diào)整為w個像素盒齿，高度調(diào)整為h個像素
<body>
<input type="button" id="btn1" value="先設(shè)置窗體固定大心畛选！" onclick="window.resizeTo(500,500);" />
<input type="button" id="btn2" value="再縮小10像素边翁！" onclick="window.resizeBy(-10,-10);" />
<input type="button" id="btn2" value="上翎承！" onclick="window.moveBy(0,-5);" />
<input type="button" id="btn2" value="下！" onclick="window.moveBy(0, 5);" />
<input type="button" id="btn2" value="左符匾！" onclick="window.moveBy(-5, 0);" />
<input type="button" id="btn2" value="右叨咖！" onclick="window.moveBy(5, 0);" />
<input type="button" id="btn2" value="距離左上角左邊100像素，頂部200像素" onclick="window.moveTo(100, 200);" />
</body>
窗體滾動軸控制函數(shù)
scrollTo() 函數(shù)：在窗體中如果有滾動條啊胶，將橫向滾動條移動到相對于窗體寬度為x個像素的位置甸各，將縱向滾動條移動到相對于窗體高度為y個像素的位置。
scrollBy() 函數(shù)：如果有滾動條创淡，將橫向滾動條移動到相對于當(dāng)前橫向滾動條的x個像素的位置(就是向左移動x像素)痴晦，將縱向滾動條移動到相對于當(dāng)前縱向滾動條高度為y個像素的位置(就是向下移動y像素)。
注意區(qū)別琳彩，一個是相對當(dāng)前窗口誊酌，一個是相當(dāng)現(xiàn)在滾動條的位置部凑。
<div style="height:150%; width:150%; background-color:#ddd">
<input type="button" id="btn1" value="移動滾動條！" onclick="window.scrollTo(100,100);" /> //相當(dāng)于設(shè)置絕對位置
<input type="button" id="btn1" value="移動滾動條碧浊！" onclick="window.scrollBy(100,100);" /> //相當(dāng)于累加
</div>
窗體焦點控制函數(shù)：
- focus() 函數(shù)：使窗體或空間獲得焦點
- blur() 函數(shù)：使窗體或控件失去焦點
<div>
<input type="button" value="獲得焦點" onclick="document.getElementById('testInput').focus()" />
<input type="button" value="失去焦點" onclick="document.getElementById('testInput').blur()" />
<input type="text" value="text" id="testInput" onblur="alert('我已失去焦點')" />
</div>
新建窗體函數(shù)：
- open() 函數(shù)：打開(彈出)一個新的窗體
- close() 函數(shù)：關(guān)閉窗體
- opener 屬性：通過opener可以實現(xiàn)跨窗體之間的通訊涂邀，但是要保證是在同一域名下，而且一個窗體要包含另一個窗體的opener
格式：window.open(url, name, features, replace);
open函數(shù)參數(shù)說明：
- url -- 要載入窗體的URL
- name -- 新建窗體的名稱(也可以是HTML target屬性的取值箱锐，目標(biāo))
- features -- 代表窗體特性的字符串比勉，字符串中每個特性使用逗號分隔
- replace -- 一個布爾值，說明新載入的頁面是否替換當(dāng)前載入的頁面驹止，此參數(shù)通常不用指定浩聋。
open方法示例
<a href="2.html" target="2">在新窗口打開連接</a>
<a href="#" onclick="window.open('http://www.google.com','2');">在已建立連接的頁面打開新地址</a>
首先使用普通HTML鏈接打開一個頁面(target名為dreamdu)，之后使用open函數(shù)打開另一個頁面臊恋，瀏覽器首先要查找是否有名稱為dreamdu的窗體衣洁，如果有，就在這個窗體中加載open的地址抖仅。
經(jīng)過設(shè)置的open
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')
彈窗方法
方法一：<body onload="openwin()"> 瀏覽器讀頁面時彈出窗口坊夫；
方法二：<body onunload="openwin()"> 瀏覽器離開頁面時彈出窗口；
| 參數(shù)名稱 | 類型 | 說明 |
|---|---|---|
| height | Number | 設(shè)置窗體的高度撤卢，不能小于100 |
| left | Number | 說明創(chuàng)建窗體的左坐標(biāo)环凿，不能為負(fù)值 |
| location | Boolean | 窗體是否顯示地址欄，默認(rèn)值為no |
| resizable | Boolean | 窗體是否允許通過拖動邊線調(diào)整大小放吩，默認(rèn)值為no |
| scrollable | Boolean | 窗體中內(nèi)部超出窗口可視范圍時是否允許拖動智听，默認(rèn)值為no |
| toolbar | Boolean | 窗體是否顯示工具欄，默認(rèn)值為no |
| top | Number | 說明創(chuàng)建窗體的上坐標(biāo)屎慢，不能為負(fù)值 |
| status | Boolean | 窗體是否顯示狀態(tài)欄瞭稼，默認(rèn)值為no |
| width | Number | 創(chuàng)建窗體的寬度，不能小于100 |
open函數(shù)第三個參數(shù)features說明
| 參數(shù)名稱 | 類型 | 說明 |
|---|---|---|
| height | Number | 設(shè)置窗體的高度腻惠，不能小于100 |
| left | Number | 說明創(chuàng)建窗體的左坐標(biāo)环肘，不能為負(fù)值 |
| location | Boolean | 窗體是否顯示地址欄，默認(rèn)值為no |
| resizable | Boolean | 窗體是否允許通過拖動邊線調(diào)整大小集灌，默認(rèn)值為no |
| scrollable | Boolean | 窗體中內(nèi)部超出窗口可視范圍時是否允許拖動悔雹，默認(rèn)值為no |
| toolbar | Boolean | 窗體是否顯示工具欄，默認(rèn)值為no |
| top | Number | 說明創(chuàng)建窗體的上坐標(biāo)欣喧，不能為負(fù)值 |
| status | Boolean | 窗體是否顯示狀態(tài)欄腌零，默認(rèn)值為no |
| width | Number | 創(chuàng)建窗體的寬度，不能小于100 |
特性字符串中的每個特性使用逗號分隔唆阿，每個特性之間不允許有空格益涧。
window.open函數(shù)新建立窗體后會返回新建窗體的window對象，通過此對象可以控制窗體（移動驯鳖，改變大小闲询，關(guān)閉）
close函數(shù)
<input type="button" value="關(guān)閉已經(jīng)打開的窗體久免！" onclick="window.close();" />
self.close();配合上setTimeout()可以實現(xiàn)，打開窗口定時關(guān)閉的效果
對話框函數(shù)
- alert()函數(shù)：彈出消息對話框（對話框中有一個OK按鈕）
- confirm() 函數(shù)：彈出消息對話框（對話框中包含一個OK按鈕與Cancel按鈕）;confirm()消息對話框是排它的扭弧，也就是在用戶點擊對話框的按鈕前阎姥，不能進行任何其它操作
if(confirm("確定跳大？")){
alert("果斷跳大");
}else{
alert("猥瑣打錢");
}
prompt() 函數(shù)：彈出消息對話框（對話框中包含一個OK按鈕鸽捻、Cancel按鈕與一個文本輸入框）;函數(shù)有兩個參數(shù)
str1 -- 要顯示在消息對話框中的文本呼巴，不可修改
str2 -- 文本框中的內(nèi)容，可以修改
var sResult=prompt("請在下面輸入你的姓名", "aaa");
if(sResult!=null){
alert(sResult + "已經(jīng)超越神的殺戮");
}else{
alert("無名氏已經(jīng)超越神的殺戮");
}
時間等待與間隔函數(shù)：
- setTimeout() 函數(shù)/clearTimeout() 函數(shù):在指定的時間后調(diào)用函數(shù)
- 語法：
setTimeout(fun,time); fun：函數(shù)體或函數(shù)名御蒲，time指定時間衣赶，單位為毫秒
clearTimeout(id); 取消指定的setTimeout函數(shù)將要執(zhí)行的代碼
setTimeout(function () {
document.write("隔3秒后觸發(fā)");
}, 3000) //在3秒后輸出
setTimeout(fun1, 5000); //在5秒后輸出
function fun1() {
document.write("函數(shù)名的方式5秒后觸發(fā)");
}
- setInterval() 函數(shù)/clearInterval() 函數(shù):在間隔指定的事件后重復(fù)調(diào)用函數(shù)
- 語法：
setInterval(fun1,time) fun：函數(shù)體或函數(shù)名，time指定的時間删咱，單位為毫秒屑埋。會返回一個值,這個值是統(tǒng)計該函數(shù)的個數(shù)用的豪筝，第一個是1痰滋，第二個就是2，指明是第幾個setInterval函數(shù)续崖。
clearInterval(value) value:setInterval()函數(shù)返回的值敲街，根據(jù)這個值可以停止setInterval()的重復(fù)
var i = 0;
var h = setInterval(function () {
document.write("3秒輸出一次<br/>");
i++;
if (i >= 3) {
clearInterval(h);
document.write("停止輸出");
}
}, 3000);
注意，javascript是單線程的严望，因此多艇，這個定時函數(shù)實際上是通過插入執(zhí)行隊列的方式來實現(xiàn)。
如下面的代碼
function fn() {
setTimeout(function(){alert('can you see me?');},1000);
while(true) {}
}
alert();永遠都不會執(zhí)行像吻，因為線程一直被死循環(huán)占用了
window.location子對象
解析URL對象location:location對象的屬性有：href,protocal,host,hostname,port,pathname,search,hash
document.write(location.href + "<br/>"); // http://localhost:4889/javascriptTest.html
document.write(location.protocol + "<br/>"); // http:
document.write(location.host + "<br/>"); // localhost:4889
document.write(location.hostname + "<br/>"); // localhost
document.write(location.port + "<br/>"); // 4889
document.write(location.pathname + "<br/>"); // /javascriptTest.html
document.write(location.search + "換行<br/>"); //http://localhost:4889/javascriptTest.html?id=1&name=張三 如果路徑是這樣峻黍，則輸出 ?id=1&name=%E5%BC%A0%E4%B8%89
document.write(location.hash); //http: //localhost:4889/javascriptTest.html#kk=你好?id=1&name=張三 如果路徑是這樣，則輸出 #kk=你好?id=1&name=張三
載入新文檔
- location.reload() 重新加載頁面
- location.replace() 本窗口載入新文檔
- location.assign() 本窗口載入新文檔
- location = "http://www.baidu.com" //跳轉(zhuǎn)到指定網(wǎng)址
- location = "search.html" //相對路徑跳轉(zhuǎn)
- location = "#top" //跳轉(zhuǎn)到頁面頂部
瀏覽歷史
- History()對象的back()與forward() 與瀏覽器的“后退”拨匆，"前進"功能一樣姆涩。
- history.go(-2); 后退兩個歷史記錄
瀏覽器屏幕信息
- navigator.appName Web瀏覽器全稱
- navigator.appVersion Web瀏覽器廠商和版本的詳細字符串
- navigator.userAgent 客戶端絕大部分信息
- navagator.platform 瀏覽器運行所在的操作系統(tǒng)
document.write(navigator.userAgent + "<br/>"); // Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/537.11
document.write(navigator.appName + "<br/>"); //Netscape
document.write(navigator.appVersion + "<br/>"); //5.0 (Windows NT 6.1) AppleWebKit/537.11 (KHTML, like Gecko) document.write(navigator.platform); //Win32
窗口關(guān)系
- parent == self 只有頂級窗口才返回true
- parent和top屬性允許腳本引用它的窗體的祖先，通常窗體是通過元素創(chuàng)建的惭每，可以用來獲取頂級窗口
event事件對象
最有用的兩個操作：阻止事件冒泡骨饿。有時return false;不管用，這個或許就管用了
//IE：
window.event.cancelBubble = true;//停止冒泡
window.event.returnValue = false;//阻止事件的默認(rèn)行為
//Firefox：
event.preventDefault();// 取消事件的默認(rèn)行為
event.stopPropagation(); // 阻止事件的傳播
