客户端渲染网页的基本过程
把js分为两类,一类是内联的js,即直接写在html中的,包括script标签中的和href中的,还有一种是外链的,就是通过src属性添加的。
那么打开一个网页的过程是
1,创建一个Document对象,并开始解析html标签,创建dom树,此时document.readyState = "loading";
2,如果遇到内联的js,则开始解析js,这个过程是同步的。因此可以访问之前的dom元素但是不能访问之后的元素。
3,如果碰到一个有async属性的script,则异步加载此代码,同时继续解析dom。这些js一旦加载完毕会立即执行,因此执行顺序不一定同于标签出现的先后顺序。
4,dom解析结束,document.readyState = "interactive"。
5,执行defered属性的js,多个js会按出现的先后顺序执行。
6,触发DOMContentLoaded,此时async的js可能还没执行。
7,触发window.onload事件,此时所有的async js都执行结束,所有的异步请求资源如图片等都加载完毕。
8,事件驱动阶段,所有ascyncjs都加载并执行完毕,可以正常响应用户的操作。
注:EM5中内联可以有asyc属性或者defered属性,前者就是简单的异步加载,加载完成后立即执行,执行顺序与标签顺序无关;
后者也是异步加载,但是推迟到dom解析完且document.ready前执行,执行顺序同标签出现的先后顺序。
js无法访问不同域的另一个页面或者iframe。
但是这样会导致一些问题,比如一个很大的网站可能有很多二级域名,这些二级域名之间无法相互访问。
可以通过如下方法解决:
1,通过设置document.domain来改变当前页面的domain,如果两页面的document.domain被设为相同的,就可以用js互相访问
2,Cross-Origin Resource Sharing,
3,postMessage和onMessage,只能传递字符串参数。
嵌套的窗口之间是可以访问的,但是有同域原则的限制,以下所说的前提都是同域的。
打开新窗口
通过window.open(url, name, arge)方法可以打开一个新窗口,返回的是这个窗口的window对象。
只有当用户的操作比如点击等时才可以用open方法,否则会被当做恶意广告而阻止。
var w = window.open("/test", "new window", "width=300,height=400");
w.document.title; //w就是新窗口的window
w.op
w.close();//关闭新窗口
在打开的新窗口中可以通过window.opener来访问opener,opener的值就是一个window
当前页面如果有嵌套的iframe时,他们互相之间是可以访问的
通过parent来访问上一级,通过frames[index]来访问下一级,通过top来访问顶级。
也可以通过选择器选中iframe,然后用iframe.contentWindow来访问。
所有的内置class如Date,String等在不同的窗口中都是不同的实例。