js window对象指的是什么?一起来了解下吧:
window对象是BOM中所有对象的核心。BOM Browser Object Model。browser object modal :浏览器对象模型。浏览器对象:window对象。Window 对象会在
1、window对象的属性
window.open(), (打开窗口) window.close(), (关闭一个窗口) window.self()(窗口本身) window.focus()(使当前的窗口在所有窗口之前. ) window.status=”内容” (js中状态栏显示内容:) window.navigate(”http://www.google.com”); (js中的窗口重定向:) window.print() (js中的打印:) window.prompt(”message”,”defaultreply”); (js中的提示输入框:) window.scroll(x,y) (js中的窗口滚动条) window.scrollby(js中的窗口滚动到位置:) window.history.back()返回上一页 window.history.forward()返回下一页, window.history.go(返回第几页,也可以使用访问过的url) 如果是0那么就是刷新 history.length window.createElement
(1)(位置类型-获得浏览器的位置)
IE:
window.screenLeft
可以获得浏览器距屏幕左上角的左边距
window.screenTop
可以获得浏览器距屏幕左上角的上边距
FF:
alert(screenX)
alert(screenY)
//IE 左边距 alert(screenLeft) 上边距 alert(screenTop) //FF 左边距 alert(screenX) 上边距 alert(screenY)
(获得浏览器的尺寸)
FF:window.innerWidth 获得窗口的宽度
window.innerHeight 获得窗口的高度
//FF: alert(window.innerWidth); alert(window.innerHeight); //IE: alert(document.documentElement.clientWidth) alert(document.documentElement.clientHeight)
(2)窗体控制
screen对象记录了客户端显示屏的信息
a.属性
availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。
availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。
height 返回显示屏幕的高度。
width 返回显示屏幕的宽度。
")
document.write(screen.height)
document.write("")
document.write(screen.availWidth)
document.write("")
document.write(screen.width)" _ue_custom_node_="true">b.方法
对窗体的移动,window.moveBy(x,y) 相对于当前位置沿着XY轴移动指定的像素,如负数是反方向。moveTo(x,y) 相对于浏览器的左上角沿着XY轴移动到指定的像素,如负数是反方向。
窗体尺寸的改变,resizeBy(x,y) 相对于当前窗体的大小,调整宽度和高度。resizeTo(x,y) 把窗体调整为指定宽度和高度
script> //窗体控制 //位置 moveBy(100,100); //moveTo(200,200) //尺寸 window.resizeBy(100,100) resizeTo(400,400)
对窗体滚动条的控制,scrollBy(x,y) 相对于当前滚动条的位置移动的像素(前提有滚动条)。scrollTo(x,y) 相对于当前窗口的高度或宽度,移动到指定的像素
scrollBy(0,100) scrollTo(0,200)
innerHeight:
innerWidth: IE不支持
" _ue_custom_node_="true">
(3)window.event window事件
获取事件对象,当没有事件发生的时候为null。
window.event
window.onload=function (e) {
e
var ev=e||window.event;
}a.鼠标事件
相对于浏览器位置的(左上角为(0,0))
clientX 当鼠标事件发生的时候,鼠标相对于浏览器X轴的位置
clientY 当鼠标事件发生的时候,鼠标相对于浏览器Y轴的位置
相对于屏幕位置的
screenX 当鼠标事件发生的时候,鼠标相对于屏幕X轴的位置
screenY
window.onload=function (e) {
window.event
var ev=e||window.event;
var div1=document.getElementById("div1");
document.onmousemove=function (e) {
var ev=e||window.event;
var cx=ev.clientX;
var cy=ev.clientY;
var sx=ev.screenX;
var sy=ev.screenY;
div1.innerHTML="cx:"+cx+"--cy:"+cy+"
sx:"+sx+"--sy:"+sy;
}
}相对于事件源的位置
IE:
offsetX 当鼠标事件发生的时候,鼠标相对于事件源X轴的位置
offsetY
FF:
layerX 当鼠标事件发生的时候,鼠标相对于事件源X轴的位置
laterY
window.onload=function (e) {
window.event
var ev=e||window.event;
var div1=document.getElementById("div1");
div1.onclick=function (e) {
var ev=e||window.event;
var ox=ev.offsetX ||ev.layerX;
var oy=ev.offsetY ||ev.layerY;
div1.innerHTML="ox:"+ox+"--oy:"+oy;
}具体使用
模拟窗口拖拽
divs=document.createElement("div");
divs.onmousedown=function (e) {
var ev=e||window.event;
var ox=ev.offsetX ||ev.layerX;//第一次点击div不能动,相对于事件源的位置
var oy=ev.offsetY ||ev.layerY;
var ok=true;//标识鼠标放开的时候还移动
this.onmousemove=function (e) {//移动的时候跟随鼠标移动
if(ok){
var ev=e||window.event;
var cx=ev.clientX;
var cy=ev.clientY;
this.style.top=cy-oy+"px";//绝对定位
this.style.left=cx-ox+"px";
}
}
this.onmouseup=function () {
if(ok){
ok=false;
}
}
}b.键盘事件对象
keyCode 获得键盘码
空格:32 回车13 左上右下:37 38 39 40
altKey 判断alt键是否被按下 按下是true 反之是false 布尔值
ctrlKey 判断ctrl键
shiftKey 判断shift键
type 用来检测事件的类型 主要是用于多个事件通用一个事件处理程序的时候
document.body.onkeydown=function (e) {
var ev=e||window.event;
ev.keyCode
ev.altKey
ev.type
}具体使用
点击提交,内容自动读取
留言记录:你好
(4)关系类型
A.parent返回父窗口
B.top返回顶层窗口
C.self===window
D.stutas 设置窗口状态栏的文本
self :等同于window对象
opener:当前打开窗口的父窗口对象,支持opener.opener…的多重继续。
以上就是小编今天的分享,希望可以帮助到大家。