1.BOM-Screen对象
window.screen 对象包含有关用户屏幕的信息。window.screen对象在编写时可以不使用 window 这个前缀。
属性 | 说明 |
availHeight | 返回屏幕的高度（不包括Windows任务栏） |
availWidth | 返回屏幕的宽度（不包括Windows任务栏） |
colorDepth | 返回目标设备或缓冲器上的调色板的比特深度 |
height | 返回屏幕的总高度 |
pixelDepth | 返回屏幕的颜色分辨率（每象素的位数） |
width | 返回屏幕的总宽度 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JS简单学习</title>
</head>
<body>
<h3>你的屏幕:</h3>
<script type="text/javascript">
document.write("总宽度/高度: ");
document.write(screen.width + "*" + screen.height);
document.write("<br />");
document.write("可以宽度/高度: ");
document.write(screen.availWidth + "*" + screen.availHeight);
document.write("<br />");
document.write("颜色深度: ");
document.write(screen.colorDepth);
document.write("<br />");
document.write("颜色分辨率: ");
document.write(screen.pixelDepth);
</script>
</body>
</html>
2.BOM-Navigator对象
window.navigator 对象包含有关访问者浏览器的信息。window.navigator 对象在编写时可不使用 window 这个前缀。
属性 | 说明 |
appCodeName | 返回浏览器的代码名 |
appName | 返回浏览器的名称 |
appVersion | 返回浏览器的平台和版本信息 |
cookieEnabled | 返回指明浏览器中是否启用 cookie 的布尔值 |
platform | 返回运行浏览器的操作系统平台 |
userAgent | 返回由客户机发送服务器的user-agent 头部的值 |
方法 | 描述 |
javaEnabled() | 指定是否在浏览器中启用Java |
taintEnabled() | 规定浏览器是否启用数据污点(data tainting) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS简单学习</title>
</head>
<body>
<div id="example"></div>
<script type="text/javascript">
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.language + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
</body>
</html>
3.BOM-History对象
window.history 对象包含浏览器的历史。window.history对象在编写时可不使用 window 这个前缀。
为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。一些方法：
- history.back() - 与在浏览器点击后退按钮相同
- history.forward() - 与在浏览器中点击向前按钮相同
属性 | 说明 |
length | 返回历史列表中的网址数 |
方法 | 说明 |
back() | 加载 history 列表中的前一个 URL |
forward() | 加载 history 列表中的下一个 URL |
go() | 加载 history 列表中的某个具体页面 |
3.1 back()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS简单学习</title>
</head>
<body>
<input type="button" value="返回" onclick="goBack()" />
<br /><br />
<script type="text/javascript">
function goBack() {
window.history.back();
}
document.write("历史列表中URL的数量： " + history.length);
</script>
<p>注意,点击后退按钮在这里不会导致任何行动,因为以前的历史列表中没有该URL</p>
</body>
</html>
3.2 forward()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS简单学习</title>
<script type="text/javascript">
function goForward() {
window.history.forward();
}
</script>
</head>
<body>
<input type="button" value="前进" onclick="goForward()" />
<br />
<p>注意,点击这里的前进按钮不会导致任何行动,因为历史列表中没有下一个URL。</p>
</body>
</html>
3.3 go()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS简单学习</title>
<script type="text/javascript">
function goBack() {
window.history.go(-2);
}
</script>
</head>
<body>
<input type="button" value="后退2页" onclick="goBack()" />
<p>注意,点击“后退2页”按钮将不会导致任何行动,因为以前的历史列表中没有URL。</p>
</body>
</html>
