vue组件引入外部js同时获取变量,解决重复引入

vue组件引入外部js同时获取变量

引入文件支持加载成功回调,支持通过字符串变量名获取js文件的变量

/**
 * 引入js文件 并且获取变量
 * @param src js路径
 * @param variableName 需要获取的变量名
 * @param callback
 */
export const importJs = (src, variableName = '', callback = '') => {
  if (!isInclude(src)) { // 避免重复引入
    const script = document.createElement('script')
    script.type = 'text/JavaScript'
    script.src = src
    document.body.appendChild(script)
    if (typeof callback === 'function') {
      script.onload = script.onreadystatechange = function() {
        if (!script.readyState || /loaded|complete/.test(script.readyState)) {
          script.onload = script.onreadystatechange = null // 避免重复触发
          const fn = new Function('return ' + variableName)
          callback(variableName !== '' ? fn() : '')
        }
      }
    }
  } else if (typeof callback === 'function') {
    const fn = new Function('return ' + variableName)
    callback(variableName !== '' ? fn() : '')
  }
}
// 是否引入资源文件
function isInclude(name) {
  const js = /js$/i.test(name)
  const es = document.getElementsByTagName(js ? 'script' : 'link')
  for (let i = 0; i < es.length; i++) {
    if (es[i][js ? 'src' : 'href'].indexOf(name) !== -1) return true
  }
  return false
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值