阅读这篇博文前,请先阅读我的上一篇博文JS之BOM详解(上)
4、location:里面封装当前窗口打开的url
常用的方法:
console.log(location);
console.log(location.href);//完整的URL路径
console.log(location.protocol);//协议名
console.log(location.hostname);//主机名
console.log(location.port);//端口号
console.log(location.host);//主机名+端口号
console.log(location.pathname);//文件路径
console.log(location.search);//从?开始的参数部分
console.log(location.hash);//从#开始的锚点部分
下面给出一个实例,大家理解一下,就是获取地址栏的分段部分信息
5、screen : 显示设备的信息
- height;屏幕的像素高度
- width;屏幕的像素宽度
- availHeight;屏幕的像素高度减去系统部件高度之后的值(只读)
- availWidth;屏幕的像素宽度减去系统部件宽度之后的值(只读)
- availLeft;未被系统部件占用的最左侧的像素值(只读)[chrome和firefox返回0,IE不支持]
- availTop;未被系统部件占用的最上方的像素值(只读)[chrome和firefox返回0,IE不支持]
6、navigator : 提供了与浏览器有关的信息
- appCodeName;浏览器的代码名。
- appName;完整的浏览器名称。
- appVersion;浏览器的平台和版本信息。
- userAgent;包含浏览器的名称、内核、版本号等。
- plugins;检测有无插件。
- onLine;表示是否连接到了因特网。
三、怎么去使用BOM?
我们用上面的navigator.plugins来检查浏览器是否有此插件 下面用个实例检测浏览器是否有插件腾讯视频
<script>
// Plugin:插件
function fun(pname){
var plugin = navigator.plugins;
for(var i =0;i<plugin.length;i++){
if(plugin[i].name == pname ){
return true;
}
}
return false
}
console.log(fun("腾讯视频"));
</script>
返回的是一个false,相当于浏览器中无“腾讯视频”插件
小技巧: plugins属性中有一个refresh方法,它可以接受一个布尔值 这个方法的作用,是刷新插件库,以返回最新安装的插件,接收的参数是判断是否要刷新浏览器页面参数为true时,刷新插件库的同时,刷新包含插件的所有页面为false时,只刷新插件库,不刷新页面。
BOM 浏览器对象模型window 对象的常见window.属性 window.方法
常用属性:
window.scrollX,window.scrollY 滚动条 卷曲距离
获取浏览器组件对象
window.locationbar 地址栏对象
window.menubar 菜单栏对象
window.scrollbars 窗口的滚动条对象
window.toolbar 工具栏对象
window.statusbar 状态栏对象
window.personalbar 用户安装的个人工具栏对象
全局对象属性:
window.document 指向 document 对象
window.location 指向 Location对象,用于获取当前窗口的 URL 信息。它等同于 document.location 属性
window.navigator 指向 Navigator 对象,用于获取环境信息
window.history 指向 History 对象,表示浏览器的浏览历史
window.localStorage 指向本地储存的localStorage 数据
window.sessionStorage 指向本地储存的sessionStorage 数据
window.console 指向 console 对象,用于操作控制台
window.screen 指向 Screen 对象,表示屏幕信息