js BOM 笔记

浏览器对象模型 (BOM)

文章摘自：http://www.runoob.com/

浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。

由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。

Window 对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：

window.document.getElementById("header");

与此相同：

document.getElementById("header");

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>

View Code

其他 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>

View Code

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>

View Code

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>

View Code

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>

View Code

警告!!!

来自 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("javascript function",milliseconds);

window.setInterval() 方法可以不使用window前缀，直接使用函数setInterval()。

setInterval() 第一个参数是函数（function）。

第二个参数间隔的毫秒数

注意: 1000 毫秒是一秒。

clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

语法

window.clearInterval(intervalVariable)

window.clearInterval() 方法可以不使用window前缀，直接使用函数clearInterval()。

要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量

setTimeout() 方法

语法

window.setTimeout("javascript 函数",毫秒数);

setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。

setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。

第二个参数指示从当前起多少毫秒后执行第一个参数

clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

语法

window.clearTimeout(timeoutVariable)

window.clearTimeout() 方法可以不使用window 前缀。

要使用clearTimeout() 方法, 你必须在创建超时方法中（setTimeout）使用全局变量:

myVar=setTimeout("javascript function",milliseconds);

如果函数还未被执行，你可以使用 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>

View Code

JavaScript Cookies

Cookies 用于存储 web 页面的用户信息。

什么是 Cookies？

Cookies 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

Cookies 的作用就是用于解决 "如何记录客户端的用户信息":

当用户访问 web 页面时，他的名字可以记录在 cookie 中。
在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

Cookies 以名/值对形式存储，如下所示:

username=John Doe

当浏览器从服务器上请求 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>

View Code