第十三章 Web浏览器中的JavaScript
1 在Html文档中嵌入客户端4种JS代码方法
a 内联方式,放置在<script>标签之间
b 放置在<script>标签 src 属性指定的外部文件中
c 放置在HTML事件处理程序中
d 放置在URL中,"javascript:" 协议
2 在XHTML中,script标签中内容将被当做其他内容,如果JS代码包含了"<" 或 "&"字符,那么这些字符将被解释成为XML标记。因此,如果要使用XHTML,最好把JS放在一个CDATA部分里:
<script><![CDATA[ js code ]]></script>
3 使用src属性时,script标签之间的任何内容都会忽略。
4 对于内联脚本,指定不能识别的脚本类型,不会尝试显示或执行。对于外联脚本,指定不能识别的脚本类型,那这个脚本会被忽略,并且不会从指定的URL中下载任何内容。
5 script标签可以有defer 和 async属性,如果同时具有两个属性,支持两者的浏览器会遵从async 属性而忽略 defer 属性。
注意,延迟的脚本会按照它们在文档中出现的顺序执行,而异步脚本在它们载入后执行,意味着它们可能无序执行。
6 JS程序执行的时间线:
a 创建Document对象,并开始解析Web页面,添加Element、Text节点到文档中。此时,document.readystate属性的值是 "loading" 。
b 当解析器遇到无async或defer属性script标签时,它把这些元素添加到文档中,然后执行行内或外部脚本。脚本同步执行,并且在脚本下载和执行时,解析器会暂停。这样,脚本可以用document.write() 来把文本插入到输入流中。解析器恢复时,这些文本会成为文档的一部分。同步脚本可以看到它自己的script元素和它们之前的文档内容。
c 当解析器遇到async属性script标签时,它开始下载脚本文本,并解析文档。脚本会在他下载完成后尽快执行,但是解析器没有停下来等它下载。禁止使用document.write(),可以看到自己的script 元素和它之前的所有文档元素,并且可能或干脆不可能访问其他的文档内容。
d 当文档完成解析,document.readyState属性变成 "interactive"。
e 所有有defer属性的脚本,会按照它们在文档里的出现顺序执行。异步脚本可能也会在这个时间执行。延迟脚本能访问整的文档树,禁止使用document.write() 方法。
f 浏览器在Document对象上触发 DOMContentLoaded 事件。这标志着程序执行从同步脚本执行转换到了异步事件驱动阶段。但要注意,这时可能还有异步脚本没有执行完成。
g 当所有其他内容(图片等)载入完成,并且所有异步脚本完成载入和执行,document.readyState 属性改变为 "complete",Web浏览器触发Window对象上的load事件。
h 从此刻起,会调用异步事件,以异步响应用户输入、网络事件、计时器过期等。
7 Web浏览器是Web应用的操作系统,但是Web是一个存在各种差异的环境。(不同的操作系统,不同的浏览器开发商)
8 处理兼容性的方法
a 类库(jQuery等)
b 分级浏览器支持
c 功能测试(if (element.addEventListener) 检测是否支持addEventListener)
d 怪异模式(IE4、5)和标准模式 document.compatMode("CSS1Compat BackCompat")
e 浏览器测试(navigator.userAgent)
9 JS 可访问性的一条重要原则是,设计的代码即使在禁用JS解释器的浏览器中也能正常使用。
10 同源策略:脚本只能读取和所属文档来源相同的窗口和文档的属性,应用于XMLHttpRequest是只允许生成的HTTP请求脚本所属文档的服务器。文档的来源包括协议、主机,以及载入文档的端口。
11 不严格的同源策略
a 使用多个子域情况下,设置Document对象的domain属性一样,就不再受同源策略约束;
b 跨域资源共享(Cross-Origin Resource Sharing),利用新的"Origin" 请求头,和新的"Access-Control-Allow-Origin" 响应头来扩展HTTP;
c 跨文档消息,调用Window对象上的postMessage() 方法,同时监听onmessage事件进行处理。
12 安全性
a 跨站脚本(Cross site scripting)XSS,攻击者向目标Web站点注入HTML标签和脚本。防御:在使用任何不可信的数据来动态创建文档内容之前,要从中移除HTML标签;
b 拒绝服务攻击,访问一个恶意站点,这个站点可能用无限循环或无意义的计算大量占用CPU;
c CSRF( Cross Site Request Forgery ),跨站请求伪造,防御:对于任何重要的请求都需要重新验证用户的身份,或者创建一个唯一的令牌(Token),将其存在服务端的session中及客户端的cookie中,对任何请求,都检查二者是否一致。
第十四章 Window对象
1 由于历史原因,setTimeout和setInterval的第一个参数可以作为字符串传入,指定时间之后,相当于执行eval() 。
2 Document对象有一个URL属性,是文档首次载入(决定不同的document)后保存该文档的URL静态字符串。如果定位到文档中的片段标示符,location对象会做相应的更新,而document.URL属性却不会变。
3 Location对象的toString() 方法返回location.href 属性的值。
4 Location对象的assign() 方法可以使窗口载入并显示你指定的URL中的文档。
5 History对象
a back() 后退
b forward() 前进
c go 接收一个整数参数,可以在历史列表中向前或向后跳过任意多个页。
6 Navigator重要属性
a appName:Web浏览器的全称
b appVersion: 此属性通常以数字开始,并跟着包含浏览器厂商和版本信息的详细信息
c userAgent:浏览器在它的USERAGENTHTTP头部中发送的字符串。
d platform:在其上运行浏览器的操作系统的字符串。
e onLine:表示浏览器当前是否连接到网络。
f geolocation:用于确定用户地理位置信息的接口。
7 Window对象的onerror属性是一个事件处理程序,当未捕获的异常传播到调用栈上时触发。
8 Window对象的open方法返回代表新创建的窗口的Window对象,而且这个新窗口具有opener属性,该苏醒可以打开它的原始窗口。
9 窗体可以用parent属性引用包含它的窗口或窗体的Window对象。
10 iframe元素有contentWindow属性,引用该窗体的Window对象。