window对象

最新推荐文章于 2024-08-22 23:42:23 发布

EW_unique

最新推荐文章于 2024-08-22 23:42:23 发布

阅读量442

点赞数

本文链接：https://blog.csdn.net/JINQINGS/article/details/49283865

版权

window对象  (浏览器对象)

window{Dounment  使我们可以从脚本中对HTML页面中的所有元素进行访问;

   {history  包含用户(在浏览器窗口中)访问过的URL;

   {location 包含有关当前URL的信息;

   {navigator 包含有关浏览器的信息;

   {screen  包含有关客户端显示屏幕的信息;

说明:

所有浏览器都支持window对象,它表示浏览器窗口;

所有js全局对象,函数以及变量均自动成为window对象的成员;

位置

    screen x     console.log(window.screenx);
    screen y     console.log(window.screeny);
    screen left  window.alert(window.screenleft+""+window.screentop);
    x,y IE不支持
    left,top  IE支持
    window.screenleft//浏览器窗口边框内

alert   确定浏览器的位置

inner   内部的

IE浏览器不支持

    alert(window.innerwidth+""+window.innerheight)   w3c

    (窗口内可见区域的大小(宽/高)(内容区))

document方法

    alert(document.documentElement.clientwidth+""+document.documentElement.clientheight)

    IE浏览器可使用,此方法其他浏览器都可以用,不存在兼容性

window.onload(整个文档加载之后所要调用的方法(调用里面的方法))

窗口的移动和尺寸

    moveBy(x,y)  (相对于浏览器窗口进行偏移(当前坐标))

    moveTo(x,y)     btn.οnclick=function(){
                                            }

    resizeBy(x,y) 不停调整浏览器的大小,增加

    resizeTo(x,y) 浏览器直接缩小到指定值

    btn=window.document.getElementById("btn")  寻求的地址,寻找的Id的值与前面定义的Id值相同

* 打开新窗口   window.open

语法:

    window.open(URL.name.specs.replece)

    var.newWindow;(定义变量全局或者局部)

    var newWindow=window.open("","","width=100,height=100")

this  点哪个指向哪个     this.innerHTML(指li里面的内容)

    open.document.getElement   打开页面

弹出/打开新的窗口====_blank   _self====直接在子元素打开(父元素)

滚动条控制

    scrollBy(x,y)   滚动

    scrollTo(x,y)   返回到相对初始位置的值

时间间隔函数(计时器)开始

    window.setInterval(fn,time)

    window.scrollBy(x,y) 滚动相对当前位置移动

    window.clearInterval  暂停终止Interval

    window.scrollTo(x,y)  返回(相对于初始位置的x,y)

    window.οnlοad=function(){
    var i = 0
    window.setInterval(function(){
                                document.write(i+"<br>");i++;)1000(代表毫秒))=====页面显示一个一个增加,结果为1,2,3,4,5,6.......(动态效果)}

    window.οnlοad=function(){
    window.setTimeout(function){
                               document.write("1";}1000)}

history对象(历史记录)

    属性: length(返回历史列表中的址数)

    方法:forward  前进     history.forward

         back    后退      history.back

         history.go(-1)   后退一个页面,也可以前进,前进值为正数

location对象

    属性:

    href         console.log(location.href)返回完整的URL;
    hostname     console.log(location.hostname)输出主机名;
    pathname     console.log(location.pathname)返回URL路径名;
    port         console.log(location.port)返回一个URL服务器使用的端口号
    search       连接哪个页面,内容将在哪个页面显示

    方法:

    location.assign(URL值)  加载一个新的文档,内容显示连接的
    location.reload()       用于刷新当前文档
    location.replace()      不会保存在历史记录里面,跳转页面(用一个新文档取代当前文档)

screen对象

    console.log(window.screen.height)   (返回总宽//高度)

    console.log(window.screen.availHeight)  (返回宽//高度(不包含window任务栏))

window.alert(1)弹出对话框;

弹出/连接新窗口方法:

    1 window.open("3.html","_self");

    2 console.log(location.assign("3.html"));

    3 console.log(location.replace("3.html"));不会保存在历史记录

    4 a标签===<a href="#"></a>

练习

1==

    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        #yd{position: fixed;
            left: 100px;
            top: 100px;
        }
        #zt{
            position: fixed;
            left: 200px;
            top: 100px;
        }
        #fh{
            position: fixed;
            left: 300px;
            top: 100px;
        }
    </style>

    <script>
    window.οnlοad=function(){
        var yd=window.document.getElementById("yd");
        var zt=window.document.getElementById("zt");
        var fh=window.document.getElementById("fh");
        var times;
        yd.οnclick=function(){
            var i=5;
           times= window.setInterval(function(){
               window.scrollBy(0,i);
           },50);
        };
        zt.οnclick=function(){
            window.clearInterval(times)
        };
        fh.οnclick=function(){
            window.scrollTo(0,0)
        };

    }
    </script>
    </head>
    <body>
    <div style="height: 1500px"></div>
    <input type="button" value="移动" id="yd">
    <input type="button" value="暂停" id="zt">
    <input type="button" value="返回" id="fh">
    </body>
    滚动条

2==

    window.οnlοad=function(){
            var i =5;
            var a;
            a = window.setInterval(function(){

                document.write(i+"<br>");i--;
                if(i==0){
                    window.clearInterval("a");
                    console.log(location.replace("2.html"));

                }
            },1000)
        };
    /倒计时

3==

    <body>
    <input type="button" value="请选择你所在的区域" id="btn"><br/>
    <span id="cs">ddd</span>
    </body>
    </html>
    <script>
    var btn=document.getElementById("btn");

    btn.οnclick=function(){
        var newWindow=window.open("页面2.html","",innerWidth=100 ,innerHeight=100)
    }

    </script>======页面1

    <script>
        window.οnlοad=function() {
            var lis = document.getElementsByTagName("li");
            for (var i = 0; i < lis.length; i++) {
                lis[i].οnclick=function(){
                    opener.document.getElementById("cs").innerHTML=this.innerHTML;
                }
            }
        }
    </script>
    </head>
    <body>
    <ul>
         <li>杭州</li>
         <li>苏州</li>
         <li>成都</li>
         <li>上海</li>
    </ul>

    </body>======页面2
    链接点击事件

4==


     <script>
        window.οnlοad=function(){
           var qj = window.document.getElementById("qj");
            qj.οnclick=function(){
                history.forward();
            };
            var cd=window.document.getElementById("cd");
            cd.οnclick=function(){
                alert(history.length)
            };
        }
    </script>
    </head>
    <body>
    <a href="2.html">天猫</a>
    <input type="button" value="前进" id="qj"/>
    <input type="button" value="后退" id="ht"/>
    <input type="button" value="长度" id="cd">
    </body>======页面1

     <script>
        window.οnlοad=function(){
            var qj = window.document.getElementById("qj");
            qj.οnclick=function(){
                history.forward();
            };
            ht.οnclick=function(){
                history.back();
            }

        }
    </script>
    </head>
    <body>
    <a href="3.html">当当</a>
    <input type="button" value="前进" id="qj">
    <input type="button" value="后退" id="ht">
    </body>======页面2

    <script>
        window.οnlοad=function(){
            var ht=window.document.getElementById("ht");
        ht.οnclick=function(){
            history.back();
        }}
    </script>
    </head>
    <body>
    京东
    <input type="button" value="后退" id="ht">
    </body>======页面3
    设置链接的访问,前进or后退