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

目录

    • navigator对象
      • 常用属性和方法
        • 通过userAgent检测浏览器的版本及平台
          • 用于检测的代码:
    • histroy对象
      • 示例:

navigator对象

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

常用属性和方法

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

day33 navigator对象(检测设备的代码在这里)和history对象(前进后退)_第1张图片
day33 navigator对象(检测设备的代码在这里)和history对象(前进后退)_第2张图片

用于检测的代码:
<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>

你可能感兴趣的:(记录前端学习,javascript,前端)