动态加载 js 文件，并在加载成功后执行回调函数

有的时候需要动态加载一个 javascript 文件，并且在加载成功后执行回调函数（例如文件中保存了 json 数据之类的）。要实现这样的功能，可以使用<script> 元素的load 事件（IE9+、chrome、FireFox 等）和onreadystatechange 事件（IE8 以下），直接上代码：

function loadScript(src, callback) {
  var script = document.createElement('script'),
    head = document.getElementsByTagName('head')[0]
  script.type = 'text/javascript'
  script.charset = 'UTF-8'
  script.src = src
  if (script.addEventListener) {
    script.addEventListener(
      'load',
      function () {
        callback()
      },
      false,
    )
  } else if (script.attachEvent) {
    script.attachEvent('onreadystatechange', function () {
      var target = window.event.srcElement
      if (target.readyState == 'loaded') {
        callback()
      }
    })
  }
  head.appendChild(script)
}

使用方法如下：

loadScript('http://cdn.staticfile.org/jquery/1.6.2/jquery.min.js', function () {
  console.log('onload')
})

onreadystatechange 事件#

onreadystatechange 事件通常用在基于 XMLHttpRequest 对象的 AJAX 应用中，当的该对象的 load state 改变时，会触发此事件。

onreadystatechange 事件是微软对 IE 浏览器的私有事件扩充，所有元素都存在 onreadystatechange 事件。
下列元素对象总可以触发此事件，因为他们均会加载数据：APPLET，DOCUMENT，FRAME，FRAMESET，IFRAME，IMG，LINK，OBJECT，SCRIPT 和 XML 元素。
其他元素对象仅当 DHTML Behavior 被追加后会触发 onreadystatechange 事件。

但是实际上 IE 下 image 是支持 onload 事件的，可以查看我之前的一篇文章：带进度条的图片预加载效果。

参考：http://www.w3help.org/zh-cn/causes/BX9021