BOM（下）

最新推荐文章于 2024-11-13 01:18:00 发布

JJ_Smilewang

最新推荐文章于 2024-11-13 01:18:00 发布

阅读量223

点赞数 1

分类专栏： BOM 文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/JJ_Smilewang/article/details/124847214

版权

BOM 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. location 对象

window 对象给我们提供了一个 location属性用于获取或设置窗体的 URL，并且可以用于解析 URL 。因为这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象。

1.1 URL

统一资源定位符 (Uniform Resource Locator, URL) 是互联网上标准资源的地址，俗称网址。互联网上的每个文件都有一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

URL 的一般语法格式为：

// URL 的一般语法格式为： 
protocol://host[:port]/path/[?query]#fragment
// 比如
http://www.itcast.cn/demo.html?name=cindy&sex=woman#link

// 解析：①protocol称为通信协议，该例子中为http
     // ②host表示主机（域名），该例子中为www.itcast.cn
     // ③port表示端口号，，该例子中省略，http默认的端口为80
     // ④path表示文件路径，该例子中为demo.html
     // ⑤query表示参数，以键值对的形式，通过&符号分隔开来，该例子中为name=cindy&sex=woman
     // ⑥fragment表示片段，#后面内容，常见于链接、锚点，该例子中为link

注意：一个URL并不是要包括以上所有部分，可以根据实际需要显示对应的内容即可。

1.2 location 对象的属性

以上属性，重点记住 href 和 search属性。

// location.href属性是获取或设置 整个URL
<body>
   <button>点击</button>
   <script>
        var btn=document.querySelector('button');
        btn.addEventListener('click',function(){
            console.log(location.href);  // 直接打印得到的就是当前页面的url
            location.href='https://www.baidu.com';  // 赋值是设置了新的url，点击会跳转到新页面
        })
   </script>

1.3 案例操作--5秒钟之后自动跳转到新页面

<body>
    <div></div>
    <script>
        let div = document.querySelector('div');
        // 定义参数time设置定时的总时间
        let time = 5;
        // 在定时器外面先执行一次，避免打开时有一秒钟的空白
        div.innerHTML = '还剩下' + time + '秒跳转到新页面';
        setInterval(function() {
        // 当5秒过后，需跳转到新页面，所以要做个判断
            if (time == 0) {
                location.href = 'https://www.baidu.com'; // 赋值实现的是跳转到新页面
            } else {
                time--;
                div.innerHTML = '还剩下' + time + '秒跳转到新页面';
            }
        }, 1000)
    </script>
</body>

由于需要实现自动跳转，所以要利用定时器来帮助完成，理论上setTimeout()方法应该更合适，但是这种方法不能实现页面的倒计时效果，所以使用setInterval()，借助一个变量加上if判断就可实现。

1.4 location 对象的方法

// location三种方法初体验
<body>
    <button>点击</button>
    <script>
        let btn = document.querySelector('button');
        btn.onclick = function() {
            // assign() 方法，记录浏览历史，所以可以实现后退功能
            location.assign('https://www.baidu.com');
            // replace() 方法，replace替换，是不记录浏览历史，所以无法实现后退功能（即原页面被替换成新页面了）
            location.replace('https://www.baidu.com');
            // reload() 刷新页面  ，若参数为true，则表示强制刷新
            location.reload();
        }
    </script>
</body>

location.assign() 方法可以实现跳转到新页面，类似属性location.href的设置功能。另外和location.replace() 方法的区别就是assign() 方法可以返回原页面，而replace() 方法不可返回

2. history 对象

window 对象还给我们提供了一个 history 对象，顾名思义，这个对象是与浏览器的历史记录进行交互的，但是使用前提是要有浏览器历史记录。

history对象 用于操作浏览器的前进后退
history back() 方法  回退到上一条历史记录
语法：window.history.back()  // window可以省略

forward() 方法 前进到下一条历史记录
语法：window.history.forward()    // window可以省略

go() 方法 正整数表示前进，0表示刷新，负整数表示后退  数字绝对值是几表示可以前进/后退几个页面
语法：window.history.go()   // window可以省略
比如
history.go(2);  // 表示可以前进两个页面，前提往前要有两个浏览记录
history.go(0);  // 表示刷新页面
history.go(-3);  // 表示可以后退三个页面，前提往后回退要有三个浏览记录

history 对象一般在实际开发中比较少用，因为浏览器自带前进后退功能。但是也会在一些 OA 办公系统中见到。