閱讀706 返回首頁    go 阿裏雲 go 技術社區[雲棲]

window對象知識總結

Window對象屬性

屬性名 屬性功能
closed 返回窗口是否已被關閉
defaultStatus 設置或返回窗口狀態欄中的默認文本
document 對 Document 對象的隻讀引用
history 對 History 對象的隻讀引用
innerheight 返回窗口的文檔顯示區的高度
innerwidth 返回窗口的文檔顯示區的寬度
length 設置或返回窗口中的框架數量
location 用於窗口或框架的 Location 對象
name 設置或返回窗口的名稱
Navigator 對 Navigator 對象的隻讀引用
opener 返回對創建此窗口的窗口的引用
outerheight 返回窗口的外部高度
outerwidth 返回窗口的外部寬度
pageXOffset 設置或返回當前頁麵相對於窗口顯示區左上角的 X 位置
pageYOffset 設置或返回當前頁麵相對於窗口顯示區左上角的 Y 位置
parent 返回父窗口
Screen 對 Screen 對象的隻讀引用
self 返回對當前窗口的引用。等價於 Window 屬性
status 設置窗口狀態欄的文本
top 返回最頂層的先輩窗口
window window屬性等價於self屬性，它包含了對窗口自身的引用
screenLeft/screenTop/screenX/screenY 隻讀整數。聲明了窗口的左上角在屏幕上的的x坐標和y坐標。IE、Safari和Opera支持screenLeft和screenTop，而Firefox和Safari支持screenX和screenY

Window對象方法

對象名 對象功能
alert() 顯示帶有一段消息和一個確認按鈕的警告框
blur() 把鍵盤焦點從頂層窗口移開
clearInterval() 取消由 setInterval() 設置的 timeout
clearTimeout() 取消由 setTimeout() 方法設置的 timeout
close() 關閉瀏覽器窗口
confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框
createPopup() 創建一個 pop-up 窗口
focus() 把鍵盤焦點給予一個窗口
moveBy() 可相對窗口的當前坐標把它移動指定的像素
moveTo() 把窗口的左上角移動到一個指定的坐標
open() 打開一個新的瀏覽器窗口或查找一個已命名的窗口
print() 打印當前窗口的內容
prompt() 顯示可提示用戶輸入的對話框
resizeBy() 按照指定的像素調整窗口的大小
resizeTo() 把窗口的大小調整到指定的寬度和高度
scrollBy() 按照指定的像素值來滾動內容
scrollTo() 把內容滾動到指定的坐標
setInterval() 按照指定的周期（以毫秒計）來調用函數或計算表達式
setTimeout() 在指定的毫秒數後調用函數或計算表達式

Window對象描述

Window 對象表示一個瀏覽器窗口或一個框架。在客戶端 JavaScript 中，Window 對象是全局對象，所有的表達式都在當前的環境中計算。也就是說，要引用當前窗口根本不需要特殊的語法，可以把那個窗口的屬性作為全局變量來使用。例如，可以隻寫 document，而不必寫 window.document

同樣，可以把當前窗口對象的方法當作函數來使用，如隻寫 alert()，而不必寫 Window.alert()

除了上麵列出的屬性和方法，Window 對象還實現了核心 JavaScript 所定義的所有全局屬性和方法

Window 對象的 window 屬性和 self 屬性引用的都是它自己。當你想明確地引用當前窗口，而不僅僅是隱式地引用它時，可以使用這兩個屬性。除了這兩個屬性之外，parent 屬性、top 屬性以及 frame[] 數組都引用了與當前 Window 對象相關的其他 Window 對象

要引用窗口中的一個框架，可以使用如下語法：

frame[i] //當前窗口的框架

self.frame[i] //當前窗口的框架

w.frame[i] //窗口 w 的框架

要引用一個框架的父窗口（或父框架），可以使用下麵的語法：

parent //當前窗口的父窗口

self.parent //當前窗口的父窗口

w.parent //窗口 w 的父窗口

要從頂層窗口含有的任何一個框架中引用它，可以使用如下語法：

top //當前框架的頂層窗口

self.top //當前框架的頂層窗口

f.top //框架 f 的頂層窗口

新的頂層瀏覽器窗口由方法 Window.open() 創建。當調用該方法時，應把 open() 調用的返回值存儲在一個變量中，然後使用那個變量來引用新窗口。新窗口的 opener 屬性反過來引用了打開它的那個窗口

一般來說，Window 對象的方法都是對瀏覽器窗口或框架進行某種操作;而 alert() 方法、confirm() 方法和 prompt 方法則不同，它們通過簡單的對話框與用戶進行交互。

全局的window對象

JavaScript中的任何一個全局函數或變量都是window的屬性。

<script type="text/javascript">
    var name="aaaa";
    document.write(window.name);
</script>

window與self對象

self對象與window對象完全相同，self通常用於確認就是在當前的窗體內

<script type="text/javascript">
    document.write(window == self);　　　　　　//必須相等，永遠都相等
　　document.write(window.Top == window.self);　　//判斷當前框架是否是主框架
</script>

window、self、window.self三者是等價的

window的子對象

window的主對象主要有：

JavaScript document 對象

JavaScript frames 對象

JavaScript history 對象

JavaScript location 對象

JavaScript navigator 對象

JavaScript screen 對象

window函數索引(僅對IE有效)

窗體控製函數：

moveBy() 函數：從當前位置水平移動窗體x個像素，垂直移動窗體y個像素，x為負數，將向左移動窗體，y為負數，將向上移動窗體

moveTo() 函數：移動窗體左上角到相對於屏幕左上角的(x,y)點，當使用負數做為參數時會把窗體移出屏幕的可視區域

resizeBy() 函數：相對窗體當前的大小，寬度調整w個像素，高度調整h個像素。如果參數為負值，將縮小窗體，反之擴大窗體。

resizeTo() 函數：把窗體寬度調整為w個像素，高度調整為h個像素

<body>
    <input type="button"  value="先設置窗體固定大小！"  />
    <input type="button"  value="再縮小10像素！"  />
    <input type="button"  value="上！"  />
    <input type="button"  value="下！"  />
    <input type="button"  value="左！"  />
    <input type="button"  value="右！"  />
    <input type="button"  value="距離左上角左邊100像素，頂部200像素"  />
</body>

窗體滾動軸控製函數

scrollTo() 函數：在窗體中如果有滾動條，將橫向滾動條移動到相對於窗體寬度為x個像素的位置，將縱向滾動條移動到相對於窗體高度為y個像素的位置。

scrollBy() 函數：如果有滾動條，將橫向滾動條移動到相對於當前橫向滾動條的x個像素的位置(就是向左移動x像素)，將縱向滾動條移動到相對於當前縱向滾動條高度為y個像素的位置(就是向下移動y像素)。

注意區別，一個是相對當前窗口，一個是相當現在滾動條的位置。

<div >
    <input type="button"  value="移動滾動條！"  />　　//相當於設置絕對位置
    <input type="button"  value="移動滾動條！"  />　　//相當於累加
</div>

窗體焦點控製函數：

focus() 函數：使窗體或空間獲得焦點

blur() 函數：使窗體或控件失去焦點

<div>
    <input type="button" value="獲得焦點"  />
    <input type="button" value="失去焦點"  />
    <input type="text" value="text"  onblur="alert('我已失去焦點')" />
</div>

新建窗體函數：

open() 函數：打開(彈出)一個新的窗體

close() 函數：關閉窗體

opener 屬性：通過opener可以實現跨窗體之間的通訊，但是要保證是在同一域名下，而且一個窗體要包含另一個窗體的opener

格式：window.open(url, name, features, replace);

open函數參數說明：

url -- 要載入窗體的URL

name -- 新建窗體的名稱(也可以是HTML target屬性的取值，目標)

features -- 代表窗體特性的字符串，字符串中每個特性使用逗號分隔

replace -- 一個布爾值，說明新載入的頁麵是否替換當前載入的頁麵，此參數通常不用指定。

open方法示例

  <a href="2.html" target="2">在新窗口打開連接</a>
  <a href="#" >在已建立連接的頁麵打開新地址</a>

首先使用普通HTML鏈接打開一個頁麵(target名為dreamdu)，之後使用open函數打開另一個頁麵，瀏覽器首先要查找是否有名稱為dreamdu的窗體，如果有，就在這個窗體中加載open的地址。

經過設置的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 > 瀏覽器讀頁麵時彈出窗口；  
方法二：<body onunload="openwin()"> 瀏覽器離開頁麵時彈出窗口；

open函數第三個參數features說明

參數名稱 類型 說明
height Number 設置窗體的高度，不能小於100
left Number 說明創建窗體的左坐標，不能為負值
location Boolean 窗體是否顯示地址欄，默認值為no
resizable Boolean 窗體是否允許通過拖動邊線調整大小，默認值為no
scrollable Boolean 窗體中內部超出窗口可視範圍時是否允許拖動，默認值為no
toolbar Boolean 窗體是否顯示工具欄，默認值為no
top Number 說明創建窗體的上坐標，不能為負值
status Boolean 窗體是否顯示狀態欄，默認值為no
width Number 創建窗體的寬度，不能小於100

特性字符串中的每個特性使用逗號分隔，每個特性之間不允許有空格。

window.open函數新建立窗體後會返回新建窗體的window對象，通過此對象可以控製窗體（移動，改變大小，關閉）

close函數

<input type="button" value="關閉已經打開的窗體！"  />

self.close();配合上setTimeout()可以實現，打開的窗口定時關閉的效果。

對話框函數：

alert() 函數：彈出消息對話框（對話框中有一個OK按鈕）

confirm() 函數：彈出消息對話框（對話框中包含一個OK按鈕與Cancel按鈕）;confirm()消息對話框是排它的，也就是在用戶點擊對話框的按鈕前，不能進行任何其它操作

if(confirm("確定跳大？")){
    alert("果斷跳大");
}else{
    alert("猥瑣打錢");
}

prompt() 函數：彈出消息對話框（對話框中包含一個OK按鈕、Cancel按鈕與一個文本輸入框）;函數有兩個參數

str1 -- 要顯示在消息對話框中的文本，不可修改

str2 -- 文本框中的內容，可以修改

var sResult=prompt("請在下麵輸入你的姓名", "aaa");
if(sResult!=null){
    alert(sResult + "已經超越神的殺戮");
}else{
    alert("無名氏已經超越神的殺戮");
}

時間等待與間隔函數：

setTimeout() 函數/clearTimeout() 函數:在指定的時間後調用函數

語法：

setTimeout(fun,time);　　fun：函數體或函數名，time指定時間，單位為毫秒

clearTimeout(id);　　取消指定的setTimeout函數將要執行的代碼

setTimeout(function () {
    document.write("隔3秒後觸發");   
}, 3000)    //在3秒後輸出
setTimeout(fun1, 5000);     //在5秒後輸出
function fun1() {
    document.write("函數名的方式5秒後觸發");
}

setInterval() 函數/clearInterval() 函數:在間隔指定的事件後重複調用函數

語法：

setInterval(fun1,time)　　fun：函數體或函數名，time指定的時間，單位為毫秒。會返回一個值,這個值是統計該函數的個數用的，第一個是1，第二個就是2，指明是第幾個setInterval函數。

clearInterval(value)　　　 value:setInterval()函數返回的值，根據這個值可以停止setInterval()的重複

var i = 0;
var h = setInterval(function () {
    document.write("3秒輸出一次<br/>");
    i++;
    if (i >= 3) {
       clearInterval(h);
        document.write("停止輸出");
    }
}, 3000);

注意，javascript是單線程的，因此，這個定時函數實際上是通過插入執行隊列的方式來實現。

如下麵的代碼

function fn() { 
　　setTimeout(function(){alert('can you see me?');},1000); 
　　while(true) {} 
}

alert();永遠都不會執行，因為線程一直被死循環占用了

window.location子對象

解析URL對象location:location對象的屬性有：href,protocal,host,hostname,port,pathname,search,hash

document.write(location.href + "<br/>");        // https://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/>");  //https://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 = "https://www.baidu.com"　　//跳轉到指定網址

location = "search.html"　　　　　　　 //相對路徑跳轉

location = "#top"　　　　　　//跳轉到頁麵頂部

瀏覽曆史

History()對象的back()與forward()　　與瀏覽器的“後退”，"前進"功能一樣。

history.go(-2);　　後退兩個曆史記錄

瀏覽器和屏幕信息

navigator.appName　　Web瀏覽器全稱

navigator.appVersion　　Web瀏覽器廠商和版本的詳細字符串

navigator.userAgent　　客戶端絕大部分信息

navagator.platform　　　瀏覽器運行所在的操作係統

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

窗口的關係

parent == self　　隻有頂級窗口才返回true

parent和top屬性允許腳本引用它的窗體的祖先，通常窗體是通過元素創建的，可以用來獲取頂級窗口

event事件對象

最有用的兩個操作：阻止事件冒泡。有時return false;不管用，這個或許就管用了

//IE：
window.event.cancelBubble = true;//停止冒泡
window.event.returnValue = false;//阻止事件的默認行為

//Firefox：
event.preventDefault();// 取消事件的默認行為  
event.stopPropagation(); // 阻止事件的傳播

最後更新：2017-04-25 19:38:03

  上一篇：go 笛卡爾積
  下一篇：go 阿裏巴巴B2B研發管理實踐之打造強有力的技術中台