This is the 20th day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

To dynamically load a script file using JavaScript, the basic steps are as follows:

  • createscriptThe element
  • willscriptElements of thesrcProperty to point to the file to load
  • willscriptElement is added to the DOM
let myScript = document.createElement('script')
myScript.setAttribute('src'.'./index.js')
document.body.appendChild(myScript)
Copy the code

  • The myScript variable stores a reference to the newly created script element.

  • The setAttribute method allows us to set a SRC value for the script to load.

  • Finally, we add the script element to the bottom of the body element through appendChild.

Here are some common scenarios.

Run the dynamically loaded script first

Adding aScript element at the bottom of the body element means that our page will be rendered first, without JavaScript preventing it from loading and executing. This is usually the right behavior that we want. Now, in some cases, you want JavaScript to run before anything the page might do. To handle these situations, we need to adjust the code.

let myScript = document.createElement('script')
myScript.setAttribute('src'.'./index.js')
myScript.setAttribute('async'.'false')

let head = document.head
head.insertBefore(myScript, head.firstElementChild)
Copy the code

There are two new features in the code to ensure that external script files are loaded and run before any other content on the page is rendered:

  • We start by setting the Async property of the script element to false. Why is that? This is because dynamically loaded script files are loaded asynchronously by default. We want to explicitly override the default behavior.

  • Next, we make sure to load the script before loading the rest of the page. Adding a Script element at the top of the head element is the best place to make sure it runs before anything else the page might reach.

Run the related code after the script file is loaded

It is not uncommon to load an external script file and then immediately call a function (or depend on something in the loaded script). Such as:

<scirpt src="./api.js"></scirpt>
<scirpt>
  getArticleDetail({
    id: '1'
  })
</scirpt>
Copy the code

The first script element loads api.js. The second script element calls the content of api.js that depends on the previous script element loading. All of this works because the browser handles the scene naturally.

For dynamically loaded script files, if we want similar behavior, we need to add an additional load event to listen for our script and call the relevant code when it listens:

let myScript = document.createElement('script')
myScript.setAttribute('src'.'./index.js')
document.body.appendChild(myScript)

myScript.addEventListener('load', scriptLoaded)

function scriptLoaded() {
  console.log('Hi')}Copy the code

When index.js is loaded and executed, the load event is triggered, calling the scriptLoaded event handler.