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、事件驱动javascript
2.1 将事件处理函数绑定到目标对象的属性上
window.onload = function(){};//1
var btn = document.getElementById(‘button‘);//2
btn.onclick = function(){
....
}
function readS(){
.....
}
request.onreadystatechange = readS();//3
以上三种是比较常见的
2.2、事件绑定方式(事件监听器)
非IE下使用
window.addEventListener(‘load‘,function(){},false);
IE下
window.attachEvent(‘load‘,function(){});
3、onload文档结构加载完成后执行一个函数
// 注册一个函数用来在文档加载完成时执行
// 如果文档加载完成,异步运行一个函数
function onLoad(f) {
if (onLoad.loaded) // 如果文档已经加载完成
window.setTimeout(f, 0); // 放入队列尽快执行
else if (window.addEventListener) // 绑定事件监听函数
window.addEventListener("load", f, false);
else if (window.attachEvent) //IE8以下执行
window.attachEvent("onload", f);
}
// 设置一个标记位用来确定文档是否加载完成
onLoad.loaded = false;
//注册一个load函数设置加载标记
onLoad(function() { onLoad.loaded = true; });
4、javascript时间线执行顺序
4.1 web浏览器创建document对象,并且开始解析web页面,解析html元素和他们的文本内容后添加element元素和text文本到文档中!
在这个阶段的document.readyState属性的值是loading.
4.2 当html解析器遇到script没有设置async和defer的时候,它把元素添加到文档中,然后执行行内或外部脚本。这些脚本会同步执行,并且在脚本下载和执行时候。解析器会暂停解析。
这样脚本就可以用documen.write()方法将内容插入到页面中。解析器恢复时候这些内容会成为文档中的一部分,
4.3 当html结构设置了script没有设置async的时候,它开始下载脚本文件,并且继续解析文档。脚本会在它下载完成后尽快执行,但是解析器不会停下来等他下载完成。异步脚本禁止使用documen.write()
这种方法。
4.4 当文档解析完成后document.readyState属性的值是interactive.
4.5 所有defer脚本会按照他们在文档中出现的顺序依次执行,这时候异步脚本也可能会在这个时候执行,延迟脚本可以访问完整的文档树结构,禁止使用document.weite()
4.6 浏览器在document上触发DOMContentLoaded事件。这标志着脚本从同步执行变成事件驱动阶段,注意的是这个时候异步脚本可能还会执行。
4.7 这个时候文档结构解析完成,但是浏览器可能还在等待其他内容载入,如图片。当所有这些完成载入的时候并且异步脚本完全载入和执行,document.readyState属性的值是complete.web浏览器触发window对象上的onload事件!
4.8 从此刻起会调用异步事件,以异步响应用户的输入,网络,计时器等!
5、IE条件注释
<!--[if IE 5]>
仅IE5.5可见
<![endif]-->
<!--[if gt IE 5.5]>
仅IE 5.5以上可见
<![endif]-->
<!--[if lt IE 5.5]>
仅IE 5.5以下可见
<![endif]-->
<!--[if gte IE 5.5]>
IE 5.5及以上可见
<![endif]-->
<!--[if lte IE 5.5]>
IE 5.5及以下可见
<![endif]-->
<!--[if !IE 5.5]>
非IE 5.5的IE可见
<![endif]-->
下面的代码是在非IE浏览器下运行的条件注释
<!--[if !IE]><!--> 您使用不是 Internet Explorer <!--<![endif]-->
<!--[if IE 6]><!--> 您正在使用Internet Explorer version 6或者 一个非IE 浏览器 <!--<![endif]-->
6、同源策略
在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略)。
这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容。
所谓同源是指,域名,协议,端口相同。
6.1 不严格的同源策略
同源策略会给那些使用多个子域名的网站带来麻烦,例如a.home.com要访问b.home.com或者访问c.sz.home.com的域名的时候就会受到
同源策略的限制。
为了解决这个问题可以采用document.domain的属性,默认情况下domain存放的是载入文档的服务器的主机名。可以设置这个属性不过使用的字符串
必须具有有效的域前缀或者它自己本身。domain的属性必须有一个点“.”不可以设置如com或者cn。例如上面的a.home.com可以设置成home.com,c.sz.home.com
可以设置成sz.home.com或者home.com.
当我们设置a.home.com、b.home.com、c.sz.home.com的domain为home.com这个时候三者就可以进行数据通讯了。
6.2 不严格的同源策略第二项
这个标准已经标准化,这个标准草案用新的Origin请求头和新的Access-Control-Allow-Origin响应头来扩展http.它允许服务器显式的列出源。或使用通配符来匹配所有的源
来请求文件。
6.3 不严格的同源策略第三项
跨文档消息,允许来自一个文档的脚本可以传递文本消息到另一个文档里的脚本,而不管脚本的来源如何。调用window.postMessage()方法
可以异步的传递消息。

时间: 2024-10-31 19:22:07

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单线程分析

线程这个特性对于一门语言环境来说是尤其重要的,在Java/C++环境下都提供了多线程API操作. 但在Javascript中据说代码执行时单线程的,大量计算的逻辑会阻塞浏览器HTML渲染,但setTimeout延时处理.XHR的异步请求是如何实现的, 接下来我们将逐一分析. 首先需要肯定的是浏览器中Javascript确实是单线程执行的,不信我们可以看个例子. <html> <head></head> <body> <script>setTime

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

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

Web浏览器中的JavaScript(二)

客户端Javascript时间线: 1)  Web浏览器创建Document对象,并开始解析Web页面,解析html元素和它们的文本内容后添加Element对象和Text节点到文档中.在这个阶段documen.readystate属性值是"loading" 2)  当HTML解析器遇到没有async和defer属性的<script>元素时,它把这些元素添加到文档中,然后执行行内或外部脚本.这些脚本会同步执行,并且在脚本下载(如果需要)和执行时解析器会暂停.这样脚本就可以用d

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

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

浏览器中Javascript的加载和执行

在刚学习Javascript时曾对该问题在小组内做个一次StudyReport,发现其中的基础还是值得分析的. 从标题分析,可以加个Javascript的加载和执行分为两个阶段:加载.执行.而加载即浏览器下载JS脚本的过程,执行时浏览器JS引擎解释执行的过程. 接下来先分析JS脚本加载的过程,加载方式可分为同步加载和异步加载. 同步加载即浏览器加载JS过程中停止对HTML元素的解析,保证JS执行的安全一致性,但如果JS中包含大量计算时,会导致阻塞页面的渲染.常见的JS加载是通过<script>

【转】DataURL在Web浏览器中的兼容性总结

IE8+,Firefox,Chrome,Opera,Safari 等现代浏览器普遍支持data URL IE8 data URL 最大长度限制为32k字节,超出无效.IE9+没有这个限制 IE只识别base64编码或百分号编码(URL编码, encodeURIComponent)的data URL,IE不识别无编码的data URL,非IE浏览器可识别无编码的data URL IE不支持对<iframe>,<frame>标签的src设置data URL IE官方说法说data UR