請問如何JS動態載入JS檔案，不用再html頁面寫<scirpt src=...>

javascript- 2018-03-15 11:08:10 ‧ 14995 瀏覽

分享至

請問如何JS動態載入JS檔案，不用再html頁面寫

ccutmis iT邦高手 2 級 ‧ 2018-03-15 11:11:18 檢舉

https://stackoverflow.com/questions/14521108/dynamically-load-js-inside-js

javascript- iT邦新手 5 級 ‧ 2018-03-15 13:01:36 檢舉

很有幫助謝謝!

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

暐翰

iT邦大師 1 級 ‧ 2018-03-15 11:38:00

最佳解答

可以使用REQUIREJS

範例 example-jquery-shim

簡單介紹流程:

app.html只引用一個JS檔案

運行結果多出兩行

分別由lib資料夾下jquery.alpha.js跟jquery.beta.js而來

運行網頁時，require.js會先去"運行js/app.js"檔案 (圖-1)
接著設定所需要用到的js檔案 (圖-2)
接著運行app/main.js檔案 (圖-3)
運行之前設定的JS檔案 (圖-4)

備註:

#為什麼會先運行js/app.js原因是由script data-main屬性決定

假如如下圖改成data-main="js/app2"，它就會去運行app2.js

#假如想要新增動態JS檔

1.因為設定檔設定

"baseUrl":   "js/lib"

所以lib底下的js都會被requirejs收錄 (圖-1)
2.新增一個test_lib.js (圖-2)
3.在main.js define多設定一個'test_lib'，系統就會自動載入test_lib.JS(圖-3)
4.得出載入結果(圖-4)

回應 1
分享
檢舉

javascript- iT邦新手 5 級 ‧ 2018-03-15 13:01:49 檢舉

我研究看看

登入發表回應

fuzzylee1688

iT邦研究生 3 級 ‧ 2018-03-16 10:23:22

要小心被植入coinhive採礦程式喔.

回應
分享
檢舉

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22202 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙