JavaScript动态插入script的基本思路及实现函数

  在日常的前端开发中,偶尔有需要动态插入javascript代码的需求,基本思路是:

  1、动态创建一个script标签,设置其src属性,type属性等

  2、将script节点插入页面,加载js文件

  即相当于将<script type="text/javascript" src="xxx.js"></script>添加到了页面,只不过这个过程是动态完成的,为此特意封装了一个函数来实现:

  

复制代码 代码如下:

  // 动态插入script标签

  function createScript(url, callback){

  var oScript = document.createElement('script');

  oScript.type = 'text/javascript';

  oScript.async = true;

  oScript.src = url;

  /*

  ** script标签的onload和onreadystatechange事件

  ** IE6/7/8支持onreadystatechange事件

  ** IE9/10支持onreadystatechange和onload事件

  ** Firefox/Chrome/Opera支持onload事件

  */

  // 判断IE8及以下浏览器

  var isIE = !-[1,];

  if(isIE){

  alert('IE')

  oScript.onreadystatechange = function(){

  if(this.readyState == 'loaded' || this.readyState == 'complete'){

  callback();

  }

  }

  } else {

  // IE9及以上浏览器,Firefox,Chrome,Opera

  oScript.onload = function(){

  callback();

  }

  }

  document.body.appendChild(oScript);

  }

  使用方法如:

  

复制代码 代码如下:

  createScript('xxx.js', function(){

  console.log('OK');

  });