JS浏览器对象-windows对象、计时器、History对象、Location对象、Screen对象

最新推荐文章于 2022-04-18 22:50:19 发布

bymyself11

最新推荐文章于 2022-04-18 22:50:19 发布

阅读量348

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/bymyself11/article/details/51086488

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.window对象

（1）window对象是BOM(浏览器对象模型)的核心、window对象指当前的浏览器窗口

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

全局变量为window对象的属性

全局函数是window对象的方法

HTML DOM的document也是window对象的属性

（2）window尺寸

window.innerHeight-浏览器窗口内部的高度

windows.innerWidth-浏览器窗口的内部宽度

（3）window方法

window.open()-打开新窗口

window.close()-关闭当前窗口

简单事例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSDOM浏览器对象</title>
</head>
<body>
<button οnclick="openW()">button</button>
<script>
    window.document.write("hello");
    document.write("world");//window可以不写
    document.write("高度"+window.innerHeight+"宽度"+window.innerWidth);
    function openW() {
        //打开新窗口
      //  window.open("hello.html","windowname","height=200,width=200");
        // 关闭窗口
        window.close();
    }

</script>
</body>
</html>

2.计时器

（1）计时方法：

setInterval()间隔指定的毫秒数后不停的执行代码

clearInterval()用于停止setInterval()所执行的代码

setTimeout()暂停指定的毫秒后执行指定的代码

clearTimeout()用于停止setTimeout()所执行的代码

事例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSDOM浏览器对象</title>
</head>
<body οnlοad="changeTime2()">
<p id="pid"></p>
<button οnclick="stop1()">button</button>
<button οnclick="stop2()">button2</button>
<script>
    //var  time1= window.setInterval(function () {
    //    changeTime();
   // },1000);
   // function changeTime() {
    //    var date=new Date();
    //    var a=date.toLocaleTimeString();
    //    document.getElementById("pid").innerHTML=a;
    //}
   // function stop1() {
    //    window.clearInterval(time1);//把上面的变量传进去

   // }

    var time2;
     function changeTime2() {
         var date=new Date();
         var a=date.toLocaleTimeString();
         document.getElementById("pid").innerHTML=a;
          time2=window.setTimeout(function () {
             changeTime2();//需要自己调用自己才能实现时间的改变
         },1000);
     }
   function stop2() {
       window.clearTimeout(time2);

   }
</script>
</body>
</html>

3.History对象

window.history对象包含浏览器的历史（url）的集合

history方法：

history.back()与在浏览器点击的后退按钮相同

history.forward()与浏览器中点击的向前按钮相同

historry.go()进入历史中的某个界面

模仿简单的登录成功与否界面的跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS浏览器对象</title>
</head>
<body>
<input id="useName" type="text">
<button οnclick="login()"></button>
<script>
   function login() {
       var useName=document.getElementById("useName").value;
       if(useName=="h"){//如果用户名为h则跳转到上一个界面
           history.back("js.html");
       }else {
           alert("you are error");
       }
   }
</script>
</body>
</html>

4.Location对象

（1）window.location对象用于获得当前页面的地址（URL），并把浏览器重定向到新的页面

（2）Location对象的属性

location.hostname返回当前页面的路径和文件名

location.port返回web主机的端口

location.protocol返回所使用的web协议（htto://或者https://）

location.href属性返回当前页面的URL

location.assign方法加载新的文档

事例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS浏览器对象</title>
</head>
<body>
<p id="pid1"></p>
<p id="pid2"></p>
<p id="pid3"></p>
<p id="pid4"></p>
<p id="pid5"></p>
<button οnclick="change()">button1</button>
<button οnclick="change2()">button2</button>
<script type="text/javascript">
    function change() {
        document.getElementById("pid1").innerHTML=location.hostname;
        document.getElementById("pid2").innerHTML=location.pathname;
        document.getElementById("pid3").innerHTML=location.port;
        document.getElementById("pid4").innerHTML=location.protocol;
        document.getElementById("pid5").innerHTML=location.href;
    }
    function  change2() {
        location.assign("http://www.baidu.com");
    }
</script>
</body>
</html>

5.Screen对象

（1）window.screen对象包含有关用户屏幕的信息

（2）属性

screen.availWidth可用屏幕宽度

screen.acailHeight可用的屏幕高度

screen.Height屏幕高度

screen.Width屏幕宽度

简单事例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS浏览器对象</title>
</head>
<body>
<script>
   document.write(window.screen.availHeight+"</br>") ;//可以屏幕高度
    document.write(window.screen.availWidth+"</br>");//可以屏幕宽度
    document.write(window.screen.height+"</br>");//屏幕高度
    document.write(window.screen.width);//屏幕高度
</script>
</body>
</html>