美文网首页
异步创建加载script

异步创建加载script

作者: 蔬菜调料包 | 来源:发表于2020-05-14 15:22 被阅读0次
    /**
     * @param {*} url 需要引用的script标签的地址
    
     * @param {*} callback 创建完成script元素回调
    
     * @returns
    
     */
    
    function createScript(url, callback) {
    
      const scriptEl = document.createElement('script');
    
      scriptEl.charset = 'utf-8'
    
      scriptEl.src = url;
    
      // document.body.appendChild(scriptEl);
    
      // 添加到head
    
      const head = document.head || document.getElementsByTagName('head')[0];
    
      head.appendChild(scriptEl);
    
      const promise = new Promise((resolve, reject) => {
    
        // 不支持ie8及以下
    
        scriptEl.addEventListener(
    
          'load',
    
          e => {
    
            if (!callback) {
    
              resolve(e);
    
            } else {
    
              callback()
    
              resolve(e);
    
            }
    
          },
    
          false
    
        );
    
        scriptEl.addEventListener(
    
          'error',
    
          e => {
    
            removeScript(scriptEl)
    
            reject(e);
    
          },
    
          false
    
        );
    
      });
    
      return promise;
    
    }
    
    /**
    
     * 移除script标签
    
     * @param scriptEl script dom
    
     */
    
    function removeScript(scriptEl) {
    
      document.body.removeChild(scriptEl);
    
    }
    
    export default createScript;
    
    

    相关文章

      网友评论

          本文标题:异步创建加载script

          本文链接:https://www.haomeiwen.com/subject/oltmuctx.html