javascript如何動態載入js檔案
1、動態的插入script標籤來載入指令碼。
function loadScript(url, callback) { const script = document.createElement('script'); script.type = 'text/javascript'; // 處理IE if (script.readyState) { script.onreadystatechange = function () { if (script.readyState === 'loaded' || script.readyState === 'complete') { script.onreadystatechange = null; callback(); } } } else { // 處理其他瀏覽器的情況 script.onload = function () { callback(); } } script.src = url; document.body.append(script); } // 動態載入js loadScript('file.js', function () { console.log('載入完成'); })
2、透過xhr方式載入js檔案,不過透過這種方式的話,就可能會面臨著跨域的問題。
const xhr = new XMLHttpRequest(); xhr.open('get', 'file.js'); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) { const script = document.createElement('script'); script.type = 'text/javascript'; script.text = xhr.responseText; document.body.append(script); } } }
3、將多個js檔案合併為同一個並壓縮。
目前,大多數瀏覽器已經支援並行下載js檔案,但並行下載仍有一定數量的限制(基於瀏覽器,一些瀏覽器只能下載4個)。此外,每個js檔案都需要建立一個額外的http連線,並且4個25KB的檔案比100KB的檔案大。因此,最好將多個js檔案合併為同一個並壓縮程式碼。
以上就是javascript動態載入js檔案的方法,希望對大家有所幫助。更多Javascript學習指路:
推薦操作環境:windows7系統、jquery3.2.1版本,DELL G3電腦。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/132/viewspace-2829139/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- javascript如何動態載入js或者css檔案JavaScriptJSCSS
- 如何動態載入js檔案JS
- js動態載入 js檔案和 css檔案JSCSS
- js動態載入js檔案簡單介紹JS
- js動態載入外部css檔案程式碼JSCSS
- 動態載入js檔案簡單介紹JS
- javascript動態載入css檔案程式碼例項JavaScriptCSS
- jQuery動態載入js檔案簡單介紹jQueryJS
- jquery如何實現動態載入CSS檔案jQueryCSS
- 動態載入js或者css檔案程式碼例項JSCSS
- 實現js檔案動態載入程式碼例項JS
- 原生JS動態載入JS、CSS檔案及程式碼指令碼JSCSS指令碼
- Javascript檔案載入:LABjs和RequireJSJavaScriptJSUI
- 如何載入require.js檔案UIJS
- 按照順序動態載入js檔案簡單介紹JS
- javascript實現的動態載入css檔案程式碼例項JavaScriptCSS
- js實現的動態載入css檔案簡單介紹JSCSS
- jQuery實現的非同步動態載入css和js檔案jQuery非同步CSSJS
- Android 開發中如何動態載入 so 庫檔案Android
- 寫個js/css動態載入的JavaScript外掛JSCSSJavaScript
- JavaScript 檔案載入方式JavaScript
- 原生js實現的動態載入css和js檔案程式碼例項JSCSS
- 動態載入JS和CSSJSCSS
- 動態載入JS的方法JS
- 實現js檔案動態載入的幾種方式簡單介紹JS
- jQuery實現的動態載入css和js檔案程式碼例項 [jQueryCSSJS
- 如何判斷js檔案是否載入完畢JS
- Protobuf 動態載入 .proto 檔案並操作 Message
- Unity3D動態載入FBX檔案Unity3D
- Angularjs動態載入ECharts(一)AngularJSEcharts
- 如何能看到框架檔案動態載入順序與執行情況?框架
- 7、靜態檔案的載入
- OrchardCore 如何動態載入模組?
- jquery如何判斷js檔案是否載入完畢jQueryJS
- js動態載入實現提高網頁載入速度JS網頁
- 在網頁裡動態載入 js網頁JS
- js載入解析xml檔案程式碼JSXML
- JSTL動態載入單選框--【ssnc】JS