BOM浏览器对象模型

前言

任何文件都需要使用特定的方式打开，比如 .doc文件需要word、WPS来打开。
虚拟机：任何语言编辑的程序都需要一个虚拟机来执行，如果脱离这个环境就不能执行。
运行时（runtime）：百度解释为虚拟机的一种，一般指进程级别的虚拟机。在运行过程中不断地处理程序。
同一款浏览器在不同的系统中，属性值是不同的。
在同一个系统中，不同的浏览器，属性都有不同。
BOM是有兼容性问题，DOM也是有兼容问题的。
ECMAScript 这个是属于各浏览器完全兼容的，只不过版本过低的浏览器不支持ES6以上。
chrome浏览器的引擎是V8引擎，针对 JavaScript 开发的引擎，使用C++来开发。

BOM 树型结构

Browser Object Model 浏览器对象模型
BOM的根是window

BOM的对象

window.documnet 文档
window.location 本地信息
window.history 历史
window.screen 浏览器所在的屏幕
window.navigator 浏览器的信息

window对象

open()
close()
innerHeight、innerWidth
outerheight、outerWidth
screenLeft、screenTop
screenX、screenY

//window.alert("aa");
//var a=5;
//window.a;
//this
open("http://www.163.com)","网易","width：300,height=300;);//弹窗，现在基本被拦截，基本不用
document.onclick=function(){
    close();//关闭窗口
}

console.log(innerWidth;innerHeight);//浏览器可视文档窗口的宽度和高度，包含滚动条宽度
console.log(outerWidth,outerHeight);//如果是全屏，宽度和上面相同，如果不是全屏，宽度就包含阴影宽度;整个浏览器的高度
//以下两个值都表示浏览器窗口距离屏幕左上顶点的距离，只读数据
console.log(screenLeft,screenTop);
console.log(screenX,screenY);

location对象

location.reload() 重载页面
location.href、location.assign()、location.replace() 页面跳转
location.hash 获取url中#后的字符串，如果没有，则返回空字符串。
location.search 获取url中?后的字符串，如果没有，则返回空字符串。
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）

//重载刷新当前页面
location.reload();
//location.href 除了可以设置跳转，也可以获取当前页面的地址，可以产生历史记录
location.href="http://www.baidu.com";
//location.assign()只能设置跳转，可以产生历史记录
location.assign("http://www.baidu.com");
//location.replace()替换当前页面的地址，不能产生历史记录
location.replace("http://www.baidu.com");
//获取url中#后的字符串，如果没有，则返回空字符串。 
console.log(location.hash);
//获取url中?后的字符串，如果没有，则返回空字符串。 
console.log(location.search);
//返回 web 主机的域名
console.log(location.hostname);
//返回当前页面的路径和文件名 
console.log(location.pathname);
//返回 web 主机的端口 （80 或 443）
console.log(location.port);
//返回所使用的 web 协议（http:// 或 https://）
console.log(location.protocol);

history对象

history.back 向后退一页
history.forward 向前进一页
history.go(0) 刷新页面
history.go(-1) 向后退一页
history.go(1) 向前进一页
history.go(2) 向前进两页
history.length 属性返回历史列表中的网址数

history.back;//向后退一页
history.forward;//向前进一页
history.go(0);//刷新页面
history.go(-1);//向后退一页
history.go(1);//向前进一页
history.go(2);//向前进两页
history.length;//属性返回历史列表中的网址数

screen对象

screen.availHeight,screen.availWidth 电脑屏幕的宽高像素减去系统部件宽高之后的值
screen.height,screen.width 电脑屏幕的高度和宽度

//电脑屏幕的宽高像素减去系统部件宽高之后的值
console.log(screen.availHeight,screen.availWidth);
//电脑屏幕的高度和宽度
console.log(screen.height,screen.width);

navigator对象

navigator.userAgent 返回由客户机发送服务器的 user-agent 头部的值
navigator.appName 返回浏览器的名称。
navigator.appVersion 返回浏览器的平台和版本信息。
navigator.platform 返回运行浏览器的操作系统平台。

console.log(navigator.userAgent);//返回由客户机发送服务器的 user-agent 头部的值
//Firefox打印出 Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:71.0) Gecko/20100101 Firefox/71.0
//chrome打印出  Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36
//360安全浏览器 Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36

console.log(navigator.appName);//返回浏览器的名称。
//Firefox打印出  Netscape
//chrome打印出   Netscape
//360安全浏览器  Netscape

console.log(navigator.appVersion);//返回浏览器的平台和版本信息。
//Firefox打印出   5.0(windows)
//chrome打印出    5.0(Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36
//360安全浏览器   5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36

console.log(navigator.platform);//返回运行浏览器的操作系统平台。
//Firefox打印出  Win32
//chrome打印出   Win32
//360安全浏览器  Win32

来源：CSDN

作者：蒲公英芽

链接：https://blog.csdn.net/Charissa2017/article/details/103815212

标签

谷歌浏览器

location