Web浏览器中的JavaScript && window对象

window对象是所有客户端JavaScript特性和API的主要接入点。

常用方法

alert

弹出一个对话框用来显示一些信息

setTimeout

注册一个函数，在给定的一段时间之后触发一个回调
<code>
//等待两秒，然后说hello
setTimeout(function() {alert("hello world");},2000);
</code>

window对象中一个最重要的属性是document，他引用Document对象，后者表示显示在窗口中的文档。

window、Document和Element对象上另一个重要的属性集合是事件处理程序相关的属性。

Web文档里的JavaScript

JavaScript程序可以通过Document对象和它包含的Element对象遍历和管理文档内容。

在HTML里嵌入JavaScript

在HTML文档里嵌入JavaScript代码有四种方法：

• 内联，放置在<script>和</script>标签对之间
• 放置在游<script>标签的src属性指定的外部文件中
• 放置在ＨＴＭＬ事件处理程序中，该事件处理程序由onclick或onmouseover这样的HTML属性值指定
• 放在一个URL里，这个URL使用特殊的“JavaScript：”协议

<Script>元素

JavaScript代码可以以内联的形式出现在HTML文件里的<script>和</script>标签之间。
<code>
<script>
//这里是你的javascript代码
</script>
</code>

外部文件中的脚本

<script>标签支持src属性，这个属性指定包含JavaScript代码文件的URL。
用法：
<code>
<script src = "../../scripts/util.js></script>
</code>
使用src属性方式的优点：

• 可以把大块JavaScript代码从HTML文件中删除，这有助于保持内容和行为的分离，从而简化HTML文件
• 如果多个Web页面共用相同的JavaScript代码，用src属性可以让你只管理一份代码，而不用在代码改变时编辑每个HTML文件。
• 如果一个JavaScript代码文件由多个页面共享，就只需要下载它一次，通过使用它的第一个页面——随后的页面就可以从浏览器缓存检索它
• 由于src属性的值可以是任意的URL，因此来自一个Web服务器的JavaScript程序或Web页面可以使用由另一个Web服务器输出的代码。
• 从其它网站载入脚本的能力，可以让我们更好的利用缓存。

脚本类型

JavaScript是Web的原始脚本语言。在默认情况下，假定<script>元素包含或引用JavaScript代码。

HTML中的事件处理程序

类似onclick的事件处理程序属性，用相同的名字对应到HTML属性，并且汉可以通过将JavaScript代码放置在HTML属性里来定义事件处理程序。

URL中的JavaScrit

在URL后面跟一个JavaScript：协议限定符，是另一种嵌入JavaScript代码到客户端的方式。

书签

“书签”就是一个保存下来的URL。

JavaScript程序的执行

JavaScript程序的执行有两个阶段：

• 载入文档内容，并执行<script>元素里的代码
• 事件驱动阶段，响应异步发生的事件

同步、异步和延迟的脚本

当脚本把文本传递给document.write()时，这个文本被添加到文档输入流中，HTML解析器会在当前位置创建一个文本节点，将文本插入这个文本节点后面。

脚本的执行只在默认情况下是同步和阻塞的。

<script>标签可以由defer和async属性。

• defer属性使得浏览器延迟脚本的执行，直到文档的载入和解析完成。
• anync属性使得浏览器可以尽快的执行脚本，而不用在下载脚本时阻塞文档解析。

如果<script>标签同时有两个属性，同时支持两者的浏览器会遵从async属性并忽略defer属性。

事件驱动的JavaScript

如果想要程序响应一个事件，写一个函数，叫做“事件处理程序”、“事件监听器”或“回调”。然后注册这个函数，这样也就会在事件发生时调用它。
addEvenListaner()方法允许注册多个监听器。

功能测试

功能测试是解决不兼容性问题的一种强大技术。
例如：
<code>
if(element.addEventListener){
element.addEventListener("Keydown",handler,false);
element.addEventListener("Keypress",handler,false);
}
else if(element.attachEvent){
element.attachEvent("onKoydown",handler);
element.attachEvent("onKeypress",handler);
}
else{
element.onkeydown = element.onKeypress = handler;
}
</code>

浏览器测试

在客户端JavaScript中检测浏览器类型和版本的方法就是使用Navigator对象。

条件注释

例如：excanvs.js类库在IE里实现<canvas>元素
<code></code>

同源策略

同源策略是对JavaScript代码能够操作哪些Web内容的一条完整的安全限制。
负责管理窗口或窗体中的JavaScript代码以及和其他窗口或帧的交互。

脚本只能读取和所属文档来源相同的窗口和文档的 属性。

不严格的同源策略

为了支持多域名站点，可以使用Document对象的domain属性。

在默认情况下，属性domain存放的是载入文档的服务器的主机名。可以设置这一属性，不过使用的字符串必须具有有效的域前缀或它本身。

如果两个窗口包含的脚本把domain设置成了相同的值，那么这两个窗口就不在受同源策略的约束，他们可以相互读取对方的属性。

Window对象

客户端JavaScript程序的全局对象

setTimeout()和setInterval()

可以用来注册在指定的时间之后单次或重复调用的函数。

• window对象的setTimeout()方法用来实现一个函数在指定的毫秒数之后运行。setTimeout()返回一个值，这个值可以传递给clearTimeout()用于取消这个函数的执行。
• setInterval()和setTimeout()一样，只不过这个函数会在指定的毫秒数的间隔里重复调用。也是返回一个值，传递给clearInterval()用于取消后续函数的调用。
  <code>
  setInterval(updateClock,60000); //每60秒调用一次updateClock();
  </code>

浏览器的定位和导航

window对象的location属性引用的是Location对象，他表示该窗口中当前显示的文档的URL，并定义了方法来使窗口载入新的文档。
Document对象的location属性也引用到Location对象：
<code>window.location === document.location //总是返回true</code>

• 解析URL
  window对象的location属性引用的是Location对象，表示窗口中当前显示的文档的URL。
  location对象的属性href是一个字符串，后者包含URL的完整文本。
  location对象的toString()方法返回href属性的值。
  Location对象的其他属性——protocol，host，hostname，port，pathname和search，分别表示URL的各个部分。
• 载入新的文档
  Location对象的assign()方法可以使窗口载入并显示你指定的URL中的文档。
  replace()方法也类似，但是他会在载入新文档之前会从浏览历史中把当前文档删除。
  reload()方法可以让浏览器重新载入当前文档。
  是浏览器跳转到新的页面的另一种方法是直接把新的URL赋给location属性：
  <code>location = "http://www.oreilly.com"</code>
  还可以把相对URL赋给location，它们会相对当前URL进行解析：
  <code>location = "page2.html"</code>
  纯粹的片段标识符是URL的一种类型，会让页面滚动到文档的某个位置。
  <code>location = "#top"</code>

浏览历史

window对象的history属性引用的是该窗口的History对象，History对象是用来把窗口的浏览历史文档和文档状态列表的形式表示。

方法：

• back()
  使浏览器在浏览历史中后退一格。
• foward()
  使浏览器在卢兰历史中前进一格。
• go()
  接受一个参数，可以在历史列表向前向后跳过任意多个页。

浏览器和屏幕信息

• Navigator对象
  window对象的navigator属性引用的是包含浏览器厂商和版本信息的Navigator对象。
  Navigator对象有4个属性：appName、appVersion、userAgent、platForm。
• Screen对象
  提供有关窗口显示的大小和可用的颜色数量的信息。
  width和height指定的是以像素为单位的窗口大小
  availWidth和availHeight指定的是实际可用的显示大小
  colorDepth指定的是显示的BPP的值

对话框

• alert()向用户显示一条消息并等待用户关闭对话框
• confirm()也显示一条消息，要求用户单击“确定”或“取消”按钮，并返回一个布尔值
• prompt()同样也显示一条消息，等待用户输入字符串，并返回那个字符串。

错误处理

Window对象的onerror属性是一个事件处理程序，当未捕获的异常传播到调用栈上时就会调用它，并把错误的信息输出到浏览器的JavaScript控制台上。如果给这个属性赋一个函数，那么只要这个窗口放生了JavaScript错误，就会调用该函数。

window.onerror的第一个参数是描述错误的一条消息，第二个参数是一个字符串，它存放引发错误的JavaScript代码所在的文档的URL，第三个参数是文档中发生错误的行数。

多窗口和窗体

HTML文档经常使用<iframe>来嵌套多个文档，由<iframe>所创建的嵌套浏览上下文使用它自己的window对象所表示的。

• 打开窗口
  使用window对象的open()方法尅打开一个新的浏览器窗口。window.open()载入指定的URL到新的或已存在的窗口中，并返回代表那个窗口的window对象。
  open()的返回值是代表命名或新创建的窗口的window对象。
• 关闭窗口
  方法close()关闭一个窗口
  要显式的使用标识符window，这样可以避免混淆Window对象的close()方法和Document对象的close()方法。

窗体之间的关系

任何窗口或窗体中的JavaScript代码都可以将自己的窗口和窗体引用为window和self。

• 窗体可以用parent属性引用彪悍他的窗口或窗体的window对象
  <code>parent.history.back();</code>
• 如果一个窗口是顶级窗口或标签，而不是窗体，那么其parent属性引用的就是这个窗口本身：
  <code>parent == self;</code>
• 如果一个窗体包含在另一个窗体中，而后者又包含在顶级窗口中，那么该窗体就可以使用parent.parent来引用顶级窗口。
• top属性引用的都是指向包含它的顶级窗口。

窗体是通过<iframe>元素创建的。可以用获取其他元素的方法来获取一个表示<iframe>的元素对象。

• 假定文档里有<ifrme id = "f1">，那么表示该ifame的元素对象就是：
  <code>var iframeElement = document.getElementById("f1");</code>

<iframe>元素有contentWindow属性，引用该窗体的Window对象，所以此窗体的Window对象就是：
<code>var childFrame = document.getElementById("f1").contentWindow</code>

可以进行反向操作，从表示窗体的Window对象来获取窗体的<iframe>元素——用window对象的frameElement属性。
<code>var elt = document.getElementById("f1");
var win = elt.contentWindow;
win.frameElement === elt;
window.frameElement === null;</code>