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

  • “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. 在Eclipse中利用maven整合搭建ssm框架

    首先说明用到的框架: spring  +  springMVC  +  mybatis 构建工具:maven 开发工具:eclipse 开发环境:win10      java版本:jdk1.8    ...

  2. JAVA实现具有迭代器的线性表(单链表)

    一,迭代器的基本知识: 1,为什么要用迭代器?(迭代:即对每一个元素进行一次“问候”) 比如说,我们定义了一个ADT(抽象数据类型),作为ADT的一种实现,如单链表.而单链表的基本操作中,大部分需要用 ...

  3. phpexcel 导出到xls文件的时候出现乱码解决

    在header() 前面加上ob_end_clean() 函数, 清除缓冲区, 这样就不会乱码了! <?php include 'global.php'; $ids = $_GET['ids'] ...

  4. UEditor百度编辑器，工具栏自定义添加一个普通按钮

    根据网上前辈提供的,还真的不错,下面也整理一下 添加一个名叫“macros”的普通按钮在工具栏上: 第一步:找到ueditor.config.js文件中的toolbars数组,增加一个“macros” ...

  5. 2.SpringBoot HelloWorld详解

    1.POM文件 父项目 <parent> <groupId>org.springframework.boot</groupId> <artifactId> ...

  6. u-boot移植（十）---代码修改---支持nor flash

    一.问题定位 开发板重启后打印了2个提醒和一个错误,caches的提醒先不看,看看flash和nand下面的提醒,bad CRC,Using default enviroment,我们可以定位Usin ...

  7. android ContentObserver内容观察者基本使用

    package com.example.observertest; import android.content.ContentResolver; import android.database.Co ...

  8. 高版本sonar安装遇到的坑-sonar 6.6

    最近安装了6.6版本的sonar,发现里面的坑还是很多,下面列举下遇到的坑 sonar插件地址:https://docs.sonarqube.org/display/PLUG/Plugin+Libra ...

  9. mysql 原理 ~ innodb恢复机制

    举例说明 机制 数据页A的lsn为100,数据页B的lsn为200,checkpoint lsn为150,系统lsn为300,表示当前系统已经更新到300,小于150的数据页已经被刷到磁盘上,因此数据 ...

  10. js给<img>的src赋值

    用js原生方法:document.getElementById("imageId").src = "xxxx.jpg";用Jquery方法:$("#i ...