js BOM 笔记
浏览器对象模型 (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 width: "+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 width: "+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>