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 列表中的某个具体页面 |
<!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>
<!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>
<!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>
