js的BOM

Window 对象

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

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

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

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

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

window.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

实用的 JavaScript 方案（涵盖所有浏览器）：

<p id="demo"></p>
<script>
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
x=document.getElementById("demo");
x.innerHTML="浏览器window宽度: " + w + ", 高度: " + h + "。"
</script>

其他 Window 方法

一些其他方法：

• window.open() - 打开新窗口
• window.close() - 关闭当前窗口
• window.moveTo() - 移动当前窗口
• window.resizeTo() - 调整当前窗口的尺寸

• 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://）

location.href 属性返回当前页面的 URL。    http://www.runoob.com/js/js-window-location.html

location.pathname 属性返回 URL 的路径名。 /js/js-window-location.html

location.assign() 方法加载新的文档。window.location.assign("http://www.w3cschool.cc")

window.history 对象包含浏览器的历史。

window.history对象在编写时可不使用 window 这个前缀。

为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

一些方法：

• history.back() - 与在浏览器点击后退按钮相同
• history.forward() - 与在浏览器中点击按钮向前相

window.navigator 对象包含有关访问者浏览器的信息。

JavaScript 弹窗

---

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

警告框

警告框经常用于确保用户可以得到某些信息。

当警告框出现后，用户需要点击确定按钮才能继续进行操作。

语法window.alert("sometext");

确认框

确认框通常用于验证是否接受用户操作。

当确认卡弹出时，用户可以点击 "确认" 或者 "取消" 来确定用户操作。

当你点击 "确认", 确认框返回 true， 如果点击 "取消", 确认框返回 false。

语法

window.confirm(" sometext");

window.confirm() 方法可以不带上window对象，直接使用confirm()方法。

<p>点击按钮，显示确认框。</p>
<button οnclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var r=confirm("按下按钮!");
if (r==true){
x="你按下了\"确定\"按钮!";
}
else{
x="你按下了\"取消\"按钮!";
}
document.getElementById("demo").innerHTML=x;
}

提示框

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

语法

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

window.prompt() 方法可以不带上window对象，直接使用prompt()方法。

<p>点击按钮查看输入的对话框。</p>
<button οnclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var person=prompt("请输入你的名字","lisa");    如果带上lisa 则输入框中会有默认值lisa  没有这个参数 输入框为空
if (person!=null && person!=""){
   x="你好 " + person + "! 今天感觉如何?";
   document.getElementById("demo").innerHTML=x;
}
}

弹窗使用 \n 来设置换行。 alert("Hello\nHow are you?");

JavaScript 计时事件

setInterval() 间隔指定的毫秒数不停地执行指定的代码   语法：  window.setInterval("javascript function",milliseconds);

<p>在页面显示一个时钟</p>
<p id="demo"></p>
<script>
var myVar=setInterval(function(){myTimer()},1000);   第一个参数必须这么用 不能为myTimer()     
function myTimer(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
</script>

如何停止执行?

clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。 语法：window.clearInterval(intervalVariable)

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

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

<p>页面上显示时钟：</p>
<p id="demo"></p>
<button οnclick="myStopFunction()">停止时钟</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){
clearInterval(myVar);
}
</script>

setTimeout() 方法

• setTimeout() - 暂停指定的毫秒数后执行指定的代码

Note:  setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。

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

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

window.clearTimeout(timeoutVariable)

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

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

如果函数还未被执行，你可以使用 clearTimeout() 方法来停止执行函数代码。

<p>点击第一个按钮等待3秒后出现"Hello"弹框。</p>
<p>点击第二个按钮来阻止第一个函数运行。（你必须在3秒之前点击它）。</p>
<button οnclick="myFunction()">点我</button>
<button οnclick="myStopFunction()">停止弹框</button>
<script>
var myVar;
function myFunction(){
myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction(){
clearTimeout(myVar);
}
</script>

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

cookie创建document.cookie="username=John Doe"

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

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

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

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

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

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

document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 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 的值。

JavaScript Cookie 实例

在以下实例中，我们将创建 cookie 来存储访问者名称。

首先，访问者访问 web 页面, 他将被要求填写自己的名字。该名字会存储在 cookie 中。

访问者下一次访问页面时，他会看到一个欢迎的消息。

在这个实例中我们会创建 3 个 JavaScript 函数:

1. 设置 cookie 值的函数
2. 获取 cookie 值的函数
3. 检测 cookie 值的函数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function setCookie(cname,cvalue,exdays){
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
function checkCookie(){
var user=getCookie("username");
if (user!=""){
alert("Welcome again " + user);
}
else {
user = prompt("Please enter your name:","");
  if (user!="" && user!=null){
    setCookie("username",user,30);
    }
}
}
</script>
</head>

<body οnlοad="checkCookie()"></body>

</html>

 cookie 的过期时间 expires。