网站前端_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事件,这个事件与函数关联,有时须要在网页加载完成后执行多个函数,则能够在关联函数内部调用多个函数