JavaScript面向物件之Windows物件
JavaScript之Window物件
首先我們先了解一個概念：事件。
事件，就是把一段程式碼設定好，滿足條件時觸發。或者說，事件是可以被 JavaScript 偵測到的行為。
網頁中每個元素都可以觸發JavaScript事件。
我們先來看一個簡單的事件：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> </head> <body> <input type="button" value="點選" onClick="dianJi()"/> </body> </html> <script> function dianJi(){ alert("這是函式dianJi"); } </script>
我們可以使用<input>標籤的onClick屬性來呼叫設定好的函式dianJi()，這就是一個簡單的點選事件。
DOM物件之Windows物件
DOM物件：當網頁被載入時，瀏覽器會建立頁面的文件物件模型（Document Object Model）。
HTML DOM 模型被構造為物件的樹。
開啟網頁後，首先看到的是瀏覽器視窗，即頂層的window物件。
其次，看到的是網頁文件的內容，即document文件。
我們先來看一下Window物件。
Window有屬性和方法：
屬性（值或者子物件）： opener:開啟當前視窗的源視窗，如果當前視窗是首次啟動瀏覽器開啟的，則opener是null，可以利用這個屬性來關閉源視窗。
方法（函式）： 事件（事先設定好的程式，被觸發）：
window.open("第一部分"，"第二部分"，"第三部分"，"第四部分"）;
特徵引數：
第一部分：寫要開啟的頁面地址
第二部分：開啟的方式，_blank 是在新視窗開啟 _self
第三部分：控制開啟的視窗，可以寫多個，用空格隔開
toolbar=no新開啟的視窗無工具條
menubar=no無選單欄
status=no無狀態列
width=100 height=100 寬度高度
left=100 開啟的視窗距離左邊多少距離
resizable=no視窗大小不可調
scrollbars=yes 出現滾動條
location=yes 有位址列
以上屬性不常用，且多不相容
返回值：新開啟的視窗物件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
</head>
<body>
<input type="button" value="點選" onClick="show()"/>
</body>
</html>
<script>
function show(){
window.open("http://www.baidu.com","_blank","toolbar=no menubar=no status=no width=300 height=500 left=100 resizable=no scrollbars=yes location=yes ");
}
</script>
開啟的視窗還可以儲存在一個變數中，並用另一個事件關閉，用close():關閉指定的視窗
close():關閉指定的視窗
window.close()：關閉當前視窗 w.close()：關閉w視窗
關閉多個子視窗：放在陣列中的視窗：w[i].close();
關閉開啟當前視窗的源視窗
window.opener.close();
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
</head>
<body>
<input type="button" value="點選" onClick="show()"/>
<input type="button" value="關閉" onclick="guanBi()" />
</body>
</html>
<script>
var w;
function show(){
w = window.open("http://www.baidu.com","_blank");
}
function guanBi(){
w.close();
}
</script>
在以上頁面中我們可以通過點選關閉按鈕關閉開啟的頁面。
這樣開啟可以多次開啟，我們還可以通過if判斷設定只能開啟一次：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
</head>
<body>
<input type="button" value="點選" onClick="show()"/>
<input type="button" value="關閉" onclick="guanBi()" />
</body>
</html>
<script>
var w;
function show(){
if(w==null){
w = window.open("http://www.baidu.com","_blank");
}
}
function guanBi(){
w.close();
}
</script>這裡用一個if語句，判斷w的值是否為空，開啟一個視窗之後w的值就不為空了，之後再點選滑鼠呼叫此函式則不執行開啟新視窗。
我們還可以用陣列的push()方法將所有開啟的頁面存到一個數組裡，然後用close()方法一起關閉：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
</head>
<body>
<input type="button" value="點選" onClick="show()"/>
<input type="button" value="關閉" onclick="guanBi()" />
</body>
</html>
<script>
var w=new Array();
function show(){
w.push(window.open("http://www.baidu.com","_blank"));
}
function guanBi(){
for(i=0;i<w.length;i++){
w[i].close();
}
}
</script>間隔：
window.setInterval("要執行的程式碼"，間隔的毫秒數) window.clearInterval(間隔的id); 迴圈一次之後用來清除隔幾秒執行的程式碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
</head>
<body>
<input type="button" value="開始" onClick="start()" />
<input type="button" value="停止" onClick="end()" />
</body>
</html>
<script>
function show(){
alert("hello");
}
var id;
function start(){
id = window.setInterval("show()",1000);
}
function end(){
window.clearInterval(id);
}
</script>在window.setInterval("", )中，前面是間隔時間執行的程式碼，後面是間隔的時間，單位是毫秒。
延遲：
window.setTimeout("要執行的程式碼"，延遲的毫秒數) window.clearTimeout(延遲的id)；清除setTimeout，一般延遲執行較為常用。
window.setTimeout("show()",10000);
window.clearTimeout();使用延遲來做到間隔的效果：
function show(){
alert("hello");
window.setTimeout("show()",1000);
}
show();使用類似遞迴的方式，在函式中自己呼叫自己，從而使延遲不斷地執行，來使用延遲做到間隔的效果。
頁面操作：
window.moveTo(x,y)； 移動頁面
window.resizeTo(寬，高)； 調整頁面
window.scrollTo（x,y）；滾動頁面至哪裡
以上方法多不相容。
模態對話方塊
模態：開啟對話方塊之後，對話方塊之後的內容是不能操作的。
window.showModalDialog("url"，"向目標對話方塊傳的值"，"視窗特徵引數") 開啟模態對話方塊
模態對話方塊必須關掉才能對後端操作。 模組對話方塊和視窗的區別是永遠置頂。
特徵引數：用分號隔開，畫素大小用px。dialogHeight,dialogWidth,center,等。
window.history物件
歷史記錄，通過歷史記錄可以操作頁面前進或者後退
window.history.back();後退
window.history.forward();前進
window.history.go(n); n是正數代表前進n個頁面，n是負數代表後退n個頁面。
window.location物件
location位址列
頁面的重定向
function tiao(){
window.location.href="index.html";
}var s = window.location.href;獲取當前頁面的地址
window.location.href="http://www.baidu.com";修改頁面地址，會跳轉頁面
window.location.hostname: 主機名，域名，網站名，可用變數接收
window.location.pathname: 路徑名，可用變數接收
window.status物件
status狀態列，可以給狀態列新增要顯示的文字
window.status="要在狀態列顯示的內容"；設定狀態列文字
window.showModelessDialog("url"，"向目標對話方塊傳的值"，"視窗特徵引數")開啟非模組對話方塊，不用關閉可以操作後面。