涡阳网站建设哪家好,wordpress前台会员,泉州企业自助建站系统,公司首页模板说明#xff1a;该文属于 大前端全栈架构白宝书专栏#xff0c;目前阶段免费#xff0c;如需要项目实战或者是体系化资源#xff0c;文末名片加V#xff01;作者#xff1a;不渴望力量的哈士奇(哈哥)#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作#xf… 说明该文属于 大前端全栈架构白宝书专栏目前阶段免费如需要项目实战或者是体系化资源文末名片加V作者不渴望力量的哈士奇(哈哥)十余年工作经验, 从事过全栈研发、产品经理等工作目前在公司担任研发部门CTO。荣誉2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker、全栈领域优质创作者。 白宝书系列 启示录 - 攻城狮的自我修养 Python全栈白宝书 ChatGPT实践指南白宝书 产品思维训练白宝书 全域运营实战白宝书 大前端全栈架构白宝书 文章目录 ⭐ BOM window对象 navigator对象 history对象 location对象 ⭐ BOM BOMBrowser Object Model浏览器对象模型是JS与浏览器窗口交互的接口 一些与浏览器改变尺寸、滚动条滚动等相关的特效都需要借助BOM技术 window对象 window对象是当前JS脚本运行所处的窗口而这个窗口中包含DOM结构window.document属性就是document对象 在有标签页功能的浏览器中每个标签都拥有自己的window对象也就是说同一个窗口的标签页之间不会共享一个window对象 全局变量是winddow的属性 示例代码
var a 10;
console.log(window.a); //10这就意味着多个js文件之间是共享全局作用域的即js文件没有作用域隔离功能。全局变量是window属性是js建立的一种的机制多个js文件可以共同作用这些全局变量使用起来更加的方便。
内置函数普遍是window的方法
不仅仅是全局变量内置函数普遍是window的方法。比如alert()、setInterval()等内置函数普遍是window的方法
示例代码
console.log(window.alert alert); //true
console.log(winddow.setInterval setInterval); //trueconsole.log(window.hasOwnProperty(setInterval)); //truehasOwnProperty返回是否具有指定名称的属性/方法window.setInterval(function () { //可以用window打点调用内置函数console.log(你好)
}, 2000);window中关于窗口尺寸相关属性
属性意义windinnerHeight浏览器窗口的内容区域的高度包含水平滚动条如果有的话innerWidth浏览器窗口的内容区域的宽度包含垂直滚动条如果有的话outerHeight浏览器窗口的外部高度outerWidth浏览器窗口的外部宽度
获得不包含滚动条的窗口宽度要用documnet.documentElement.clientWidth
示例代码获得窗口的内宽、外宽、不包含滚动条的内宽
console.log(浏览器内宽(包含滚动条) window.innerWidth);
console.log(浏览器外宽 window.outerWidth);
console.log(浏览器内宽(不包含滚动条) document.documentElement.clientWidth);当浏览器窗口最大化时浏览器内宽和浏览器外宽值是一样的都不包含浏览器的边框当把浏览器窗口缩小浏览器的外宽就会大一些因为多了一个浏览器的边框
当窗口最大化时 当窗口缩小时 resize事件 在窗口大小改变之后就会触发resize事件可以使用window.onresize或者window.addEventListener(‘resize’)来绑定事件处理函数 示例代码给窗口改变尺寸添加事件监听
//监听窗口尺寸改变
window.onresize function () {console.log(浏览器窗口的内高 window.innerHeight);console.log(浏览器窗口的外高 window.outerHeight);
};已卷动高度 window.scrollY属性表示在垂直方向已滚动的像素值 document.documentElement.scrollTop属性也表示窗口卷动高度 在实际工作中考虑到浏览器之间的兼容性在得到已滚动的像素值时通常会这么写
var scrollTop window.scrollY || document.documentElement.scrollTop; //当浏览器支持window.scrollY时就取window.scrollY值如果不支持则取document.documentElement.scrollTop值window.scrollY和document.documentElement.scrollTop区别 window.scrollY是只读的document.documentElement.scrollTop不是只读的我们可以设置这个值来改变浏览去的卷动高度 示例代码
var scrollTop window.scrollY || document.documentElement.scrollTop;
console.log(窗口已卷动高度 scrollTop);scroll事件 在窗口被卷动之后就会触发scroll事件可以使用window.onscroll或者window.addEventListener(‘scroll’)来绑定事件处理函数 示例代码
//监听窗口卷动高度
window.onscroll function () {console.log(窗口卷动了 window.scrollY);
};scroll事件监听在某些特定场景是非常常用的比如实现H5页面中的落地页等 navigator对象
navigator航行者、领航员、驾驶员 window.navigator属性可以检索navigator对象它内部含有用户此次活动的浏览器的相关属性标识 属性意义appName浏览器官方名称appVersion浏览器版本userAgent浏览器的用户代理含有内核信息和封装壳信息platform用户操作系统
示例代码
console.log(浏览器品牌 navigator.appName);
console.log(浏览器版本 navigator.appVersion);
console.log(浏览器用户代理 navigator.userAgent);
console.log(浏览器用户操作系统 navigator.platform);history对象
history历史 window.history对象提供了操作浏览器会话历史的接口 常用操作就是模拟浏览器回退按钮尤其在移动端常用 属性意义history.back()等同于点击浏览器的回退按钮history.go(-1)等同于history.back()
示例代码比如从一个列表页点击进入详情页详情页中有一个“返回列表页”的按钮点击可直接返回列表页
!--列表页--
bodyh1列表页/h1divullia hrefBOM_history_详情页.html点击查看详情/a/li/ul/div
/body!--详情页--
bodyp详情页/pbutton idback返回列表页/buttonscriptvar back document.getElementById(back);back.onclick function () {history.back(); //或者history.go(-1)};/script
/bodylocation对象
location地址 window.location对象标识了当前所在网址可以通过给这个属性赋值命令浏览器进行页面跳转 属性/方法意义window.location赋值网址可命令浏览器跳转到对应网址window.location.href也可以实现这样的效果window.reload(true)重新加载网页
示例代码页面上新增按钮分别可以实现跳转到百度、刷新本页面
bodydiva href scriptjavascript:window.location.reload(true)刷新页面/abutton idbtn点我去百度/button/divscriptvar btn document.getElementById(btn);btn.onclick function () {// window.location https://www.baidu.com;window.location.href https://www.baidu.com;};/script
/body
