js中怎么動態獲取頁面的script地址

本篇內容主要講解“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地址”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！