一、Window物件概述

Window物件可以用來開啟瀏覽器，調整瀏覽器的位置、大小等等功能。

Window物件可以處理框架和框架之間的關係，通過這種關係在一個框架中處理另一個框架中的文件。他也是所有物件的頂級物件，通過Window物件的子物件進行操作，可以實現更多的效果。

1、Window物件屬性

每個物件都有自己的屬性，頂級物件Window是所有其他子物件的父物件，它可以出現在每個頁面上，並且可以咋單個JS應用程式中被多次使用。

下表列出了一些Window物件常用屬性：

屬性	說明
document	對話方塊中顯示當前文件
frames	表示當前對話方塊中所有frame物件的集合
location	指定當前文件的URL
name	對話方塊的名字
status/defaultStatus	狀態列中的當前資訊
top	表示最頂層的瀏覽器對話方塊
parent/opener	表示包含當前對話方塊的夫對話方塊
closed	表示當前對話方塊是否關閉（布林值）
self	表示當前對話方塊
screen	表示使用者螢幕，提供螢幕尺寸、顏色深度等資訊
navigator	表示瀏覽器物件，用於獲取與瀏覽器相關的資訊

2、Window物件方法

方法	說明
alert()	彈出警告對話方塊
confrim()	在確認對話方塊顯示指定的字串
prompt()	彈出一個提示對話方塊
open()	開啟新瀏覽器對話方塊並且顯示URL或名字引用的文件，並設定建立對話方塊的屬性
close()	關閉被引用的對話方塊
focus()	指定對話方塊放在所有瀏覽器最前面
blur()	指定對話方塊放在所有瀏覽器最後面
scrollTo(x,y)	把對話方塊滾動到指定的座標
scrollBy(offsetx,offsety)	按照指定位移量滾動對話方塊
setTimeout(timer)	在指定的毫秒數過後，對傳遞的表示式求值
setInerval(interval)	指定週期性執行程式碼
moveTo(x,y)	將對話方塊移動到指定座標
moveBy(offsetx,offsety)	將對話方塊移動到指定的位移量處
resizeTo(x,y)	設定對話方塊大小
resizeBy(offsetx,offsety)	按照指定的位移量設定對話方塊大小
print()	“列印”
navigate(URL)	使用對話方塊顯示URL指定的頁面

3、如何使用

JS執行使用一個字串來給視窗命名，也可以使用一些關鍵字來代替。

Window物件可以直接呼叫方法和屬性，不需要使用new運算子來建立物件：

window.屬性名
window.方法名(引數列表)
////////////////////////////////
// 使用關鍵字來代替window //
parent.屬性名
parent.方法名(引數列表)

二、對話方塊

為了響應使用者的某種需求而彈出的小視窗

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)

引數說明：其中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])

引數說明：

• WindowVar：如果open方法成功，返回一個Window物件的控制代碼。
• url目標視窗的URL
• name：目標視窗Window物件名稱
• location：大考視窗的可選引數
  

他的可選引數，如下表所示：

引數	說明
top	視窗頂部距離螢幕頂部的畫素數
left	視窗左端距離螢幕左端的畫素數
width/height	寬度/高度
scrollbars	是否顯示滾動條
resizable	設定對話方塊大小是否固定
toolbar	瀏覽器的工具條，包括後退及前進按鈕
menubar	選單條，一般包括有檔案、編輯及其他一些條目
location	定位區，位址列
direction	更新資訊的按鈕

下面舉幾個例子：

開啟一個新視窗：window.open("new.html","new")

開啟一個指定大小的視窗：window.open("new.html","new","height=140,width=690")

開啟一個指定位置的視窗：window.open("new.html","top=300,left=200")

開啟一個帶滾動條的固定視窗：window.open("new.html","scrollbars,resizable")

2、關閉視窗

（1）關閉當前視窗

下面任意語句可以實現關閉當前視窗：

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方法關閉建立的視窗，語法如下：

windowname.close();

其中windowname表示已開啟視窗的控制代碼

例如，在主視窗旁邊彈出一個子視窗，當單擊主視窗的按鈕後，自動關閉子視窗，程式碼如下：

<form name="form1">
 <input type="button" name="Button" value="關閉子視窗" onclick="newclose()">
</form>
<script>
 var win = window.open("new.html","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	顯示器每個畫素的位數
colorDepth	返回當前顏色設定所用的位數，1代表黑白；8代表256色（256種顏色）；16代表增強色（大概64000種顏色）；24/32代表真彩色（1600萬種顏色）
availWidth	返回視窗內容區域的水平尺寸
availHeight	返回川康內容區域的垂直尺寸

2、視窗滾動

利用Window物件的scroll()方法可以指定視窗的當前位置，從而實現視窗的滾動效果，語法如下：

window.scroll(x,y);			//滾動到指定的絕對位置，相對文件的左上角
window.scrollTo(x,y);		//同上
window.scrollBy(x,y);		
/*可以將文件滾動到相對位置，如果引數x為正數，向右滾動，否則向左；如果引數y為正數向下滾動，否則向上*/

比如選擇一張我們的女神江疏影把圖片拉大，然後寫指令碼：

<img src="1.jpg" height="1000">
<script>
 var pos = 0;
 function scroller() {
  pos++;
  scrollTo(0,pos);
  clearTimeout(timer);
  var timer = setTimeout("scroller()",10);
 }
 scroller();

效果如下：（太美啦！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！）

3、改變視窗大小

實現將當前視窗改變為指定的大小(x,y)，當x,y>0為擴大，反之為縮小，語法如下：

window.resizeBy(x,y);

例子：動態改變視窗大小

程式碼如下：

<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物件實現訪問視窗歷史，history物件是一個只讀URL字串陣列，主要儲存一個最近訪問網頁的URL地址列表。語法如下：

[window.]history.property|method([parameters])

history物件常用屬性：

屬性	說明
length	歷史列表的長度，用於判斷列表中的入口數目
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()方法指定要訪問的歷史記錄，如果引數為正數向前移動，否則向後移動

<a href="javascript:window.history.go(-1)" rel="external nofollow" >向後退一次</a>
<a href="javascript:window.history.go(2)" rel="external nofollow" >向前進兩次</a>

length屬性訪問history陣列的長度，通過它可以很快訪問末尾：

<a href="javascript:window.history.go(window.history.length-1)" rel="external nofollow" >末尾</a>

5、設定超時

為一個視窗設定在某段時間後執行何種操作，稱為設定超時

window物件的setTimeout()方法用於設一個超時，語法如下：

timerId = setTimeout(要執行的程式碼，以毫秒為單位時間)

還可以使用clearTimeout()來中止該超時設定，語法格式如下：

clearTimeout(timerId);

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。