懂式情感网
您的当前位置:首页js window对象

js window对象

来源:懂式情感网
<link rel="stylesheet" href="https://js.how234.com/third-party/SyntaxHighlighter/shCoreDefault.css" type="text/css" /><script type="text/javascript" src="https://js.how234.com/third-party/SyntaxHighlighter/shCore.js"></script><script type="text/javascript"> SyntaxHighlighter.all(); </script>

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…的多重继续。

以上就是小编今天的分享,希望可以帮助到大家。

显示全文