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>