Custom User Actions - JS Injection dependency
-
16-12-2020 - |
题
Instead of modifying the master page, I've injected the following custom actions to add references to JavaScript files on my page:
- jquery-1.12.4.min.js (Sequence=1000)
- bootstrap-3.3.7.min.js (Sequence=1001)
- myCustomJS.js (Sequence=1002)
As you can see, I have jQuery (1000) first, followed by Bootstrap (1001) then my custom script (1002). When the site loads however, I get the following error:
Uncaught Error: Bootstrap's JavaScript requires jQuery
So it seems jQuery hasn't loaded completely yet before Bootstrap ran. My custom script also runs into the issue where it can't resolve what $
or jQuery
is. Any ideas on how to resolve this?
解决方案
UserCustomAction scripts load async
So indeed, that 90KB jQuery is still loading when the rest is pulled in
Apart from using a dynamic loader and execute them in sequence,
is to combine them into one file.
You can use all the fancy "new" tools like Gulp for that.
or, on windows, open a CMD prompt, and do:
copy /b jquery.min.js + bootstrap.min.js + myCustomJS.js myCustomBundle.js
Then you only load myCustomBundle.js
with a UserCustomAction
https://github.com/tavikukko/Chrome-SP-Editor
Do use Tomi Tavelas SP Editor Chrome Extension for maintaining UserCustomActions (and way more)