⭐ BOM
🌟 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); //true
console.log(window.hasOwnProperty('setInterval')); //true,hasOwnProperty返回是否具有指定名称的属性/方法
window.setInterval(function () { //可以用window打点调用内置函数
console.log('你好')
}, 2000);
window中关于窗口尺寸相关属性
获得不包含滚动条的窗口宽度,要用documnet.documentElement.clientWidth
示例代码:获得窗口的内宽、外宽、不包含滚动条的内宽
console.log("浏览器内宽(包含滚动条):" + window.innerWidth);
console.log("浏览器外宽:" + window.outerWidth);
console.log("浏览器内宽(不包含滚动条):" + document.documentElement.clientWidth);
当浏览器窗口最大化时,浏览器内宽和浏览器外宽值是一样的(都不包含浏览器的边框),当把浏览器窗口缩小,浏览器的外宽就会大一些,因为多了一个浏览器的边框:
当窗口最大化时:
当窗口缩小时:
resize事件
示例代码:给窗口改变尺寸添加事件监听
//监听窗口尺寸改变
window.onresize = function () {
console.log("浏览器窗口的内高:" + window.innerHeight);
console.log("浏览器窗口的外高:" + window.outerHeight);
};
已卷动高度
在实际工作中,考虑到浏览器之间的兼容性,在得到已滚动的像素值时,通常会这么写:
var scrollTop = window.scrollY || document.documentElement.scrollTop; //当浏览器支持window.scrollY时,就取window.scrollY值,如果不支持,则取document.documentElement.scrollTop值
window.scrollY和document.documentElement.scrollTop区别:
示例代码:
var scrollTop = window.scrollY || document.documentElement.scrollTop;
console.log("窗口已卷动高度:" + scrollTop);
scroll事件
示例代码:
//监听窗口卷动高度
window.onscroll = function () {
console.log("窗口卷动了:" + window.scrollY);
};
scroll事件监听在某些特定场景是非常常用的,比如实现H5页面中的落地页等
🌟 navigator对象
navigator
:航行者、领航员、驾驶员
示例代码:
console.log("浏览器品牌:" + navigator.appName);
console.log("浏览器版本:" + navigator.appVersion);
console.log("浏览器用户代理:" + navigator.userAgent);
console.log("浏览器用户操作系统:" + navigator.platform);
🌟 history对象
history
:历史
示例代码:比如从一个列表页点击进入详情页,详情页中有一个“返回列表页”的按钮,点击可直接返回列表页
<!--列表页-->
<body>
<h1>列表页</h1>
<div>
<ul>
<li><a href="BOM_history_详情页.html">点击查看详情</a></li>
</ul>
</div>
</body>
<!--详情页-->
<body>
<p>详情页</p>
<button id="back">返回列表页</button>
<script>
var back = document.getElementById('back');
back.onclick = function () {
history.back(); //或者history.go(-1)
};
</script>
</body>
🌟 location对象
location
:地址
示例代码:页面上新增按钮,分别可以实现跳转到百度、刷新本页面
<body>
<div>
<a href="" script="javascript:window.location.reload(true)">刷新页面</a>
<button id="btn">点我去百度</button>
</div>
<script>
var btn = document.getElementById('btn');
btn.onclick = function () {
// window.location = 'https://www.baidu.com';
window.location.href = 'https://www.baidu.com';
};
</script>
</body>