在做加载器时遇到一个常见问题，如何判定一个脚本已经执行完毕。

  • “uninitialized” – 原始状态
  • “loading” – 下载数据中
  • “loaded” – 下载完成
  • “interactive” – 还未执行完毕
  • “complete” – 脚本执行完毕.

网上流行的答案是这个，我怎么觉得其实这是抄自XMLHttpRequest的readyState呢？！恰逢这两个都有这属性。

我们亲自做一个实验：

<!DOCTYPE html>

<html>

    <head>

        <title>node.readyState</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width">

        <script>

            var node = document.createElement("script")

            node.onreadystatechange = function() {

                var state = node.readyState

                setTimeout(function() {

                    var div = document.createElement("div")

                    document.body.appendChild(div)

                    div.innerHTML = state

                }, 300)

            }

            var head = document.getElementsByTagName("head")[0]

            head.appendChild(node)

            node.src = "avalon.js"

        </script>

    </head>

    <body>

        <div>node.readyState</div>

    </body>

</html>
完整的控件教程
IE11 空白，说明完全与标准一致了
IE10 loading loaded
IE9 loading loaded
IE8 complete loaded
IE7 complete loaded 但有一定机率，只出现complete或loaded
IE6 complete loaded 但有一定机率，只出现complete或loaded

换言之，IE67是个非常悲催的问题。另外，opera9-10也支持readyState，根据老外的描述，它竟然两次都是loaded!

因此我们需要根据浏览器的情况采用不同的策略。

首先是使用何种回调，如果是支持onload事件，那么就直接用onload 就没有这么多麻烦事。最简单的策略是这样判定：

        var node = DOC.createElement("script")

        var supportLoad = "onload" in node

        var onEvent = supportLoad ? "onload" : "onreadystatechange"

        node[onEvent] = callback

判定完成时机， 我们不使用网上的/complete|loaded|undefined/.test(node.readyState)，这会同时掉进opera与IE67的坑中。对于使用onload事件进行监听的，不再判定node.readyState，IE（其实也就是IE6-8），需要使用一个定时器。当第一次进行onreadystatechange回调时，timeID为空， 并且readyState为complete或loaded时，我们设置它在300ms后再执行自身。然后如果浏览器还执行此回调时， 它就进入第二个分支，清掉定时器，执行用户代码。万一，浏览器只执行一次onreadystatechange回调，那也没关系，让定时器100~300ms后执行用户代码

最后贴出全部代码：

        //通过script节点加载目标模块

        var node = DOC.createElement("script")

        var timeID

        var supportLoad = "onload" in node

        var onEvent = supportLoad ? "onload" : "onreadystatechange"

        node[onEvent] = function onLoad() {

            if (!supportLoad && !timeID && /complete|loaded/.test(node.readyState)) {

                timeID = setTimeout(onLoad)

                return

            }

            if (supportLoad || timeID) {

                clearTimeout(timeID)

                //你的代码

            }

        }

        head.insertBefore(node, head.firstChild) //chrome下第二个参数不能为null

        node.src = url //插入到head的第一个节点前，防止IE6下head标签没闭合前使用appendChild抛错

大家也可以到这里看一下它的实际应用，如果大家都是使用AMD规范定义JS文件，那么我在旧式IE下连onerror也模拟出来了。

IE下script标签的readyState属性的更多相关文章

  1. [转]HTML5 script 标签的 crossorigin 属性到底有什么用？

    HTML5 script 标签的 crossorigin 属性到底有什么用? 最近Bootstrap 4已经正式发布了,可能已经有爱尝鲜的小伙伴在 alpha 阶段就尝试过 BS4.不过今天要说的不是 ...

  2. 怎样理解script标签的defer属性和async属性

    如果script标签是引用的外部js文件, 那就会有一个下载js文件这一过程, 为了不因为这个下载过程而阻塞页面解析与渲染, 我们需要一种机制来解决这一问题, 方法之一就是使用 defer和async ...

  3. html中script标签使用async属性和defer属性的区别

    相同点: 首先async和defer只对header里的外连脚本script标签上起作用,如果script标签是放在header外或者是header里的内置脚本以及动态生成的script标签是不起作用 ...

  4. script标签不带属性与带async、defer的区别

    <script> 当页面解析到script标签时,会停止解析并下载对应的脚本,并马上执行,执行完毕后再继续解析页面 <script async> async 在下载脚本的同时不 ...

  5. script标签的crossorigin属性

    通常我们使用window.onerror来捕获js脚本的错误信息. 但是对于跨域调用的js脚本,onerror事件只会给出很少的报错信息:error: Script error. 这个简单的信息很明显 ...

  6. select标签下option标签里value属性有什么用以及和text的区别

    转自:http://blog.csdn.net/summer_sy/article/details/54572398 1:value的用处 <select > <option val ...

  7. script标签属性sync和defer

    <script src="a.js" defer></script> 加了defer属性script标签的页面,运行流程如下:   1.浏览器开始解析HTM ...

  8. 如何将 JavaScript 代码添加到网页中，以及 <script> 标签的属性

    Hello, world! 本教程的这一部分内容是关于 JavaScript 语言本身的. 但是,我们需要一个工作环境来运行我们的脚本,由于本教程是在线的,所以浏览器是一个不错的选择.我们会尽可能少地 ...

  9. script标签crossorigin属性及同源策略和跨域方法

    首先介绍(同源策略) 同源策略是浏览器最核心且基本的安全约定,要求协议.域名.端口都相同为同源,如果非同源时请求数据浏览器会在控制台抛出跨域异常错误,同源策略是浏览器的行为,即使客户端请求发送了,服务 ...

随机推荐

  1. PHP7 学习笔记（四）PHP PSR-4 Autoloader 自动加载

    参考文献: 1.PHP PSR-4 Autoloader 自动加载(中文版) 2.PHP编码规范(中文版)导读 3.PHP-PSR-[0-4]代码规范 基本步骤: (1)在vendor 下新建一个项目 ...

  2. vue常用UI组件

    Mint UI 项目主页:http://mint-ui.github.io/#!/zh-cn demo:http://elemefe.github.io/mint-ui/#/ github地址:htt ...

  3. Python学习笔记10--unittest参数化

    我们在写case的时候,如果用例的操作是一样的,就是参数不同,比如说要测一个登陆的接口,要测正常登陆的.黑名单用户登陆的.账号密码错误的等等,在unittest里面就要写多个case来测试. 这样的情 ...

  4. 使用Eclipse Memory Analyzer 进行JAVA内存泄露分析

    一,安装 Eclipse Memory Analyzer 在Memory Analyzer的官网找到 update site的地址:

  5. windows上使用mkdocs搭建静态博客

    windows上使用mkdocs搭建静态博客 之前尝试过用HEXO搭建静态博客,最近发现有个叫mkdocs的开源项目也是搭建静态博客的好选择,而且它支持markdown格式,下面简要介绍一下mkdoc ...

  6. Bugly实现app全量更新

    转 http://blog.csdn.net/qq_33689414/article/details/54911895Bugly实现app全量更新 Bugly官网文档 一.参数配置 在app下的gra ...

  7. mysql手工注入总结

    mysql -u 用户名 -p 密码 -h IP地址 show databases;   查看数据库 select version(); php注入的版本号 use database(表名): sho ...

  8. luogu 1993 小K的农场

    差分约束+spfa判负环 dfs判负环 #include<bits/stdc++.h> #define rep(i,x,y) for(register int i=x;i<=y;i+ ...

  9. ubuntu14.04 下安装 gsl 科学计算库

    GSL(GNU Scientific Library)作为三大科学计算库之一,除了涵盖基本的线性代数,微分方程,积分,随机数,组合数,方程求根,多项式求根,排序等,还有模拟退火,快速傅里叶变换,小波, ...

  10. Linq基于两个属性的分组

    1.需求 我们看下面的定义 #region 学生类 /// <summary> /// 学生类 /// </summary> class Student { /// <s ...