zoukankan      html  css  js  c++  java
  • 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()方法
    可以异步的传递消息。

  • 相关阅读:
    CSS3 background-size:cover/contain
    CSS3 filter(滤镜) 属性
    tomcat生成catalina.out文件
    关于海量数据存储与查询的思考
    java DDD 基于maven开发的探讨
    java heap 异常
    项目启动异常
    Windows下apache+tomcat负载均衡
    Objective-C 程序设计(第六版)第十一章习题答案
    Objective-C 程序设计(第六版)第十章习题答案
  • 原文地址:https://www.cnblogs.com/shizhouyu/p/4672911.html
Copyright © 2011-2022 走看看