Web浏览器中的JavaScript(二)

  1. 客户端Javascript时间线:

1)  Web浏览器创建Document对象,并开始解析Web页面,解析html元素和它们的文本内容后添加Element对象和Text节点到文档中。在这个阶段documen.readystate属性值是“loading”

2)  当HTML解析器遇到没有async和defer属性的<script>元素时,它把这些元素添加到文档中,然后执行行内或外部脚本。这些脚本会同步执行,并且在脚本下载(如果需要)和执行时解析器会暂停。这样脚本就可以用documen.wrte()来把文本插入到输入流中。解析器恢复时这些文本会成为文档的一部分。同步脚本经常简单定义函数和注册后面使用的注册时间处理程序,但他们可以遍历和操作文档树,因为在他们执行时已经存在了。这样,同步脚本可以看到它自己的<script>元素和它们之前的文档内容。

3)  当解析器遇到设置了async属性的<script>元素时,它开始下载脚本文本,并继续解析文档。脚本会在它下载完成后尽快执行,但是解析器没有停下来等它下载。异步脚本禁止使用document.write()方法。它们可以看到自己的<script>元素和它之前的所有文档元素,并且可能或干脆不可能访问其他的文档内容。

4)  当文档完成解析,document.readyState属性变成“interactive”。

5)  所有有defer属性的脚本,会桉它们在文档里的出现顺序执行。异步脚本可能也会在这个时间执行。延迟脚本能访问完整的文档树,禁止使用document.write()方法。

6)  浏览器在Document对象上触发DOMContentLoaded事件。这标志着程序执行从同步脚本执行阶段转换到事件驱动阶段。但要注意,这时可能还有异步脚本没有执行完成

7)  这时,文档已经完全解析完成,但是浏览器可能还在等待其他内容载入,如图片。当所有这些内容完成载入时,并且所有异步脚本完成载入和执行,document.readyState属性改变为“complete”,Web浏览器触发Window对象上的load时间。

8)  从此刻起,会调用异步事件,以异步响应用户输入事件、网络事件、计时器过期等。

这是一条理想的时间线,但是所有浏览器都没有支持它的全部细节。所有浏览器普遍支持load事件,都会触发它,它是决定文档完全载入并可以操作最通用的技术。DOMContentLoaded时间在load时间触发,当前所有浏览器都支持这个事件。

2.客户端Javascript兼容性和交互性的问题主要可以归纳为以下三类:

1)  演化:Web平台一直在演变和发展当中。一个标准规范会倡导一个新的特性或API。如果特性看起来有用,浏览器开发商实现它。如果满足足够多的开发商实现它,开发者开始试用这个特性,然后这个特性就在Web平台中广泛使用。有时候浏览器开发商和Web开发商引领这种标准规范的指定,开发好官方的版本,之前该特性已经成为一个事实标准。另一种情况,新特性已经被添加到Web中,新浏览器支持它但是老浏览器不支持。Web开发者必须在使用老旧浏览器的大量用户和使用新式浏览器的少量用户之间做出权衡。

2)  未实现:有时候,浏览器开发商之间对于某一特性是否能够有用到要实现存在观点上的差异。一些开发商实现了这个特性,而其他没有实现。有些现代浏览器实现的功能在老旧浏览器中没有实现,这种情况还好,但同样实现一个功能在不同浏览器中有很大差别,例如,IE不支持<canvas>元素,虽然所有其他浏览器已经实现了它。一个更加糟糕的例子是,Microsoft决定不实现Dom Level 2 Event规范(它定义了addEventListener()和相关的方法)。这个规范在十年之前已经标准化了,其他浏览器厂商已经支持了很久了。

3)  bug:每个浏览器都有bug,并且没有按照规范准确地实现所有客户端Javascript API。有时候编写能兼容各个浏览器的Javascript程序是一个糟透了的工作,必须研究已有浏览器中的各种bug

3.在客户端Javascript中检测浏览器类型和版本的方法是使用Navigator对象,确定当前浏览器的厂商和版本的代码通常叫做浏览器嗅探器或者客户端嗅探器。嗅探器也可以在服务器端完成,Web服务器根据User_Agent头部可以有选择地返回特定的javascript代码给客户端。

4.IE条件注释:

1)  简介:

IE中的条件注释(Conditionalcomments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法。

条件注释只能用于IE5以上。

如果你安装了多个IE,条件注释将会以最高版本的IE为标准。

条件注释的基本结构和HTML的注释(<!– –>)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。

2)  IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。

gt :greater than,选择条件版本以上版本,不包含条件版本

lt : lessthan,选择条件版本以下版本,不包含条件版本

gte :greater than or equal,选择条件版本以上版本,包含条件版本

lte :less than or equal,选择条件版本以下版本,包含条件版本

! : 选择条件版本以外所有版本,无论高低

3)  条件注释使用方法

<!--[ifIE 5]>仅IE5.5可见<![endif]-->

<!--[ifgt IE 5.5]>仅IE 5.5以上可见<![endif]-->

<!--[iflt IE 5.5]>仅IE 5.5以下可见<![endif]-->

<!--[ifgte IE 5.5]>IE 5.5及以上可见<![endif]-->

<!--[iflte IE 5.5]>IE 5.5及以下可见<![endif]-->

<!--[if!IE 5.5]>非IE 5.5的IE可见<![endif]-->

<!--[if !IE]><!--> 您使用不是Internet Explorer <!--<![endif]-->

<!--[if IE 6]><!--> 您正在使用InternetExplorer version 6或者一个非IE 浏览器

<!--<![endif]-->

5.javascript不能做的:

1)  javascript没有权限来写入或删除客户计算机上的任意文件或列出任意目录。这意味着javascript程序不能删除数据或植入病毒。

2)  客户端javascript没有任何通用的网络能力

3)  javascript程序可以打开一个新的浏览器窗口,但是为了防止广告商滥用弹出窗口,很多浏览器限制了这一功能,使得只有为了响应鼠标单击这样的用户触发事件的时候,才能使用它。

4)  javascript程序可以关闭自己打开的浏览器窗口,但是不允许它不经过用户确认就关闭其他窗口

5)  HTML FileUpload元素的value属性是只读的。如果可以设置这个属性,脚本就能设置它为任意期望的文件名,从而导致表单上传指定文件(比如密码文件)的内容到服务器

6)  脚本不能读取从不同服务器载入的文档内容,除非这个就是包括该脚本的文档。类似地,一个脚本不能在来自不同服务器的文档上注册事件监听器。这就防止了脚本窃取其他页面的用户输入(例如,组成一个密码项的键盘的单击过程)。这一限制叫做同源策略。

2.同源策略:同源策略是对javascript代码能够操作哪些Web内容的一条完整的安全限制。当web页面使用多个<iframe>元素或者打开其他浏览器窗口的时候,这一策略通常就会发挥作用。在这种情况下,同源策略负责管理窗口或窗体中的javascript代码以及和其他窗口或帧的交互。具体来说,脚本只能读取和所属文档来源相同的窗口和文档的属性。

文档的来源包括协议,主机,以及载入文档的url端口。从不同Web服务器载入的文档具有不同的来源。通过同一主机的不同端口载入的文档具有不同的源。使用http:协议载入的文档和使用https协议载入的文档具有不同的源,即使他们来自同一个服务器。

文档本身的来源和同源策略并不相关,相关的是脚本所嵌入的文档的来源。例如,假设一个来自主机A的脚本被包含到(使用<script>标记的src属性)宿主B的一个Web页面中。这个脚本的来源是主机B,并且可以完整地访问包含它的文档的内容。如果脚本打开一个新窗口并载入来自主机B的另一个文档,脚本对这个文档的内容页具有完全的访问权限。但是,如果脚本打开第三个窗口并载入一个来自主机C的文档(或者是来自主机A),同源策略就会发挥作用,阻止脚本访问这个文档。

3.同源策略用例:可以防止脚本窃取信息,如果没有这一限制,恶意脚本(通过防火墙载入到安全的公司内网的浏览器中)可能会打开一个空窗口,欺骗用户进入并使用这个窗口在内网上浏览文件。恶意脚本就能够读取窗口的内容并将其发送回自己的服务器,同源策略防止了这种行为。

时间: 2024-08-09 07:43:44

Web浏览器中的JavaScript(二)的相关文章

JavaScript权威指南第13章 web浏览器中的javascript

13.1 客户端javascript window对象是所有的客户端javascript特性和api的主要接入点.表示浏览器的一个窗口,可以通过window对象来引用它. window 的方法 alert() prompt() confirm() 13.2 在html里嵌入javascript 4种方法: 内联:放置在<script></script>标签之中 外部引入:<script src="   "></script> html程序

第十一章:WEB浏览器中的javascript

客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节同样涵盖重要的web应用所需要的网络编程API.本地存储和检索数据.画图等.主要包含内容有以下章节: web浏览器中的javascript / window对象 /  脚本化文档 /  脚本化css / 事件处理 / 校本化http / jQuery类库 / 客户端存储  /  多媒体和图形编程 /

Web浏览器中的JavaScript(一)

外部引入js脚本的优点: 1)  可以把大块的Js代码从html文件中删除,这有助于保持内容和行为的分离,从而简化html文件. 2)  如果多个Web页面公用相同的JavaScript代码,用src属性可以让你只管理一份代码,而不用在代码改变时编辑每个html文件 3)  如果一个JavaScript代码文件由多个页面共享,就只需要下载它一次,通过使用它的第一个页面--随后的页面可以从浏览器缓存检索它 4)  由于src属性的值可以使任意的url,因此来自一个Web服务器的JavaScript

《Javascript权威指南》 Web浏览器中的JavaScript

URL中的JavaScript 在URL后跟一个javascript:协议限定符,是一种嵌入javascript代码到客户端的方法.这种特殊的协议类型指定URL内容为任意字符串,这个字符串是会被javascript解析器运行的javascript代码.它被当做单独的一行代码,语句之间必须用分号隔开,注释用/**/.javascript:URL能识别的“资源”是转换成字符串的执行代码的返回值.如果代码返回undefined,那么这个资源是没有内容的. 可以在使用常规URL的任意地方:<a>的hr

Node中的JavaScript和浏览器中的JavaScript的区别

浏览器中的JavaScript: 1.基于ECMAscript规范,这个规范规定了语法 2.添加了dom:用来处理文档 document object model 3.添加了BOM:用于操作浏览器 window location histrory navigator Node中的JavaScript 1.基于ECMAscript规范,这个规范规定了语法 2.因为他是在服务器端来实现服务器端操作的script,所有它没有DOM 3.它增加了核心API,使用频繁的API,内置到node的环境中 4.

web浏览器中javascript

1.异步载入一个js代码function loadasync(url) { var head = document.getElementsByTagName("head")[0]; // 找到head节点 var s = document.createElement("script"); // 创建一个script标签 s.src = url; // 设置一个src属性 head.appendChild(s); // 插入标签到head节点中}2.事件驱动javas

Web浏览器中动态添加修改HTML页面代码的问题分析

引言:在Web的世界里,浏览器加载页面,展示给用户最终的内容,可是最终展示的HTML代码与服务器上存储的代码一致吗? 1.  xpath为什么不能正常工作? XPath是用来快速定位页面元素的方式和方法,忽然有一天,发现在页面中截取的XPath在代码的匹配中是无法工作的,那问题出在哪里呢? 页面地址:http://www.66ip.cn/ 截取匹配页面中的IP地址,基于Chrome浏览器自带的开发者工具,我们截取到某一个匹配的XPath路径为: //*[@id="main"]/div/

bala001 浏览器中的JavaScript执行机制:09 | 块级作用域:var缺陷以及为什么要引入let和const?

前言:该篇说明:|请见 说明 —— 浏览器工作原理与实践 目录 在前面<07 | 变量提升:JavaScript 代码是按照顺序执行的吗?>这篇文章中,我们已经讲解了 JavaScript 中变量提升的相关内容,正是由于 JavaScript 存在变量提升这种特性,从而导致了很多于直觉不符的代码,这也是 JavaScript 的一个重要设计缺陷. 虽然 ECMAScript6(以下简称 ES6 )已经通过引入块级作用域并配合 let.const 关键字,来避开了这种设计缺陷,但是由于 Java

Web网站中利用JavaScript中ActiveXObject对象获取硬件信息(显示器数量、分辨率)从而进行单双屏跳转

前言:最近这两天工作上,要实现一个功能,在好友阿聪的帮助下,算是比较好的解决了这个需求. B/S的Web网站,需要实现点击按钮时,根据客户端连接的显示屏(监视器)数量进行,单双屏跳转显示新页面. 由于是Web网站,项目是要发布在服务端上,通过后台去读硬件信息,也是读到的是服务器的硬件信息. 故考虑用JS中的ActiveXObject对象,读取到硬件的显示器(监视器)信息,比如数量.分辨率. 此处使用ActiveXObject对象,由于项目限制用的是IE9,打开窗口用的是window.open()