web前端学习（四）JavaScript学习笔记部分（8）-- JavaScript 浏览器对象

1、window对象

1.1、window对象：

　　window对象是BOM的核心，window对象指当前的浏览器窗口

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

　　全局变量是window对象的属性

　　全局函数是window对象的方法

　　甚至HTML DOM的document也是window对象的属性之一

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    window.document.write("hello");/*这个效果和不写window.是一样的*/

</script>

</body>

</html>

1.2、window尺寸

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

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

　　备注：这个高度和宽度计算的不包含工具栏和滚动条这一部分

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    document.write(`高度：`+window.innerHeight+`,宽度：`+window.innerWidth);/*这个效果和不写window.是一样的*/

</script>

</body>

</html>

1.3window方法：

　　window.open() - 打开新窗口

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<button id="btn" onclick="btnOnClick()">按钮</button>

<script>

    function btnOnClick(){

        window.open("array1.html","hahaha","width=300,height=300,top=300,left=300,toolbar=yes")

                    /*要打开的窗口名|窗口命名|属性设置|toolbar设置属性如何显示，谷歌浏览器直接没有toolbar*/

        window.close();/*关闭当前窗口*/

    }

</script>

</body>

</html>

2、计时器

2.1、计时事件

　　通过使用JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行，我们称之为计时事件

2.2、计时方法：

　　1、setInterval() - 间隔指定的毫秒数不停地执行指定的代码

　　　　clearInterval() - 方法用于停止setInterval()方法执行的函数代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<button id="btn" onclick="stopTime()">anniu</button>

<p id="ptime"></p>

<script>

    var mytime = setInterval(function(){

        getTime();

    },1000)

    function getTime(){

        var d = new Date();

        var t = d.toLocaleTimeString();

        document.getElementById("ptime").innerHTML = t;

    }

    function stopTime(){

        clearInterval(mytime);

    }

</script>

</body>

</html>

　　2、setTimeout() - 暂停指定的毫秒数后执行指定的代码

　　　　clearTimeout() - 方法用于停止执行setTimeout()方法的函数代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<button id="btn" onclick="myWin()">弹出一次</button>

<button id="btn2" onclick="myWin2()">一直弹出</button>

<button id="btn3" onclick="stopWin()">停止弹出</button>

<script>

    var win;

    function myWin(){

        win = setTimeout(function(){

            alert("hello");

        },3000);

    }

    function myWin2(){

        alert("hello");

        win = setTimeout(myWin2,3000);

        /*方法自己调用自己可以一直执行*/

    }

    function stopWin(){

        clearInterval(win);

    }

</script>

</body>

</html>

区别：第一个方法是一只调用函数，第二种方法是一直自己调用自己

3、History对象

3.1、History对象：

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

3.2、History方法：

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

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

　　history.go() - 进入历史中的某个页面（当前页面是0，可以往前是负数，往后是正数）

history1.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<a href="history2.html">点击跳转到history2.html</a>

<button id="btn" onclick="forwardJump()">向前进(下一个页面)跳转</button>

<script>

    function forwardJump(){

        history.forward();

    }

</script>

</body>

</html>

history2.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<button id="btn" onclick="goceshi()">点击跳回到之前的页面</button>

<script>

    function goceshi(){

        history.back();/*返回到之前的界面*/

    }

</script>

</body>

</html>

history.go()用法：

home.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>主页</title>

</head>

<body>

<a href="login.html">进入登录验证界面</a>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>登录界面</title>

</head>

<body>

<form action="">

    <input type="text" id = username>

</form>

<button id="btn" onclick="safe()">确认</button>

<script>

    function safe(){

        var name = document.getElementById("username").value;

        if(name == "hello"){

            history.go(-1);

        }else{

            alert("输入错误");

        }

    }

</script>

</body>

</html>

4、Location对象

4.1、Location对象：

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

4.2、Location对象的属性：

　　location.hostname:　　返回web主机的域名

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

　　location.port:　　返回web主机的端口

　　location.protocol:　　返回所使用的web协议(http://或https://)

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

　　location.assign()方法加载新的文档

<!DOCTYPE html>

<!--suppress ALL -->

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="div">

    <button id="btn1" onclick="getLoc()">按钮1</button>

    <button id="btn2" onclick="reNew()">按钮2</button>

    <p id="ptime"></p>

</div>

    <script>

        function getLoc(){

            document.getElementById("ptime").innerHTML = window.location.port;

            var newnode = document.createElement("div");

            document.getElementById("div").appendChild(newnode);

            newnode.innerHTML = window.location.port;

        }

        function reNew(){

            location.assign("http://www.baidu.com");

        }

    </script>

</body>

</html>

5、Screen对象

5.1、Screen对象：

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

5.2、属性：

　　screen.availWidth - 可用的屏幕宽度

　　screen.availHeight - 可用的屏幕高度

　　screen.height - 屏幕高度

　　screen.width - 屏幕宽度

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    document.write(`可用高度`+screen.availHeight+`，可用宽度`+screen.availWidth+`<br/>`);

    document.write(`整体高度`+screen.height+`，整体宽度`+screen.width+`<br/>`);

</script>

</body>

</html>