第4章 浏览器对象模型(BOM)

浏览器对象模型（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 屏幕色彩饱和度