window.location对象、window.navigator对象、window.history对象

最新推荐文章于 2023-08-03 21:05:26 发布

Pi皮蛋儿

最新推荐文章于 2023-08-03 21:05:26 发布

阅读量269

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_50723416/article/details/115381363

版权

JS 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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

URL 统一资源定位符是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含信息指出文件的位置以及浏览器应该怎么处理它。
URL的一般语法格式为：

protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link

组成	说明
protocol	通信协议常用的http,ftp,maito等
host	主机（域名）www.baidu.com
port	端口号可选，省略时使用方案的默认端口如http的默认端口为80
path	路径由零或多个‘/’符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
query	参数以键值对的形式，通过&符号分割开来
fragment	片段 #后面内容常见于链接锚点

location对象的属性

location对象属性	返回值
location.href	获取或者设置整个URL
location.host	返回主机（域名）www.baidu.com
location.port	返回端口号如果未写返回空字符串
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段 #后面内容常见于链接锚点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>click</button>
    <span></span>
    <script>
        // location.href
        // var btn = document.querySelector('button');
        // var span = document.querySelector('span');
        // btn.addEventListener('click', function() {
        //     // console.log(location.href);
        //     location.href = 'http://www.baidu.com'
        // })

        // 倒计时 5 秒跳转页面
        // setInterval(time, 1000);
        // var second = 5;

        // function time() {
        //     if (second == 0) {
        //         location.href = 'http://www.baidu.com'
        //     }
        //     span.innerHTML = '再等' + second + '秒跳转页面';
        //     second--;
        // }

        // location.search 获取URL参数数据
        // var btn = document.querySelector('button');
        // var span = document.querySelector('span');
        // btn.addEventListener('click', function() {
        //     // console.log(location.search);
        //     var names = location.search.split('=');
        //     console.log(names);
        //     span.innerHTML = names[1]
        // });

        // location.assign() | location.replace() | location.reload()
        var btn = document.querySelector('button');
        var span = document.querySelector('span');
        // btn.addEventListener('click', function() {
        // 记录浏览器历实，具有后退功能
        // location.assign('http://www.baidu.com');
        // 不记录浏览器历实，没有后退功能
        // location.replace('http://www.baidu.com');
        // 重新加载页面，相当于刷新按钮或者F5, 如果参数为 true 强制刷新 ctrl + F5
        // location.reload(true);
        // });
    </script>
</body>

</html>

navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent,该属性可以返回由客户机发送服务器的 user-agent 头部的值。

下面前端代码可以判断用户那个终端打开页面，实现跳转。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        if ((navigator.userAgent.match(/(phone|pad|pod|iphone|ipod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennce|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phoone)/i))) {
            window.location.href = ''; // 手机
        } else {
            window.location.href = ''; // 电脑
        }
    </script>
</body>

</html>

history对象与浏览器历实记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。

// window.history
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // history.forward(); 前进
            // history.back(); 后退
            // history.go(); 参数 1 前进一个页面, -1 后退一个页面
        })

Pi皮蛋儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
window.location对象、window.navigator对象、window.history对象

location 对象是 window 对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。URL 统一资源定位符是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含信息指出文件的位置以及浏览器应该怎么处理它。URL的一般语法格式为：protocol://host[:port]/path/[?query]#fragmenthttp://www.itcast.cn/
复制链接

扫一扫

专栏目录