day33 navigator对象（检测设备的代码在这里）和history对象（前进后退）

最新推荐文章于 2024-05-17 13:52:13 发布

亦昭昭

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量1.3k

点赞数 48

分类专栏：记录前端学习文章标签： javascript 前端

本文链接：https://blog.csdn.net/z240113765/article/details/136046329

版权

记录前端学习专栏收录该内容

44 篇文章 0 订阅

订阅专栏

navigator对象

navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息。

常用属性和方法

通过userAgent检测浏览器的版本及平台

在这里插入图片描述

用于检测的代码：

<script>
        // 检测 userAgent（浏览器信息）
        (function () {
            const userAgent = navigator.userAgent
            // 验证是否为Android或iPhone
            const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
            const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
            // 如果是Android或iPhone，则跳转至移动站点
            if (android || iphone) {
                location.href = 'http://xxx.cn'
            }
        })();
    </script>

histroy对象

history (历史)是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进、后退等。

history对象方法	作用
back()	退后功能
forward()	前进功能
go(参数)	前进后退功能，参数如果是1前进1个页面，-1则后退1个页面

示例：

<body>
    <button>前进</button>
    <button>后退</button>
    <script>
        const back = document.querySelector('button:first-child')
        const forward = back.nextElementSibling
        back.addEventListener('click', function () {
            // 后退1步
            history.back()
        })
        forward.addEventListener('click', function () {
            // 前进1步
            history.forward()
        })
    </script>
</body>

可以修改为以下代码，效果相同：

<body>
    <button>前进</button>
    <button>后退</button>
    <script>
        const back = document.querySelector('button:first-child')
        const forward = back.nextElementSibling
        back.addEventListener('click', function () {
            // 后退1步
            // history.back()
            history.go(-1)
        })
        forward.addEventListener('click', function () {
            // 前进1步
            // history.forward()
            history.go(1)
        })
    </script>
</body>