描述

支持单个加载远程 js 文件，返回 promise，如果 html 已经出现相同的 script，将不会重新加载，除非 src 地址不一致。 如果批量加载 js 和 css，请使用 loadJsOrCssMulSync

1.示例

1.1 加载单个 js

加载远程jquery.js 打印 $

<template>
  <div v-loading="loading">
    <el-button @click="onClick">加载远程jquery.js</el-button>
    <el-button @click="onPrint">打印 $</el-button>
  </div>
</template>

<script>
import { loadJsSync } from 'sf-utils2'
const jquery = 'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js'
export default {
  data() {
    return {
      loading: false
    }
  },
  methods: {
    async onClick() {
      this.loading = true
      await loadJsSync(jquery)
      this.$message.success('加载成功')
      this.loading = false
    },

    onPrint() {
      console.log(window.$)
    }
  }
}
</script>

显示代码 复制代码 复制代码

2.入参说明

参数	说明	类型	是否必填	默认值
url	js	String	是
callback	加载成功后，回调函数	Function	否

3.源码

源码，点开查看 👈

/**
 * 加载js 支持持的单个
 * @param {string} url js http链接🔗地址
 * @param callback  加载成功回调函数
 */
function loadJsSync(url = '', callback) {
  return new Promise(resolve => {
    let script = document.createElement('script'),
      fn = callback || function () {}
    script.type = 'text/javascript'
    //IE
    if (script.readyState) {
      script.onreadystatechange = function () {
        if (script.readyState == 'loaded' || script.readyState == 'complete') {
          script.onreadystatechange = null
          fn()
          resolve()
        }
      }
    } else {
      //其他浏览器
      script.onload = function () {
        fn()
        resolve()
      }
    }
    script.src = url
    document?.getElementsByTagName('head')[0].appendChild(script)
  })
}