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

  • “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. 02-MySQL的安装和配置

    1. 软件和环境 注:安装MySQL数据库的操作系统必须保证有.NET环境和VC运行库的支持.    下载地址:百度云网盘链接 2. MySQL服务器安装详细步骤 (1). 选择安装类型 这里我们选择 ...

  2. vue项目首次加载过慢

    vue项目优化 浅谈 Vue 项目优化 关于vue在app首次加载缓慢的解决办法 nginx开启缓存 在http部分加入 #要想开启nginx的缓存功能,需要添加此处的两行内容! #设置Web缓存区名 ...

  3. pythonic语法

    b="$".join(str(x) for x in range(10)) a= 2 if 5<2 else 3 print (a)#a是3

  4. Mac下的开发工具

    1.webstrom 淘宝上2块钱就能买一个 WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为“Web前端开发神器”.“最强大的HTML5编辑 ...

  5. MFC_CFileDialog_选择文件夹

    场景 在MFC中有时候只需要选择一个文件夹而不需要选择文件,这时候可以通过下列方式来进行选择 技术点 BROWSEINFO typedef struct_browseinfo { HWND hwndO ...

  6. phpstudy中apache的默认根目录的配置

    默认配置文件是:vhosts.conf. 安装laravel后需要把根目录配置到public. 下面的配置需要在本地计算机的host文件配置域名,一个是“localhost”,一个是“www.goho ...

  7. Project Euler Problem9

    Special Pythagorean triplet Problem 9 A Pythagorean triplet is a set of three natural numbers, a  b  ...

  8. 为cobbler自动化安装系统工具添加epel源

    关于cobbler的安装及部署,参考:CentOS 6.5自动化运维之基于cobbler服务的自动化安装操作系统详解http://blog.csdn.net/reblue520/article/det ...

  9. centos重启报错Umounting file systems:umount:/opt:device is busy

    系统重启报错: Umounting file systems:umount:/opt:device is busy 只能硬关机,回想一下最近刚安装了nod32 for linux x64的杀毒软件,开 ...

  10. Android中PopupWindow用法

    参考资料链接:http://developer.android.com/reference/android/widget/PopupWindow.html 在Android中有很多级别的Window, ...