JavaScript Window窗口對(duì)象屬性和使用方法

一、Window對(duì)象概述

Window對(duì)象可以用來打開瀏覽器，調(diào)整瀏覽器的位置、大小等等功能。

Window對(duì)象可以處理框架和框架之間的關(guān)系，通過這種關(guān)系在一個(gè)框架中處理另一個(gè)框架中的文檔。他也是所有對(duì)象的頂級(jí)對(duì)象，通過Window對(duì)象的子對(duì)象進(jìn)行操作，可以實(shí)現(xiàn)更多的效果。

1、Window對(duì)象屬性

每個(gè)對(duì)象都有自己的屬性，頂級(jí)對(duì)象Window是所有其他子對(duì)象的父對(duì)象，它可以出現(xiàn)在每個(gè)頁面上，并且可以咋單個(gè)JS應(yīng)用程序中被多次使用。

下表列出了一些Window對(duì)象常用屬性：

2、Window對(duì)象方法

3、如何使用

JS運(yùn)行使用一個(gè)字符串來給窗口命名，也可以使用一些關(guān)鍵字來代替。

Window對(duì)象可以直接調(diào)用方法和屬性，不需要使用new運(yùn)算符來創(chuàng)建對(duì)象：

window.屬性名
window.方法名(參數(shù)列表)
////////////////////////////////
// 使用關(guān)鍵字來代替window //
parent.屬性名
parent.方法名(參數(shù)列表)

二、對(duì)話框

為了響應(yīng)用戶的某種需求而彈出的小窗口

1、警告對(duì)話框——alert()

語法如下：

window.alert(str);

彈出警告對(duì)話框，str為對(duì)話框顯示的字符串，一般運(yùn)行結(jié)果如下：

2、確認(rèn)對(duì)話框——confrim()

語法如下：

window.confrim(question);

其中question是要顯示在確認(rèn)對(duì)話框的純文本，也是表達(dá)了程序想讓用戶回答的問題

而且他有一個(gè)返回值，如果單擊了確定返回真、反之為假。

比如下面的這段小程序：

<script>
 var flag = window.confirm("你確定要關(guān)閉瀏覽器窗口嗎？");
 if(flag)
  window.close();
</script>

會(huì)展示下面的結(jié)果：

3、提示對(duì)話框——prompt()

彈出一個(gè)提示框，在提示框中有一個(gè)輸入框，在顯示輸入框的時(shí)候，在輸入框內(nèi)顯示提示字符串，在輸入文本框顯示缺省文本并等待用戶輸入，輸入之后，單擊確定返回用戶輸入的字符串，如果是取消則返回null值

語法如下：

window.prompt(str1,str2)

參數(shù)說明：其中str1表示在對(duì)話框要被顯示的信息，str2指定對(duì)話框內(nèi)輸入框的值。

比如下面這段小程序：

<script>
 function pro() {
  var message = document.getElementById("message");
  message.value = window.prompt(message.value,"返回的信息")
 }
</script>
<input id="message" type="text" size="40" value="請(qǐng)?jiān)诖溯斎胄畔?>
<br><br>
<input type="button" value="顯示對(duì)話框" onClick="pro()">

效果如下:

三、打開與關(guān)閉窗口

1、打開窗口——open()

語法格式：

WindowVar = window.open(url,name,[location])

參數(shù)說明：

• WindowVar：如果open方法成功，返回一個(gè)Window對(duì)象的句柄。
• url目標(biāo)窗口的URL
• name：目標(biāo)窗口Window對(duì)象名稱
• location：大考窗口的可選參數(shù)
  

他的可選參數(shù)，如下表所示：

下面舉幾個(gè)例子：

打開一個(gè)新窗口：window.open("new.html","new")

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

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

打開一個(gè)帶滾動(dòng)條的固定窗口：window.open("new.html","new","scrollbars,resizable")

2、關(guān)閉窗口

（1）關(guān)閉當(dāng)前窗口

下面任意語句可以實(shí)現(xiàn)關(guān)閉當(dāng)前窗口：

window.close();
close();
this.close();

例子：關(guān)閉子窗口時(shí)自動(dòng)刷新父窗口

步驟1： 在原來的頁面，懟一個(gè)<a>鏈接，用于打開一個(gè)新窗口，代碼如下：

<a href="#" rel="external nofollow" onClick="javascript:window.open('new.html','width=400,height=220')">打開鏈接</a>

步驟2： 新建new.html，然后寫入腳本和一個(gè)按鈕，代碼如下：

<script>
 function clo() {
  alert("關(guān)閉子窗口！");
  window.opener.location.reload();  //刷新父窗口
  window.close();
 }
</script>
<input type="submit" value="關(guān)閉" onclick="clo()">

效果如下：

（2）關(guān)閉子窗口

通過窗口句柄以變量的形式進(jìn)行保存，然后通過close方法關(guān)閉創(chuàng)建的窗口，語法如下：

windowname.close();

其中windowname表示已打開窗口的句柄

例如，在主窗口旁邊彈出一個(gè)子窗口，當(dāng)單擊主窗口的按鈕后，自動(dòng)關(guān)閉子窗口，代碼如下：

<form name="form1">
 <input type="button" name="Button" value="關(guān)閉子窗口" onclick="newclose()">
</form>
<script>
 var win = window.open("new.html","new","width=300,height=100");
 function newclose() {
  win.close();
 }
</script>

效果如下：

四、控制窗口

1、移動(dòng)窗口

（1）moveTo()方法

語法如下：

window.moveTo(x,y);

其中x,y是窗口左上角的坐標(biāo)，

（2）resizeTo()方法

這個(gè)方法可以將當(dāng)前窗口改成(x,y)大小，x、y分別代表寬度和高度，語法如下：

window.resizeTo(x,y);

（3）screen對(duì)象

屏幕對(duì)象反映了當(dāng)前用戶的屏幕設(shè)置，下表列出了屏幕對(duì)象的一些屬性：

2、窗口滾動(dòng)

利用Window對(duì)象的scroll()方法可以指定窗口的當(dāng)前位置，從而實(shí)現(xiàn)窗口的滾動(dòng)效果，語法如下：

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

比如選擇一張我們的女神江疏影把圖片拉大，然后寫腳本：

<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、改變窗口大小

實(shí)現(xiàn)將當(dāng)前窗口改變?yōu)橹付ǖ拇笮?code>(x,y)，當(dāng)x,y>0為擴(kuò)大，反之為縮小，語法如下：

window.resizeBy(x,y);

例子：動(dòng)態(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" >打開一個(gè)自動(dòng)改變大小的窗口</a>

效果如下：

4、訪問窗口歷史

利用history對(duì)象實(shí)現(xiàn)訪問窗口歷史，history對(duì)象是一個(gè)只讀URL字符串?dāng)?shù)組，主要存儲(chǔ)一個(gè)最近訪問網(wǎng)頁的URL地址列表。語法如下：

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

history對(duì)象常用屬性：

常用方法：

比如使用history對(duì)象中的back()和forward()方法來引導(dǎo)跳轉(zhuǎn)：

<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ù)向前移動(dòng)，否則向后移動(dòng)

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

length屬性訪問history數(shù)組的長度，通過它可以很快訪問末尾：

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

5、設(shè)置超時(shí)

為一個(gè)窗口設(shè)置在某段時(shí)間后執(zhí)行何種操作，稱為設(shè)置超時(shí)

window對(duì)象的setTimeout()方法用于設(shè)一個(gè)超時(shí)，語法如下：

timerId = setTimeout(要執(zhí)行的代碼，以毫秒為單位時(shí)間)

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

clearTimeout(timerId);

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。