1. 程式人生 > >JavaScript裡面的window物件

JavaScript裡面的window物件

DOM文件      window的事件

onclick事件

當按鈕被點選時,會執行該函式 例如:window.onclick=function(){  //程式碼片段}

onload 和 onunload 事件

onload 和 onunload 事件會在使用者進入或離開頁面時被觸發。

onload 事件可用於檢測訪問者的瀏覽器型別和瀏覽器版本,並基於這些資訊來載入網頁的正確版本。

onload 和 onunload 事件可用於處理 cookie。

注意:用原生的JS文件載入完畢寫法:window.onload=function(){//要執行的程式碼}

引入jQuery框架的時候,常用寫法,$(document).ready(function(){//要執行的程式碼});

引入jQuery框架的時候,簡便寫法,$(function(){//要執行的程式碼});

onchange 事件

onchange 事件常結合對輸入欄位的驗證來使用。當用戶改變輸入欄位的內容時,會呼叫 某個 函式

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用於在使用者的滑鼠移至 HTML 元素上方或移出元素時觸發函式。

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 構成了滑鼠點選事件的所有部分。首先當點選滑鼠按鈕時,會觸發 onmousedown 事件,當釋放滑鼠按鈕時,會觸發 onmouseup 事件,最後,當完成滑鼠點選時,會觸發 onclick 事件。

計時器

在JavaScript物件裡面有計時器setTimeout():在指定的時間之後單次呼叫,setInterval():在指定時間的多次呼叫。

單次呼叫示例:

window.setTimeout(function(){
    //js程式碼片段
},1000);//一秒後呼叫

重複呼叫示例:

window.setInterval(function(){
    //js程式碼片段
},1000);//每隔一秒重複呼叫

window物件的setTimeout()方法用來實現一個函式在指定的毫秒後執行,它會返回一個值,把這個值傳遞給clearTimeout()用來取消這個函式的執行。 

例如:window.clearTimeout(setTimeout(f,1000));裡面的函式f是自定義的

同樣的setInterval()也會返回一個值,把這個值傳入到clearInterval()用來取消這個函式的呼叫

例如:window.clearInterval(setTimeout(f,1000));裡面的函式f是自定義的

瀏覽器定位URL

window.location是一個物件,包含屬性有

        hash 從井號 (#) 開始的 URL(錨)
        host 主機名和當前 URL 的埠號
        hostname 當前 URL 的主機名
        href 完整的 URL
        pathname 當前 URL 的路徑部分
        port 當前 URL 的埠號
        protocol 當前 URL 的協議

        search 從問號 (?) 開始的 URL(查詢部分)

        reload();是用於頁面重新載入,重新整理

獲取window.location.href是最常用的

location是location.href的簡寫,無論是訪問還是賦值,從功能上,locatin等於location.href

而從本質上,location是一個物件,location.href是一個屬性

從chrome的console裡面輸入window.location.href和window.location你就能很清楚的看到兩者的不同

瀏覽歷史 History

  • window.history.back() - 與在瀏覽器點選後退按鈕相同
  • window.history.forward() - 與在瀏覽器中點選按鈕向前相同
  • window.history.go() - 接受一個整數引數,可以在歷史列表中向前(正引數)或向後(負引數)跳過任意多個頁面

window.history.go(-2);//後退兩個歷史記錄,相當於單擊後退按鈕兩次

瀏覽器和螢幕資訊

Navigator物件 包含有關訪問者瀏覽器的資訊

  • appName   web瀏覽器全程
  • appversion 該屬性以數字開始,並跟著包含瀏覽器廠商和版本資訊的詳細字串
  • userAgent 瀏覽器在它的USER-AGENT HTTP 頭部中傳送的字串
  • platform 在其上執行的瀏覽器的作業系統的字串

window.screen 物件包含有關使用者螢幕的資訊

一些屬性:

  • screen.availWidth - 可用的螢幕寬度
  • screen.availHeight - 可用的螢幕高度

對話方塊

  • alert()       警告框,向用戶顯示一條訊息並等待使用者關閉對話方塊
  • confirm()  確認框,也是顯示一條訊息,要求使用者單擊“確定”或“取消”按鈕,並返回一個Boolean值
  • prompt()   提示框,同樣也顯示一條訊息,等待使用者輸入字串,並返回字串  

提示框prompt()可以輸入預設值:例如    prompt("請輸入您的名字","Bill Gates")

如上圖所示,裡面的Bill Gates是預設就有的

cookie 用來識別使用者

利用使用者在提示框中輸入的資料建立一個 JavaScript Cookie,當該使用者再次訪問該頁面時,根據 cookie 中的資訊發出歡迎資訊

什麼是cookie?  它是document物件的屬性,例如:window.document.cookie

cookie 是儲存於訪問者的計算機中的變數。每當同一臺計算機通過瀏覽器請求某個頁面時,就會發送這個 cookie。你可以使用 JavaScript 來建立和取回 cookie 的值。

直接用document.cookie=.....這樣賦值就可以了,

function getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=")
  if (c_start!=-1)
    { 
    c_start=c_start + c_name.length+1 
    c_end=document.cookie.indexOf(";",c_start)
    if (c_end==-1) c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
    } 
  }
return ""
}

cookie儲存在系統中的時候是“cookie名1 = cookie值; cookie名2= cookie值”這樣的方式來儲存的;document.cookie是返回包含所有cookie的字串;document.cookie.indexOf(c_name+ "=")是取得這個cookie名在整個cookie中的位置。(加“=”號:取cookie名加上等於號的位置,比方整個cookie是"user=tony;passwd=user123",這時候查詢名為user的cookie值的時候,是查詢"user="的位置;如果不要等於號,就會找到其它位置的"user",比如後面密碼裡面也有user字元,但並不是cookie中cookie名都是唯一的,所以加上等於號就不會出錯。 ) document.cookie.indexof(";", c_start)是從上一步的位置開始查詢的,直到";"的位置

注意!注意!注意!在document.cookie.indexOf()這個函式裡面,第二個引數一般是數值,表示起始點,如。
"abcdab".indexOf('b') //1                          "abcdab".indexOf('b',3)//5

多視窗和視窗體

開啟和關閉視窗

window.open()開啟視窗有四個可選引數:

  • 第一個引數是在新視窗中顯示的文件的URL,如果省略了,就用空白頁面的url   about:blank
  • 第二個引數是新開啟視窗的名字   視窗的名字很重要,允許open()方法引用已經存在的視窗
  • 第三個引數是一個以逗號分隔的列表,包含大小和各種屬性,用以表明新視窗是如何開啟的,若省略,就會用預設的。                          eg:window.open("smallwin.html","smallwin","width=400,height=350,status=yes,resizable=yes");
  • 第四個引數只在第二個引數命名的是一個存在的視窗時才有用。它是一個Boolean值,聲明瞭第一個引數指定的url是應用替換掉視窗瀏覽歷史的當前條目錄(true),還是應該在視窗瀏覽歷史中建立一個新的條目(false),預設是false。

window.close()關閉視窗