JavaScript Window窗口對象屬性和使用方法
一、Window對象概述
Window對象可以用來打開瀏覽器，調整瀏覽器的位置、大小等等功能。
Window對象可以處理框架和框架之間的關系，通過這種關系在一個框架中處理另一個框架中的文檔。他也是所有對象的頂級對象，通過Window對象的子對象進行操作，可以實現(xiàn)更多的效果。
1、Window對象屬性
每個對象都有自己的屬性，頂級對象Window是所有其他子對象的父對象，它可以出現(xiàn)在每個頁面上，并且可以咋單個JS應用程序中被多次使用。
下表列出了一些Window對象常用屬性：
| 屬性 | 說明 |
|---|---|
| document | 對話框中顯示當前文檔 |
| frames | 表示當前對話框中所有frame對象的集合 |
| location | 指定當前文檔的URL |
| name | 對話框的名字 |
| status/defaultStatus | 狀態(tài)欄中的當前信息 |
| top | 表示最頂層的瀏覽器對話框 |
| parent/opener | 表示包含當前對話框的夫對話框 |
| closed | 表示當前對話框是否關閉（布爾值） |
| self | 表示當前對話框 |
| screen | 表示用戶屏幕，提供屏幕尺寸、顏色深度等信息 |
| navigator | 表示瀏覽器對象，用于獲取與瀏覽器相關的信息 |
2、Window對象方法
| 方法 | 說明 |
|---|---|
| alert() | 彈出警告對話框 |
| confrim() | 在確認對話框顯示指定的字符串 |
| prompt() | 彈出一個提示對話框 |
| open() | 打開新瀏覽器對話框并且顯示URL或名字引用的文檔，并設置創(chuàng)建對話框的屬性 |
| close() | 關閉被引用的對話框 |
| focus() | 指定對話框放在所有瀏覽器最前面 |
| blur() | 指定對話框放在所有瀏覽器最后面 |
| scrollTo(x,y) | 把對話框滾動到指定的坐標 |
| scrollBy(offsetx,offsety) | 按照指定位移量滾動對話框 |
| setTimeout(timer) | 在指定的毫秒數(shù)過后，對傳遞的表達式求值 |
| setInerval(interval) | 指定周期性執(zhí)行代碼 |
| moveTo(x,y) | 將對話框移動到指定坐標 |
| moveBy(offsetx,offsety) | 將對話框移動到指定的位移量處 |
| resizeTo(x,y) | 設置對話框大小 |
| resizeBy(offsetx,offsety) | 按照指定的位移量設置對話框大小 |
| print() | “打印” |
| navigate(URL) | 使用對話框顯示URL指定的頁面 |
3、如何使用
JS運行使用一個字符串來給窗口命名，也可以使用一些關鍵字來代替。
Window對象可以直接調用方法和屬性，不需要使用new運算符來創(chuàng)建對象：
window.屬性名 window.方法名(參數(shù)列表) //////////////////////////////// // 使用關鍵字來代替window // parent.屬性名 parent.方法名(參數(shù)列表)
二、對話框
為了響應用戶的某種需求而彈出的小窗口
1、警告對話框——alert()
語法如下：
window.alert(str);
彈出警告對話框，str為對話框顯示的字符串，一般運行結果如下：
2、確認對話框——confrim()
語法如下：
window.confrim(question);
其中question是要顯示在確認對話框的純文本，也是表達了程序想讓用戶回答的問題
而且他有一個返回值，如果單擊了確定返回真、反之為假。
比如下面的這段小程序：
<script>
var flag = window.confirm("你確定要關閉瀏覽器窗口嗎？");
if(flag)
window.close();
</script>
會展示下面的結果：
3、提示對話框——prompt()
彈出一個提示框，在提示框中有一個輸入框，在顯示輸入框的時候，在輸入框內顯示提示字符串，在輸入文本框顯示缺省文本并等待用戶輸入，輸入之后，單擊確定返回用戶輸入的字符串，如果是取消則返回null值
語法如下：
window.prompt(str1,str2)
參數(shù)說明：其中str1表示在對話框要被顯示的信息，str2指定對話框內輸入框的值。
比如下面這段小程序：
<script>
function pro() {
var message = document.getElementById("message");
message.value = window.prompt(message.value,"返回的信息")
}
</script>
<input id="message" type="text" size="40" value="請在此輸入信息">
<br><br>
<input type="button" value="顯示對話框" onClick="pro()">
效果如下:
三、打開與關閉窗口
1、打開窗口——open()
語法格式：
WindowVar = window.open(url,name,[location])
參數(shù)說明：
WindowVar：如果open方法成功，返回一個Window對象的句柄。url目標窗口的URLname：目標窗口Window對象名稱location：大考窗口的可選參數(shù)
他的可選參數(shù)，如下表所示：
| 參數(shù) | 說明 |
|---|---|
| top | 窗口頂部距離屏幕頂部的像素數(shù) |
| left | 窗口左端距離屏幕左端的像素數(shù) |
| width/height | 寬度/高度 |
| scrollbars | 是否顯示滾動條 |
| resizable | 設定對話框大小是否固定 |
| toolbar | 瀏覽器的工具條，包括后退及前進按鈕 |
| menubar | 菜單條，一般包括有文件、編輯及其他一些條目 |
| location | 定位區(qū)，地址欄 |
| direction | 更新信息的按鈕 |
下面舉幾個例子：
打開一個新窗口：window.open("new.html","new")
打開一個指定大小的窗口：window.open("new.html","new","height=140,width=690")
打開一個指定位置的窗口：window.open("new.html","new","top=300,left=200")
打開一個帶滾動條的固定窗口：window.open("new.html","new","scrollbars,resizable")
2、關閉窗口
（1）關閉當前窗口
下面任意語句可以實現(xiàn)關閉當前窗口：
window.close(); close(); this.close();
例子：關閉子窗口時自動刷新父窗口
步驟1： 在原來的頁面，懟一個<a>鏈接，用于打開一個新窗口，代碼如下：
<a href="#" rel="external nofollow" onClick="javascript:window.open('new.html','width=400,height=220')">打開鏈接</a>
步驟2： 新建new.html，然后寫入腳本和一個按鈕，代碼如下：
<script>
function clo() {
alert("關閉子窗口！");
window.opener.location.reload(); //刷新父窗口
window.close();
}
</script>
<input type="submit" value="關閉" onclick="clo()">
效果如下：
（2）關閉子窗口
通過窗口句柄以變量的形式進行保存，然后通過close方法關閉創(chuàng)建的窗口，語法如下：
windowname.close();
其中windowname表示已打開窗口的句柄
例如，在主窗口旁邊彈出一個子窗口，當單擊主窗口的按鈕后，自動關閉子窗口，代碼如下：
<form name="form1">
<input type="button" name="Button" value="關閉子窗口" onclick="newclose()">
</form>
<script>
var win = window.open("new.html","new","width=300,height=100");
function newclose() {
win.close();
}
</script>
效果如下：
四、控制窗口
1、移動窗口
（1）moveTo()方法
語法如下：
window.moveTo(x,y);
其中x,y是窗口左上角的坐標，
（2）resizeTo()方法
這個方法可以將當前窗口改成(x,y)大小，x、y分別代表寬度和高度，語法如下：
window.resizeTo(x,y);
（3）screen對象
屏幕對象反映了當前用戶的屏幕設置，下表列出了屏幕對象的一些屬性：
| 屬性 | 說明 |
|---|---|
| width | 整個屏幕的水平尺寸 |
| height | 整個屏幕的垂直尺寸 |
| pixelDepth | 顯示器每個像素的位數(shù) |
| colorDepth | 返回當前顏色設置所用的位數(shù)，1代表黑白；8代表256色（256種顏色）；16代表增強色（大概64000種顏色）；24/32代表真彩色（1600萬種顏色） |
| availWidth | 返回窗口內容區(qū)域的水平尺寸 |
| availHeight | 返回川康內容區(qū)域的垂直尺寸 |
2、窗口滾動
利用Window對象的scroll()方法可以指定窗口的當前位置，從而實現(xiàn)窗口的滾動效果，語法如下：
window.scroll(x,y); //滾動到指定的絕對位置，相對文檔的左上角 window.scrollTo(x,y); //同上 window.scrollBy(x,y); /*可以將文檔滾動到相對位置，如果參數(shù)x為正數(shù)，向右滾動，否則向左；如果參數(shù)y為正數(shù)向下滾動，否則向上*/
比如選擇一張我們的女神江疏影把圖片拉大，然后寫腳本：
<img src="1.jpg" height="1000">
<script>
var pos = 0;
function scroller() {
pos++;
scrollTo(0,pos);
clearTimeout(timer);
var timer = setTimeout("scroller()",10);
}
scroller();
效果如下：（太美啦！?。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。?br />
3、改變窗口大小
實現(xiàn)將當前窗口改變?yōu)橹付ǖ拇笮?code>(x,y)，當x,y>0為擴大，反之為縮小，語法如下：
window.resizeBy(x,y);
例子：動態(tài)改變窗口大小
代碼如下：
<script>
var winheight,winsize,x;
function openwin() {
winheight=100;
winsize=100;
x=5;
win2 = window.open("new.html","","scrollbars='no'");
win2.moveTo(0,0);
win2.resizeTo(100,100);
resize();
}
function resize() {
if(winheight>=screen.availHeight-3)
x=0;
win2.resizeBy(5,x);
winheight+=5;
winsize+=5;
if(winsize>=screen.width-5){
winheight=100;
winsize=100;
return;
}
setTimeout("resize()",50);
}
</script>
<a href="javascript:openwin()" rel="external nofollow" >打開一個自動改變大小的窗口</a>
效果如下：
4、訪問窗口歷史
利用history對象實現(xiàn)訪問窗口歷史，history對象是一個只讀URL字符串數(shù)組，主要存儲一個最近訪問網頁的URL地址列表。語法如下：
[window.]history.property|method([parameters])
history對象常用屬性：
| 屬性 | 說明 |
|---|---|
| length | 歷史列表的長度，用于判斷列表中的入口數(shù)目 |
| current | 當前文檔的URL |
| next | 歷史列表的下一個URL |
| previous | 歷史列表的前一個URL |
常用方法：
| 方法 | 說明 |
|---|---|
| back() | 退回前一頁 |
| forward() | 重新進入下一頁 |
| go() | 進入指定網頁 |
比如使用history對象中的back()和forward()方法來引導跳轉：
<a href="javascript:window.history.forward();" rel="external nofollow" >forward</a> <a href="javascript:window.history.back()" rel="external nofollow" >back</a>
使用history.go()方法指定要訪問的歷史記錄，如果參數(shù)為正數(shù)向前移動，否則向后移動
<a href="javascript:window.history.go(-1)" rel="external nofollow" >向后退一次</a> <a href="javascript:window.history.go(2)" rel="external nofollow" >向前進兩次</a>
length屬性訪問history數(shù)組的長度，通過它可以很快訪問末尾：
<a href="javascript:window.history.go(window.history.length-1)" rel="external nofollow" >末尾</a>
5、設置超時
為一個窗口設置在某段時間后執(zhí)行何種操作，稱為設置超時
window對象的setTimeout()方法用于設一個超時，語法如下：
timerId = setTimeout(要執(zhí)行的代碼，以毫秒為單位時間)
還可以使用clearTimeout()來中止該超時設置，語法格式如下：
clearTimeout(timerId);
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了鼠標懸浮停留三秒后顯示大圖，在網頁中還是比較實用的，下面是示例代碼2014-09-09
在前端開發(fā)的過程中,我們經常會遇到需要對于輸入的字符串進行格式化處理,這篇文章主要給大家介紹了關于使用js去除字符串內所帶有空格的三種方法,需要的朋友可以參考下2023-10-10
JavaScript模擬實現(xiàn)Promise功能的示例代碼
這篇文章主要為大家詳細介紹了JavaScript如何模擬實現(xiàn)Promise功能，文中的示例代碼講解詳細，對我們學習JavaScript有一定的幫助，需要的可以參考一下2022-12-12
JS樹形菜單組件Bootstrap TreeView使用方法詳解
這篇文章主要為大家詳細介紹了js組件Bootstrap TreeView使用方法，本文一部分針對于bootstrap的treeview的實踐，另一部分是介紹自己寫的樹形菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
短信驗證碼一鍵登錄是一種方便快捷的登錄方式,本文介紹了其原理并給出了一個簡單的JavaScript示例,感興趣的朋友跟隨小編一起看看吧2024-05-05
用JavaScript動態(tài)建立或增加CSS樣式表的實現(xiàn)方法
下面小編就為大家?guī)硪黄肑avaScript動態(tài)建立或增加CSS樣式表的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
filters.revealTrans.Transition使用方法小結
有看到幻燈片調用會用到divid.filters.revealTrans.Transition=Math.floor(Math.random()*23)和divid.filters.revealTrans.apply(),那么這兩個都是什么意思呢?2010-08-08
JavaScript動態(tài)創(chuàng)建form表單并提交的實現(xiàn)方法
這篇文章主要介紹了JavaScript動態(tài)創(chuàng)建form表單并提交的實現(xiàn)方法,涉及JavaScript動態(tài)創(chuàng)建頁面元素及模擬表單提交的技巧,需要的朋友可以參考下2015-12-12
這篇文章主要源碼解讀了Bootstrap模態(tài)彈出框，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要給大家總結介紹了JavaScript中交換值的10種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者使用JavaScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2020-08-08