浏览器对象模型（BOM）是window对象中的四个属性，它们描述浏览器自身的一些属性和操作，与网页内容无关的。
BOM对象主要有四个
- history
浏览器的浏览历史 - location
浏览器的地址栏 - navigator
浏览器的内核信息 - screen
浏览器的显示信息
正常情况下，调用BOM对象的方式
window.history
也可以省略“window.”，直接调用BOM
history
1. history
history对象描述的浏览器的浏览历史，可操作性的API
| 函数 | 功能 | 示例 |
|---|---|---|
| history.back() | 相当于点击了浏览器的后退按钮 | history.back()； |
| history.forward() | 相当于点击了浏览器的前进按钮 | history.forward()； |
| history.go(n) | 前进或后退n次，如果n=0可以理解是刷新页面 | history.go(-1); |
<input type="button" value="返回" onclick="history.back();">
2. location
location对象操作浏览器的地址栏，相当于操作网页的url
2.1 获取服务器主机属性
- location.protocol
返回所使用的 web 协议（http:// 或 https://） - location.host
返回web主机的域名+端口 - location.hostname
返回 web 主机的域名 - location.port
返回 web 主机的端口 （80 或 443） - location.pathname
返回当前页面的路径和文件名 - location.href
返回完整的url路径
alert("协议："+location.protocol);
alert("IP+PORT："+location.host);
alert("IP："+location.hostname);
alert("PORT："+location.port);
alert("路径："+location.pathname);
alert("完整路径："+location.href);
2.2 网页跳转
通过重新设置location.href的值，设定在当前页面进行页面跳转
示例：在当前页面跳转至百度页面
location.href = "http://www.baidu.com";
2.3 刷新页面
location.reload();
相当于点击了“刷新”
location.reload();
3. navigator
navigator获取浏览器的内核信息
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";
一般用于通过JS判断早期的IE版本
在navigator.userAgent项目中，如果是IE6，IE7，IE8其中会有一段“MSIE6.0/“MSIE7.0/“MSIE8.0”
var str = navigator.userAgent;
if(str.indexOf("MSIE7.0")){
alert("IE-7浏览器")
}
4. screen
- screen.width
屏幕宽度 - screen.height
屏幕高度 - screen.availWidth
屏幕可用宽度 - screen.availHeight
屏幕可用高度 - screen.colorDepth
屏幕色彩饱和度
网友评论