网站前端_JavaScript-BOM编程.0001.JavaScriptWindow对象
2016-09-18 19:31
483 查看
简单介绍:
说明: window对象既是Js访问浏览器窗口的接口也是Global对象的实现,也就是通过此对象访问网页中定义的任何一个对象,变量和函数,反之在全局作用域中声明的变量,函数都会变成window对象的属性和方法
框架相关:
1. 页面中每个框架都拥有自己的window对象,保存在frames集合中,所有框架页面定义的变量或函数都会自动作为对应框架window对象的成员
2. 可通过特殊全局对象获取指定框架对象,self对象始终指向当前框架对象,top对象始终指向最外层的框架,parent对象始终指向上层框架对象,页面无框架时,parent/top/self都等于window对象
窗口位置:
窗口大小:
打开窗口:
定时调用:
系统弹窗:
事件属性:
1. 方式一
说明: 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键,所以慎用 |
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事件,这个事件与函数关联,有时需要在网页加载完成后执行多个函数,则可以在关联函数内部调用多个函数
相关文章推荐
- JavaScript---网络编程(6)-Dom和Bom模型概念讲解(节点获取,window对象)
- 网站前端_JavaScript-DOM编程.0001.JavaScriptDom基础核心?
- JavaScript---网络编程(6)-Dom和Bom模型概念讲解(节点获取,window对象)
- JavaScript-BOM编程,JavaScriptWindow对象
- JavaScript高级编程【BOM-window对象】
- JavaScript编程:浏览器对象模型BOM
- JavaScript高级编程【BOM-location对象】
- JavaScript DOM编程基础精华02(window对象的属性,事件中的this,动态创建DOM,innerText和innerHTML)
- javascript之BOM编程Screen(屏幕)对象
- 32-JavaScript-DOM-BOM简介-node常用方法和属性-window对象常用方法
- JavaScript高级程序设计之BOM之window 对象之系统对话框 第8.1.7讲笔记
- 韩顺平 javascript教学视频_学习笔记25_bom介绍_dom对象层次图_dom对象(window对象1)
- JavaScript DOM编程基础精华01(DOM入门,DOM模型和获取页面元素,事件,window对象的方法)
- JavaScript高级程序设计之BOM之window 对象之全局作用域 第8.1.1讲笔记
- 韩顺平 javascript教学视频_学习笔记27_dom对象(window对象3.history.location.navigator.screen.event)_js事件驱动编程
- js编程思路--给网站定义一个全局的js对象,放到window对象中
- JavaScript高级程序设计之BOM之window 对象之窗口位置第8.1.3讲笔记
- JavaScript高级程序设计之BOM之window 对象之窗口大小 第8.1.4讲笔记
- javascript之BOM编程Screen(屏幕)对象
- JavaScript之DOM-6 BOM概述 、Window对象(Window对象概述、窗口与对话框、定时器)