web前端练习29----Bom中，Navigator，loaction，history ，Screen，window及案例（滚动，刷新加载，传参）
BOM- 浏览器对象模型
- BOM可以使我们通过JS来操作浏览器
- 在BOM中为我们提供了一组对象，用来完成对浏览器的操作
- BOM对象:
1.Navigator- 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
2.Location- 代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
3.History- 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录
由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页
而且该操作只在当次访问时有效
4.Screen- 代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息
5.Window- 代表的是整个浏览器的窗口，同时window也是网页中的全局对象
这些BOM对象在浏览器中都是作为window对象的属性保存的，
可以通过window对象来使用，也可以直接使用
1.Navigator 识别不同浏览器
通过 navigator.userAgent 判断浏览器类型
2.Location - 该对象中封装了浏览器的地址栏的信息
2.1 location.href 可以实现页面的跳转并传参
//跳转，在路径中拼接参数
window.location.href = 'demo02.1.html?name=zhh';
//在新页面拿到url,并截取参数
window.location.href
location.href 等同于 location，例如：
//跳转，在路径中拼接参数
window.location = 'demo02.1.html?name=zhh';
//在新页面拿到url,并截取参数
window.location2.2 location.assign("http://www.baidu.com");
- 用来跳转到其他的页面，作用和直接修改location一样
2.3 location.reload(true);
- 用于重新加载当前页面，作用和刷新按钮一样
- 如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面
2.4 location.replace("01.BOM.html");
- 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面
不会生成历史记录，不能使用回退按钮回退
2.5 location的其它常用属性
// 拿到整个网址,可以截取后面的参数
let url = window.location.href;
console.log(url);
// 获取主机加端口号
let host = window.location.host;
console.log(host);
// 获取主机
let hostName = window.location.hostname;
console.log(hostName);
// 获取端口号
let port = window.location.port;
console.log(port);
// 获取协议
let xieyi = window.location.protocol;
console.log(xieyi);
// 获取路径
let pathName = window.location.pathname;
console.log(pathName);
// 片段标识符，可以判断网页状态
let hash = window.location.hash;
console.log(hash);
// 返回网址问号后面的字段
let ziduan = window.location.search;
console.log(ziduan);
3.History- 对象可以用来操作浏览器向前或向后翻页
history.forward(); - 可以跳转下一个页面，作用和浏览器的前进按钮一样
history.back(); - 可以用来回退到上一个页面，作用和浏览器的回退按钮一样
history.go(整数);
- 可以用来跳转到指定的页面
- 它需要一个整数作为参数
history.go(1):表示向前跳转一个页面 相当于forward()
history.go(2):表示向前跳转两个页面
history.go(-1):表示向后跳转一个页面
history.go(-2):表示向后跳转两个页面
4.Screen 不常用这里不讲了，用的时候自己去查文档
5.Window 对象
5.1 window 对象的延时执行函数
setInterval();
clearInterval();
setTimeout();
clearTimeout()
具体参考另外一篇文章：
https://blog.csdn.net/zhaihaohao1/article/details/102593574
5.2 window 对象的提示框
5.2.1 警告框对话框
window.alert('出问题了');
5.2.2 选择对话框
let istrue = window.confirm('是否正确');
if (istrue) {
console.log('正确');
} else {
console.log('错误');
}
5.2.3输入对话框
// 拿到输入的内容
let content = window.prompt('请输入内容', 'zhhhh');
console.log(content);
5.3 三个监听事件
5.3.1 window.onload 等整个Dom执行完在触发
window.onload = function (){}
5.3.2 window.onscroll 滚动事件，监听浏览器的滚动
这个事件很重要，可以实现 上拉加载，下拉刷新 等重要功能
和浏览器相关的几个高度 https://blog.csdn.net/qq_35430000/article/details/80277587
window.onscroll = function(){}
5.3.3 window.onresize 监听浏览器可视化窗口的变化
window.onresize = function (){}
6三个练习案例
6.1案例：左右联动
左边滑动，右边的按钮变色，点击右边的按钮，左边对应滑动
效果图：
实现思路：
监听滚动事件，window.onscroll = function ()
设置顶部被隐藏的高度 window.document.body.scrollTop
代码如下：
Document
6.2案例：列表的下拉刷新和上拉加载
这个例子的兼容性不好，有些浏览器没效果， 兼容性好的参考
https://blog.csdn.net/zhaihaohao1/article/details/102983531
效果图：
开发思路：
1监听滚动事件 window.onscroll = function () { }
2判断滑动到顶部时刷新数据 document.body.scrollTop = 0
3判断滑动到底部时加载数据
可见高度
let clientHeight = document.body.clientHeight;
全文高度(包括不可见部分的高度)
let scrollHeight = document.body.scrollHeight;
顶部被遮住部分的距离
let scrollTop = document.body.scrollTop;
判断滑动到底部(有时候有一点误差，根据实际需要判断)
scrollHeight = scrollHeight+scrollTop;
代码：
Document
测试
刷新。。。
加载中。。。
参考文章：
https://blog.csdn.net/money_oriented/article/details/80323965
https://blog.csdn.net/qq_35430000/article/details/80277587
6.3案例：页面的跳转并传递参数：
效果图：
开发思路
在 example3.html 中要转网页，并传参
window.location.href = 'example3.1.html?name=zhh';
在 example3.1.html 中拿到路径，并截取参数
let url = window.location.href;
代码：
example3.1.html中传数据：
Document
example3.1.html 中接收数据
Document