JavaScript window对象

时间 2020-08-13

标签 javascript window 对象栏目 JavaScript 繁體版

原文原文链接

window对象

　　window对象是一个全局的对象，咱们使用的alert()就是window对象下的方法。只是由于它是全局的因此并不须要加上前缀。像前面说的Math对象就是非全局的。所以须要加上前缀。html

　　全部的浏览器都支持window对象，按理说一个HTML文档就应该对应一个window对象。而且从功能上来说它是控制浏览器窗口的，window对象并不须要建立对象，而是直接使用便可。浏览器

经常使用方法

方法名	描述
输入框系列
alert()	显示带有一段消息和一个确认按钮的警告框
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框(可用变量接受trun或者false)
prompt()	显示可提示用户输入的对话框(可用变量接收输入的内容)
窗口系列
open()	打开一个新的浏览窗口或者查找一个已命名的窗口
close()	关闭浏览器窗口
定时器系列
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式，循环调用。
clearInterval()	取消由 setInterval() 设置的 timeout
setTimeout()	在指定的毫秒数后调用函数或计算表达式，只调用一次。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout
滚动条系列
scrollTo()	把内容滚动到指定的坐标。

输入框系列

alert

　　显示带有一段消息和一个确认按钮的警告框函数

<script>

    "use strict";

    alert("hello,world");  // window为全局对象，不用加前缀

</script>

confirm

　　显示带有一段消息以及确认按钮和取消按钮的对话框(可用变量接受true或者false)网站

<script>

    "use strict";

    let select = confirm("云崖是个帅哥对吗?");  // window为全局对象，不用加前缀

    console.log(select); // 点击肯定是true，取消是false

</script>

prompt

　　显示可提示用户输入的对话框(可用变量接收输入的内容)this

<script>

    "use strict";

    let message = prompt("请输入信息");  // window为全局对象，不用加前缀

    console.log(message); // HELLO,WORLD

</script>

窗口系列

open

　　打开一个新的浏览窗口或者查找一个已命名的窗口google

　　方法详解: open()方法用于打开一个新窗口并进入指定网址spa

　　参数1：网址名称3d

　　参数2：新窗口的名称code

　　参数3：新窗口的参数htm

<script>

    "use strict";

    open("http://www.google.com"); // 打开一个新窗口，进入指定的网址

</script>

<script>

    "use strict";

    open("","","width=200,resizable=no,height=100,"); // 打开一个新窗口，宽度200，高度100

</script>

close

　　关闭当前的浏览器窗口

<script>

    "use strict";

    let select = confirm("点击肯定关闭当前窗口");

    if (select) { close() };

</script>

定时器系列

setInterval

　　按照指定的周期（以毫秒计）来调用函数或计算表达式，循环调用。

<script>

    "use strict";

    setInterval(() => {

        console.log("hello,world");

    }, 3000);  // 每隔3000毫秒运行一次
 
</script>

clearInterval

　　取消由 setInterval() 设置的 timeout，这表明将不会继续循环执行setInterval()中的代码。

　　如下示例将演示使用setInterval()与clearInterval()制做一个定时器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <input class="show" type="text" readonly placeholder="开始计时">
    <button onclick="start(this)">开始计时</button>
    <button onclick="end(this)">中止计时</button>

</body>

<script>

    "use strict";

    let tag = null;

    function start(ele) {

        if (tag == null) {
            let time = new Date().toLocaleString();
            ele.previousElementSibling.value = time;

        }

        tag = setInterval(() => {
            let time = new Date().toLocaleString();
            ele.previousElementSibling.value = time;  // 上一个兄弟标签
        }, 1000);

    }
    
    function end(ele) {

        clearInterval(tag); // 取消继续循环
        tag = null;
        ele.previousElementSibling.previousElementSibling.value = "继续计时";

    }

</script>
</html>

setTimeout

　　在指定的毫秒数后调用函数或计算表达式，只调用一次。

<script>

    "use strict";

    setTimeout(() => {

        console.log("hello,world");

    }, 3000);  // 3000毫秒后打印一次hello，world
 
</script>

clearTimeout

　　取消由 setTimeout() 设置的 timeout，这表明将不会继续循环执行setTimeout()中的代码。

<script>

    "use strict";

    let tag = setTimeout(() => {

        alert("HELLO,WORLD");

    }, 1000); // 一千毫秒后将打印HELLO,WORLD

    let select = confirm("若是您点击肯定，会有一个弹窗在1s后向您打招呼，若是您点击取消，则没有弹窗向您打招呼。");

    if (select == false) {

        clearTimeout(tag);

    }
    // 因为同步任务在宏任务以前，因此先运行同步任务。
    
</script>

History和Location

　　History和Location是Window对象下的两个子对象。其中History包含用户在浏览器窗口中访问过的URL，而Location对象包含有关当前URL的信息。

　　History的功能相似于浏览器上的这两个功能，而且使用length能够返回浏览器历史中的URL数量。

History

　　这玩意儿不推荐使用，它至关于浏览器上的这两个按键。

　　History对象在实际应用中比较少见。可是我印象中在某一些小说网站使用较多。可是更多的是目前都在使用<a>标签进行跳转页面的操做。

History下的方法名	描述
back()	加载history列表中的前一个URL
forward()	加载 history 列表中的下一个 URL
go()	加载 history 列表中的某个具体页面

　　back与forward实例

　　如下有两个H5页面，一个为主页一个为首页。

// 主页
<body>

    <a href="子页.html">跳转到子页</a>
    <button onclick="history.forward()">forward</button>

</body>

// 子页
<body>
        <button onclick="history.back()">back-返回到主页</button>
</body>

　　go实例

　　使用go()也能够达到上述效果，可是里面参数要设置成+1或者-1。

// 主页
<body>

    <a href="子页.html">跳转到子页</a>
    <button onclick="history.go(1)">go(1)</button>

</body>

// 子页
<body>
        <button onclick="history.go(-1)">go(-1)-返回到主页</button>
</body>

Location

　　Location对象也是Window对象下的一个子对象，它主要包含了一些URL的信息。

属性	描述
hash	设置或返回从井号 (#) 开始的 URL（锚）。
host	设置或返回主机名和当前 URL 的端口号。
hostname	设置或返回当前 URL 的主机名。
href	设置或返回完整的 URL。
pathname	设置或返回当前 URL 的路径部分。
port	设置或返回当前 URL 的端口号。
protocol	设置或返回当前 URL 的协议。
search	设置或返回从问号 (?) 开始的 URL（查询部分）。

属性	描述
assign()	加载新的文档。
reload()	从新加载当前文档。
replace()	用新的文档替换当前文档。

<script>

    "use strict";

    location.assign("http://www.google.com/");
    // 页面跳转访问google，不能经过浏览器自带的back返回。

    location.reload();
    // 刷新当前页面，相似F5刷新功能

    location.replace("http://www.google.com/");
    // 使用google来替换当前页面，不能经过浏览器自带的back返回

</script>