浏览器对象模型 (BOM)
浏览器对象模型(Browser Object Model (BOM))尚无正式标准。
由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是 BOM 的方法和属性。
Window 对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一:
与此相同:
Window 尺寸
有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
- window.innerHeight - 浏览器窗口的内部高度
- window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5:
- document.documentElement.clientHeight
- document.documentElement.clientWidth
或者
- document.body.clientHeight
- document.body.clientWidth

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <p id="demo"></p> 9 <script> 10 var w=window.innerWidth 11 || document.documentElement.clientWidth 12 || document.body.clientWidth; 13 14 var h=window.innerHeight 15 || document.documentElement.clientHeight 16 || document.body.clientHeight; 17 18 x=document.getElementById("demo"); 19 x.innerHTML="Browser inner window "+w+"<br>"+"Browser inner window height: "+h; 20 </script> 21 </body> 22 </html>
其他 Window 方法
一些其他方法:
- window.open() - 打开新窗口
- window.close() - 关闭当前窗口
- window.moveTo() - 移动当前窗口
- window.resizeTo() - 调整当前窗口的尺寸
Window Screen
window.screen对象在编写时可以不使用 window 这个前缀。
一些属性:
- screen.availWidth - 可用的屏幕宽度
- screen.availHeight - 可用的屏幕高度

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <script> 9 document.write("Available "+screen.availWidth+"<br>"); 10 document.write("Availabe height: "+ screen.availHeight); 11 </script> 12 </body> 13 </html>
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://)

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <script> 9 //document.write(location.href+"<br>"); 10 //document.write(location.pathname); 11 function newDoc() 12 { 13 window.location.assign("http://www.cnblogs.com"); 14 } 15 </script> 16 17 <button type="button" value="load new document" onclick="newDoc()">click me</button> 18 </body> 19 </html>
JavaScript Window History
window.history 对象包含浏览器的历史。
Window History
window.history对象在编写时可不使用 window 这个前缀。
为了保护用户隐私,对 JavaScript 访问该对象的方法做出了限制。
一些方法:
- history.back() - 与在浏览器点击后退按钮相同
- history.forward() - 与在浏览器中点击按钮向前相同
Window History Back
history.back() 方法加载历史列表中的前一个 URL。
这与在浏览器中点击后退按钮是相同的

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script> 7 function goBack() 8 { 9 window.history.back(); 10 } 11 function forward() 12 { 13 window.history.forward(); 14 } 15 </script> 16 </head> 17 <body> 18 <input type="button" value="Back" onclick="goBack()"> 19 <input type="button" value="forward" onclick="forward()"> 20 </body> 21 </html>
JavaScript Window Navigator
window.navigator 对象包含有关访问者浏览器的信息。
Window Navigator
window.navigator 对象在编写时可不使用 window 这个前缀

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="demo"></div> 9 10 <script> 11 txt="<p>Browser CodeName: "+navigator.appCodeName+"</p>"; 12 txt+= "<p>Browser Name: " + navigator.appName + "</p>"; 13 txt+= "<p>Browser Version: " + navigator.appVersion + "</p>"; 14 txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>"; 15 txt+= "<p>Platform: " + navigator.platform + "</p>"; 16 txt+= "<p>User-agent header: " + navigator.userAgent + "</p>"; 17 txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>"; 18 19 document.getElementById("demo").innerHTML=txt; 20 </script> 21 </body> 22 </html>
警告!!!
来自 navigator 对象的信息具有误导性,不应该被用于检测浏览器版本,这是因为:
- navigator 数据可被浏览器使用者更改
- 一些浏览器对测试站点会识别错误
- 浏览器无法报告晚于浏览器发布的新操作系统
浏览器检测
由于 navigator 可误导浏览器检测,使用对象检测可用来嗅探不同的浏览器。
由于不同的浏览器支持不同的对象,您可以使用对象来检测浏览器。例如,由于只有 Opera 支持属性 "window.opera",您可以据此识别出 Opera。
例子:if (window.opera) {...some action...}
JavaScript 计时事件
通过使用 JavaScript,我们有能力作到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScritp 中使用计时事件是很容易的,两个关键方法是:
- setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
- setTimeout() - 暂停指定的毫秒数后执行指定的代码
Note: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法
setInterval() 方法
setInterval() 间隔指定的毫秒数不停地执行指定的代码
语法
window.setInterval() 方法可以不使用window前缀,直接使用函数setInterval()。
setInterval() 第一个参数是函数(function)。
第二个参数间隔的毫秒数
注意: 1000 毫秒是一秒。
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
语法
window.clearInterval() 方法可以不使用window前缀,直接使用函数clearInterval()。
要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量
setTimeout() 方法
语法
setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')",或者对函数的调用,诸如 alertMsg()"。
第二个参数指示从当前起多少毫秒后执行第一个参数
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。
语法
window.clearTimeout() 方法可以不使用window 前缀。
要使用clearTimeout() 方法, 你必须在创建超时方法中(setTimeout)使用全局变量:
如果函数还未被执行,你可以使用 clearTimeout() 方法来停止执行函数代码

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <button onclick="getTime()">get</button> 9 <button onclick="stopTime()">stop</button> 10 <p id="demo"></p> 11 <!-- 12 <script> 13 var myvar=setInterval(function(){myTime()},1000) 14 function myTime() 15 { 16 var d=new Date(); 17 var t= d.toLocaleString(); 18 document.getElementById("demo").innerHTML=t; 19 } 20 21 function stopTime() 22 { 23 clearInterval(myvar) 24 } 25 </script> 26 --> 27 <script> 28 var myvar; 29 function getTime() 30 { 31 myvar=setTimeout(function (){alert("hello")},3000); 32 } 33 function stopTime() 34 { 35 clearTimeout(myvar); 36 } 37 </script> 38 </body> 39 </html>
JavaScript Cookies
Cookies 用于存储 web 页面的用户信息。
什么是 Cookies?
Cookies 是一些数据, 存储于你电脑上的文本文件中。
当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息。
Cookies 的作用就是用于解决 "如何记录客户端的用户信息":
- 当用户访问 web 页面时,他的名字可以记录在 cookie 中。
- 在用户下一次访问该页面时,可以在 cookie 中读取用户访问记录。
Cookies 以名/值对形式存储,如下所示:
当浏览器从服务器上请求 web 页面时, 属于该页面的 cookies 会被添加到该请求中。服务端通过这种方式来获取用户的信息。

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script> 7 function setCookie(cname,cvalue,exdays) 8 { 9 var d=new Date(); 10 d.setTime(d.getTime()+(exdays*24*60*60*1000)); 11 var expires="expires="+ d.toGMTString(); 12 document.cookie=cname + "=" + cvalue + ";" + expires; 13 } 14 function getCookie(cname) 15 { 16 var name=cname+"="; 17 var ca=document.cookie.split(';'); 18 for (var i=0;i<ca.length;i++) 19 { 20 var c=ca[i].trim(); 21 if (c.indexOf(name)==0) return c.substring(name.length, c.length); 22 } 23 return ""; 24 } 25 function checkCookie() 26 { 27 var username=getCookie("username"); 28 if (username!="") 29 { 30 alert("welcome again"+username); 31 } 32 else 33 { 34 username=prompt("please enter your name: "); 35 if (username!="" && username!=null) 36 { 37 setCookie("username",username,365); 38 } 39 } 40 } 41 </script> 42 </head> 43 <body onload="checkCookie()"> 44 45 </body> 46 </html>