網站前端_JavaScript-BOM編程.0001.JavaScriptWindow對象

簡單介紹:

說明: window對象既是Js訪問瀏覽器窗口的接口也是Global對象的實現,也就是經過此對象訪問網頁中定義的任何一個對象,變量和函數,反之在全局做用域中聲明的變量,函數都會變成window對象的屬性和方法

框架相關:

1. 頁面中每一個框架都擁有本身的window對象,保存在frames集合中,全部框架頁面定義的變量或函數都會自動做爲對應框架window對象的成員

2. 可經過特殊全局對象獲取指定框架對象,self對象始終指向當前框架對象,top對象始終指向最外層的框架,parent對象始終指向上層框架對象,頁面無框架時,parent/top/self都等於window對象

---

// 獲取當前框架對象
var topFrame = top.frames[0]
console.log(topFrame)
var topFrame = top.frames['header']
console.log(topFrame)
var topFrame = top.frames.header
console.log(topFrame)
var topFrame = self
console.log(topFrame)
topFrame.location = 'http://www.baidu.com'
// 獲取上層框架對象
var parentFrame = self.parent
console.log(parentFrame)

---

案例: 具體實例可經過http://xmdevops.blog.51cto.com/11144840/1853697查看每日一題_JavaScript.利用Js操做frameset框架集對象實現購物車?                

窗口位置:

---

// 兼容模式, 獲取窗口相對於屏幕左邊的位置
var leftPos = (typeof window.screenLeft == 'number')?window.screenLeft:window.screenX
// 兼容模式, 獲取窗口相對於屏幕上邊的位置
var topPos = (typeof window.screenTop == 'number')?window.screenTop:window.screenY
console.log(leftPos , topPos )

---

窗口大小:

---

// 兼容模式, 獲取瀏覽器窗口寬度和高度
var pageWidth = window.innerWidth,
    pageHeight = window.innerHeight
if(typeof pageWidth != "number"){
    if(document.compatMode == "CSS1Compat"){
        pageWidth = document.documentElement.clientWidth;
        pageHeight = document.documentElement.clientHeight;
    }else{
        pageWidth = document.body.clientWidth;
        pageHeight = document.body.clientHeight;
    }
} 
console.log(pageWidth, pageHeight)

---

打開窗口:

屬性名稱	屬性說明
closed	返回窗口是否關閉,關閉返回true,不然返回false
opener	返回打開它的原始窗口對象
方法名稱	方法說明
open(url,target,features)	url爲要加載的URL,target爲窗口目標,features爲特性字符串
moveTo(x, y)	將窗口移動到橫座標爲值爲x,縱座標值爲y的位置
moveBy(x, y)	將窗口橫座標移動x像素,縱座標移動y像素
resizeTo(x, y)	將窗口重置爲寬度爲x,高度爲y
resizeBy(x, y)	同上,可是x表示與原窗口寬度之差,y表示與原窗口高度之差
close()	關閉新打開的窗口,

// 返回一個window對象,和普通的窗口對象同樣
var winMax = window.open(
    'http://xmdevops.blog.51cto.com/',
    'xmdevops',    
    'fullscreen=yes,height=768,width=1024,left=0,location=no'+
    'menubar=no,resizeable=no,scrollbars=yes,status=no,toolbar=no,top=0')
// 初始窗口位置
winMax.moveTo(0, 0)
winMax.moveBy(0, 0)
// 調整窗口大小
winMax.resizeTo(1360, 800)
// 向右移動40像素
winMax.moveBy(40, 0)
// 向下移動40像素
winMax.moveBy(0, 40)

---

說明:window.open()中參數target能夠爲特殊窗口名稱_self,_parent,_top,_blank,也能夠爲frame/iframe框架,當target不存在時,會使用第三個特性參數,如上展現了全部特性參數,以逗號隔開便可

定時調用:

方法名稱	方法說明
setTimeout(code, millisecond )	超時調用,code能夠爲Js代碼字符串也能夠是函數,推薦使用函數,返回任務ID
clearTimeout(taskId)	在未超時狀態取消任務隊列中任務Id爲taskId的任務
setInterval(code,millisecond  )	間歇調用,code能夠爲Js代碼字符串也能夠是函數,推薦使用函數,返回任務ID
clearInterval(taskId)	在間歇狀態取消任務隊列中任務Id爲taskId的任務

// 建立超時隊列任務
var taskId = setTimeout(function(){
    alert('已通過了1秒')
}, 1000)
// 取消超時隊列中指定任務
clearTimeout(taskId)
// 建立間歇隊列任務
var count = 0
var max = 10
var taskId = null
taskId = setInterval(function(){
    count++
    if(count == max){
        // 取消間歇隊列任務
        clearInterval(taskId)
        alert('Done!')
    }
} ,500)
// 模擬間歇隊列任務
var count = 0
var max = 10
var taskId = null
setTimeout(function(){
    count++
    if(count < max){
        setTimeout(arguments.callee, 500)
    }else{
        alert('Done!')
    }
}, 500)

---

技巧: 使用超時調用時,沒有必要跟蹤超時任務ID,由於每次執行完畢後,若是再也不設置超時調用,調用就會自行中止,因此使用超時調用來模擬間歇調用是一種最佳模式,因此最好不要使用間歇調用

系統彈窗:

方法名稱	方法說明
alert(msg)	彈出警告框
confirm(msg)	彈出確認框,若是返回true則表示點擊了確認,不然表示點擊取消
prompt(msg, default)	彈出輸入框,msg是要顯示給用戶的文本提示,default是默認值,點擊確認返回輸入文本域的值,不然返回null

// 確認框, OK返回true,CANEL返回false
if(confirm('確認要刪除此記錄?')){
    alert('您點擊了確認')
}else{
    alert('您點擊了取消')
}
// 輸入框, 輸入返回輸入值,不然返回null
var name = prompt('請輸入您的姓名?')
if(name){
    alert(name)
}else{
    alert('您點擊了取消')
}

---

事件屬性:

屬性名稱	屬性說明
onload	當頁面被加載完畢後調用onload綁定的函數
onkeypress	當按鍵時觸發,若是它綁定的函數返回false,則按鍵可能失效,例如TAB鍵,因此慎用

1. 方式一

window.load = function(){
    func1()
    func2()
    ......
}

2. 方式二

function addOnLoadEvent(func){
    var oldOnLoad = window.onload
    if(typeof window.onload != 'function'){
        window.onload = func
    }else{
        window.onload = function(){
            oldOnLoad()
            func()
        }
    }
}

---

說明: 網頁被加載完畢後會觸發一個window.onload事件,這個事件與函數關聯,有時須要在網頁加載完成後執行多個函數,則能夠在關聯函數內部調用多個函數