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