前端基础：JavaScript BOM对象
Posted 月缺一格
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端基础：JavaScript BOM对象相关的知识，希望对你有一定的参考价值。
javascript BOM对象
JavaScript Window - 浏览器对象模型
浏览器对象模型(BOM)使JavaScript有能力与浏览器"对话"。
浏览器对象模型(BOM)
浏览器对象模型(Browser Object Model：BOM)尚无正式标准，由于现代浏览器已经几乎实现了JavaScript交互性方面的相同方法和属性，因此常被认为是BOM的方法和属性。
Window对象
所有浏览器都支持window对象，它表示浏览器窗口。所有JavaScript全局对象、函数以及变量均自动称为window对象的成员。全局变量是window对象的属性，全局函数是window对象的方法，甚至html DOM的document也是window对象的属性之一：
window.document.getElementById("header");与此相同：
document.getElementById("header");Window尺寸
有三种方法能够确定浏览器窗口的尺寸，对于IE、Chrome、FireFox、Opera语句Safari：
- window.innerHeight：浏览器窗口的内部高度(包括滚动条)
- window.innerWidth：浏览器窗口的内部宽度(包括滚动条)
对于IE8、7、6、5：
- document.documentElement.clientHeight
- document.documentElemetn.clientWidth
或者
- document.body.clientHeight
- document.body.clientWidth
实用的JavaScript方案(涵盖所有浏览器)：
var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;其他Window方法
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸JavaScript Window Screen
widow.screen对象包含有关用户屏幕的信息。
Window Screen
window.screen对象在编写时可以不使用window这个前缀，其属性有：
- screen.availWidth：可用的屏幕宽度
- screen.availHeight：可用的屏幕高度
Window Screen 可用宽度
screen.availWidth属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏：
<script>
document.write("可用宽度: " + screen.availWidth); // 返回屏幕可用宽度：1920
</script>Window Screen 可用高度
scree.availHeight属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏：
<script>
document.write("可用高度: " + screen.availHeight); // 返回屏幕可用高度：1040
</script>JavaScript Window Location
window.location对象用于获取当前页面的地址(URL)，并把浏览器重定向到新的页面。
Window Location
window.location对象在编写时可不使用window这个前缀，如下例子：
- location.hostname：返回web主机的域名；
- location.pathname：返回当前页面的路径和文件名；
- location.port：返回web主机的端口(80或443)；
- location.protocol：返回所使用web协议(http://或https://)；
Window Location Href
location.href属性返回当前页面的URL：
<script>
document.write(location.href); // 返回当前页面的整个URL：https://www.baidu.com/
</script>Window Location Pathname
location.pathname属性返回URL的路径名：
<script>
document.write(location.pathname); // 返回当前URL的路径名：/
</script>Window Location Assign
location.assign()方法加载新的文档：
<html>
<head>
<script>
function newDoc()
{
window.location.assign("http://www.w3cschool.cc"); // 加载一个新的文档
}
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
</body>
</html>JavaScript Window History
window.history对象包含浏览器的历史。
Window History
window.history对象在编写时可不使用window这个前缀，为了保护用户隐私，对JavaScript访问该对象的方法做出了限制：
- history.back()：与在浏览器中点击后退按钮相同；
- history.forward()：与在浏览器中点击向前按钮相同；
Window History Back
history.back()方法加载历史列表中的前一个URL，这与在浏览器中点击后退按钮是相同的：
<html>
<head>
<script>
function goBack()
{
window.history.back(); // 在页面上创建后退按钮
}
</script>
</head>
<body>
<input type="button" value="Back" onclick="goBack()">
</body>
</html>Window History Forward
history.forward()方法加载历史列表中的下一个URL，这与在浏览器中点击前进按钮是相同的：
<html>
<head>
<script>
function goForward()
{
window.history.forward(); // 在页面中创建一个向前的按钮
}
</script>
</head>
<body>
<input type="button" value="Forward" onclick="goForward()">
</body>
</html>JavaScript Window Navigator
window.navigator对象包含有关访问者浏览器的信息。
Window Navigator
window.navigator对象在编写时可不使用window这个前缀：
<div id="example"></div>
<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script> 警告
来自navigator对象的信息有误导性，不应该被用于检测浏览器版本，这是因为：
- navigator数据可以被浏览器使用者更改；
- 一些浏览器对测试站点会识别错误；
- 浏览器无法报告晚于浏览器发布的新操作系统；
浏览器检测
由于navigator可误导浏览器检测，使用对象检测可用来嗅探不同的浏览器。由于不同的浏览器支持不同的对象，我们可以使用对象来检测浏览器。例如：由于只有Opera支持属性"window.opera"，可以据此识别出Opera。
if (window.opera) {...some action...}JavaScript 弹窗
以上是关于前端基础：JavaScript BOM对象的主要内容，如果未能解决你的问题，请参考以下文章