温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

js中怎么动态获取页面的script地址

发布时间:2022-02-08 09:34:48 来源:亿速云 阅读:206 作者:iii 栏目:开发技术

本篇内容主要讲解“js中怎么动态获取页面的script地址”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“js中怎么动态获取页面的script地址”吧!

前言:(业务逻辑)

在 vue 中,遇到这样的情况,初始化加载太多js,导致页面白屏,为了解决这个情况,决定使用具体组件具体加载相应的 cdn地址。
为啥不用 vue 的按需加载呢,是因为我们项目对性能要求很高,但是按需加载后,引入的插件包,打包以后的大小比 cdn 要大太多了,整体来说是使用他是得不偿失,但是一次性加载太多 cdn 又会导致白屏,所以在这里我使用的方法:具体某个页面使用第三方插件,就在使用的页面 js 动态加载 scirpt,并给他上标签

具体操作:

1、面临第一个问题,要先获取到当前页面所用到的所有引入 的  <script>,下面的 newArr 就是拿到的所有的script地址

 let scriptsArr = document.getElementsByTagName('script')
      let newArr = []
      //获取所有的script地址
      for (var i = 0; i < scriptsArr.length; i++) {
        newArr.push(scriptsArr[i].getAttribute('src', 4))
      }

2、给界面加载我们想放进去的 cdn 地址,因为 vue 是单页面组件,所有我们直接放在 #app上
// 创建script标签,引入外部文件
        let script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = url
        document.getElementById('app').appendChild(script)

分享源码:

mounted 中调用:(必须是 mounted,不能是 created,必须等页面加载完成才能挂载)

let url = '//cktcdn.kaoti100.com/cdn.jsdelivr.net/npm/vue-aplayer/vue-aplayer.js'
    this.app_script(url)//初始化给他添加cdn地址

methods 里面定义方法
/**
     * 获取页面上的所有script地址。来判断是否要加cdn地址
     * */
    app_script(url) {
      let scriptsArr = document.getElementsByTagName('script')
      let newArr = []
      //获取所有的script地址
      for (var i = 0; i < scriptsArr.length; i++) {
        newArr.push(scriptsArr[i].getAttribute('src', 4))
      }
      let isFirst = true //判断是否加载过这个script,有就不加载了
      let cdnUrl = url
      newArr.forEach(item => {
        if (item === cdnUrl) {
          isFirst = false
        }
      })
      if (isFirst) {
        // 创建script标签,引入外部文件
        let script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = url
        document.getElementById('app').appendChild(script)
      }
 
    },

到此,相信大家对“js中怎么动态获取页面的script地址”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI