javascript浏览器对象模型-window对象

2019-12-22 本文已影响0人 ssttIsme

javascript浏览器对象模型-window对象

window对象是BOM(Browser Object Model)中所有对象的核心
window是宿主对象，代表整个浏览器

    function f() {
        document.write("function");
    }
    window.f(); //可省略window

输出 function

  var a="keyword";
  document.write(window.a); //可省略window

输出 keyword

一、属性

1.位置类型-获得浏览器的位置

window.screenLeft可以获得浏览器距离屏幕左上角的左边距(IE)

火狐 screenX

    document.write(screenLeft);

window.screenTop可以获得浏览器距离屏幕左上角的上边距(IE)

火狐 screenY

    document.write(screenTop);

位置类型-获得浏览器的大小

火狐window.innerWidth
火狐window.innerHeight

2.关系类型

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>javascript浏览器对象模型-window对象</title>
</head>
<frameset rows="20%,*">
    <frame src="top.html">
    <frameset cols="20%,*">
        <frame src="left.html">
        <frame src="right.html">
    </frameset>
</frameset>
<body>
</body>
</html>

A.parent返回父窗口
B.top返回子窗口
C.self返回当前窗口的引用self==window
D.length设置或返回窗口中的框架数量
E.opener开启者

3.status设置窗口状态栏的文本

 window.status="状态栏文本";

二、方法

1.窗体控制

A.窗体的移动
window.moveBy(x,y)相对于当前位置沿着x或y移动指定的像素，如负数则是反方向(IE)

   moveBy(100,200); //向右移动100，向下移动200

window.moveTo(x,y)相对浏览器的x或y移动指定的像素，如负数则是反方向(IE)

    moveTo(150,250);

B.窗体尺寸的改变
window. resizeBy(x,y)相对当前窗体大小调整宽度和高度(IE)

    resizeBy(50,100);

window. resizeTo(x,y)把窗体调整为指定的宽度和高度(IE)

    resizeTo(50,150);

2.窗体滚动条的控制

window.scrollBy(x,y)相对于当前滚到条的位置移动的像素(前提是有滚动条)

    scrollBy(0,500);

window.scrollTo(x,y)相对于当前窗口的高度或宽度移动到指定的像素

    scrollTo(0,700);

3.时间间隔函数

window.setInterval("函数或者代码串",指定的时间[毫秒])按照指定的周期(毫秒)不断地执行函数或者是代码串

    setInterval("document.write(' Hi user ')",1000);

     var i=0;
     setInterval(change,1000);
     function change() {
         document.write(i+" ");
         i++;
     }

    var a=0;
    setInterval(function(){
        document.write(a+" ");
        a++;
    },1000);

    setInterval("change(0)",1000);
    function change(b) {
        document.write(b+" ");
    }

window.clearInterval()清除计时器

<button id="stop">停止</button>
<div id="content"></div>
<script>
    window.onload=function () {
        var t=setInterval(printWord,1000);

        function printWord() {
            var div= document.getElementById("content");
            div.innerText+=" Hey Boy ";
        }
        var btnStop=document.getElementById("stop");
        btnStop.onclick=function () {
            clearInterval(t);
        }
    };
</script>

window.setTimeout("函数或者代码串",指定的时间[毫秒])在指定的毫秒数后只执行一次函数或者是代码串

  setTimeout("document.write('Hey boy')",2000);

<button id="stop">停止</button>
<div id="content"></div>
<script>
   window.onload=function () {
        var t=setTimeout(printWord,1000);

        function printWord() {
            var div= document.getElementById("content");
            div.innerText+=" Hey Boy ";
        }
        var btnStop=document.getElementById("stop");
        btnStop.onclick=function () {
            clearTimeout(t);
        }
    };
</script>

window.clearTimeout()清除计时器

4.打开新的窗口

window.open(url,name,features,replace)(IE)

   window.open("top.html","百度","status=0,scrollbars=1,directions=1,channelmode=1,menubar=1");

javascript浏览器对象模型-window对象