BOM学习

BOM

主要来源菜鸟教程 http://www.runoob.com/
前端学习网站 http://how2j.cn/k/javascript/javascript-bom-timing/455.html#nowhere

BOM即浏览器对象模型(Browser Object Model) 浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。

浏览器对象包括 Window(窗口)

Navigator(浏览器)

[Screen (客户端屏幕)]

[History(访问历史)]

Location(浏览器地址)

window

所有浏览器都支持 window 对象。它表示浏览器窗口。一旦页面加载，就会自动创建window对象，所以无需手动创建window对象。大部分window方法可不带window

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

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

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

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

window.document.getElementById("header");

与此相同：

document.getElementById("header");

一些其他方法：

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
outerWidth 外部窗体即浏览器
screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。

window.location

window.location 对象在编写时可不使用 window 这个前缀。一些例子：

一些实例:

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）
reload 刷新页面

Window Location Assign

location.assign() 方法加载新的文档(跳转)。
```
function newDoc()   {   window.location.assign("http://www.w3cschool.cc")   } 
```

window.history

history.back() - 与在浏览器点击后退按钮相同，加载历史列表中的前一个 URL 【可以在页面上创建后退按钮】
history.forward() - 与在浏览器中点击向前按钮相同
history.go(-2); //-1表示上次，-2表示上上次，以次类推

window.navigate

来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：

navigator 数据可被浏览器使用者更改
一些浏览器对测试站点会识别错误
浏览器无法报告晚于浏览器发布的新操作系统

三种窗口

可以在 JavaScript 中创建三种消息框：警告框（alert)、确认框(confirm)、提示框(prompt)。

window.prompt("sometext","defaultvalue");

计时事件

JavaScript 一个设定的时间间隔之后来执行代码，我们称之为计时事件

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

间隔多少秒重复执行

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。

window.setInterval("javascript function",milliseconds);

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

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

第二个参数间隔的毫秒数

注意: 1000 毫秒是一秒。

不要在setInterval调用的函数中使用document.write();

部分浏览器，比如firefox有这个问题，其他浏览器没这个问题。假设setInterval调用的函数是printTime, 在printTime中调用document.write(); 只能看到一次打印时间的效果。这是因为document.write，会创建一个新的文档，而新的文档里，只有打印出来的时间字符串，并没有setInterval这些javascript调用，所以只会看到执行一次的效果。

用页面显示一个时钟


页面上显示时钟：

间隔多少秒执行一次

setTimeout() - 在指定的毫秒数后执行指定代码。

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

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

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

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

点击第一个按钮等待3秒后出现"Hello"弹框。
点击第二个按钮来阻止第一个函数运行。（你必须在3秒之前点击它）。

Cookie

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

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

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

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

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

username=John Doe

当浏览器从服务器上请求 web 页面时，属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。

JS 对cookie的增删改查

JavaScript 可以使用 document.cookie 属性来创建、读取、及删除 cookie。

JavaScript 中，创建 cookie 如下所示：

document.cookie="username=John Doe";

您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

使用 JavaScript 读取 Cookie

在 JavaScript 中, 可以使用以下代码来读取 cookie：

var x = document.cookie;

Note	document.cookie 将以字符串的方式返回所有的 cookie，类型格式： cookie1=value; cookie2=value; cookie3=value;

使用 JavaScript 修改 Cookie

在 JavaScript 中，修改 cookie 类似于创建 cookie，如下所示：

document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

旧的 cookie 将被覆盖。

使用 JavaScript 删除 Cookie

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

注意，当您删除时不必指定 cookie 的值。

设置检测使用cookie实例





菜鸟教程(runoob.com)