BOM即 浏览器对象模型(Browser Object Model)
浏览器对象包括
- Window(窗口)
- Navigator(浏览器)
- Screen (客户端屏幕)
- History(访问历史)
- Location(浏览器地址)
Window(窗口)
<script> function open(){ myWindow=window.open("http://www.baidu.com"); } document.write("文档内容"); document.write("文档显示区域的宽度"+window.innerWidth); document.write("<br>"); document.write("文档显示区域的高度"+window.innerHeight); document.write("<br>"); document.write("浏览器的宽度:"+window.outerWidth); document.write("<br>"); document.write("浏览器的高度:"+window.outerHeight); document.write("<br>"); </script> <button onclick="open()">打开一个新窗口</button>
Navigator
Navigator即浏览器对象，提供浏览器相关的信息
<script type="text/javascript"> document.write("<p>浏览器产品名称："); document.write(navigator.appName + "</p>"); document.write("<p>浏览器版本号："); document.write(navigator.appVersion + "</p>"); document.write("<p>浏览器内部代码："); document.write(navigator.appCodeName + "</p>"); document.write("<p>操作系统："); document.write(navigator.platform + "</p>"); document.write("<p>是否启用Cookies："); document.write(navigator.cookieEnabled + "</p>"); document.write("<p>浏览器的用户代理报头："); document.write(navigator.userAgent + "</p>"); </script>
Screen
Screen对象表示用户的屏幕相关信息
如果是在台式电脑上，通常看到的可用区域的高度会比屏幕高度小一点，因为有任务栏的存在。（从里到外依次：window,navigator,screen,分别差了浏览器头部，和系统菜单栏）
<html> <body> <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 />") </script> </body> </html>
History用于记录访问历史
- 返回上一次的访问
<script> function goBack() { history.back(); } </script> <button onclick="goBack()">返回</button>
- 返回上上次的访问
<script> function goBack() { history.go(-2); //-1表示上次，-2表示上上次，以次类推 } </script> <button onclick="goBack()">返回上上次</button>
Location表示浏览器中的地址栏
示例 1 : reload方法刷新当前页面
<span>当前时间:</span> <script> var d = new Date(); document.write(d.getHours()); document.write(":"); document.write(d.getMinutes()); document.write(":"); document.write(d.getSeconds()); document.write(":"); document.write(d.getMilliseconds()); function refresh(){ location.reload(); } </script> <br> <button onclick="refresh()">刷新当前页面</button>
示例 2 : 跳转到另一个页面
<script> function jump(){ //方法1 //location="/"; //方法2 location.assign("/"); } </script> <br> <button onclick="jump()">跳转到首页</button>
示例 3: Location的其他属性
<script> function p(s){ document.write(s); document.write("<br>"); } p("协议 location.protocol:"+location.protocol); p("主机名 location.hostname:"+location.hostname); p("端口号 (默认是80，没有即表示80端口)location.port:"+location.port); p("主机加端口号 location.host: "+location.host); p("访问的路径 location.pathname: "+location.pathname); p("锚点 location.hash: "+location.hash); p("参数列表 location.search: "+location.search); </script>