动态加载script资源

__畫戟__

已于 2023-02-27 21:55:39 修改

阅读量538

点赞数 1

分类专栏：前端公用 .js 文章标签： javascript html 前端动态加载script资源 loadScript

于 2023-02-27 21:45:35 首次发布

本文链接：https://blog.csdn.net/qq_41887214/article/details/129250834

版权

前端公用 .js 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

// 动态加载script资源 cb
function loadScript(url, cb) {
  const script = document.createElement('script')
  script.type = 'text/javascript'
  if (script.readyState) {
    // IE浏览器
    script.onreadystatechange = function () {
      if (script.readyState === 'loaded' || script.readyState === 'complete') {
        script.onreadystatechange = null // 删除事件，避免重复触发
        cb?.()
      }
    }
  } else {
    script.onload = function () {
      cb?.()
    }
  }
  script.src = url
  document.body.appendChild(script)
}

// 动态加载script资源 Promise
function loadScript(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.type = 'text/javascript'
    if (script.readyState) {
      // IE浏览器
      script.onreadystatechange = function () {
        if (script.readyState === 'loaded' || script.readyState === 'complete') {
          script.onreadystatechange = null // 删除事件，避免重复触发
          resolve()
        }
      }
    } else {
      script.onload = function () {
        resolve()
      }
      script.onerror = function () {
        reject(new Error("Fail to load: " + url))
      }
    }
    script.src = url
    document.body.appendChild(script)
  })
}