1、获取浏览器的尺寸
window.innerWidth 获取当前浏览器窗口的宽度
window.innerHeight 获取当前浏览器窗口的高度
2、浏览器的弹框
window.alert()
window.confirm()
window.prompt()
3、浏览器的地址信息
window.location.href = '' //存储浏览器地址栏内url 地址的信息
window.location.reload() //从新加载页面,相当于刷新---不要写在全局里,否则浏览器会一直刷新
4、浏览器的浏览记录
window.history.back 用来回退历史纪录的, 就是回到前一个页面, 相当于浏览器左上角的 ← 按钮
window.history.forward 是去到下一个历史记录里面, 也就是去到下一个页面, 就相当于 浏览器左上角的 → 按钮
5、获取到浏览器的信息
window.navigator
6、浏览器的事件
//浏览器的延迟加载事件
window.onload = function () {
console.log('页面已经加载完毕')
}
//浏览器滚动事件
window.onscroll = function () {
console.log('浏览器滚动了')
}
7、浏览器的滚动距离
document.body.scrollTop
document.documentElement.scrollTop
两者区别:
IE 浏览器(了解)
没有 `DOCTYPE` 声明的时候, 用这两个都行
有 `DOCTYPE` 声明的时候, 只能用 `document.documentElement.scrollTop`
Chorme 和 FireFox
没有 `DOCTYPE` 声明的时候, 用 `document.body.scrollTop`
有 `DOCTYPE` 声明的时候, 用 `document.documentElement.scrollTop`
Safari
两个都不用, 使用一个单独的方法 `window.pageYOffset`
8、浏览器的本地存储
window.localStorage.setItem(kay,value)
浏览器的本地存储,持久化存储,存储之后不手动删除,就永远存在
在存储的时候,只能存储基本数据类型中的字符串
如果需要存储其他数据类型, 需要借助 JSON 提供的方法
可以实现跨页面通讯
window.localStorage.getItem(key)
//查询本地信息
window.localStorage.removeItem(key)
//删除某一信息
window.loaclStorage.clear()
//清空信息