How to load js files dynamically by javascript

This article introduces the relevant knowledge of "how javascript loads js files dynamically". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Dynamically insert the script tag to load the script.

Function loadScript (url, callback) {const script = document.createElement ('script') Script.type = 'text/javascript'; / / processing IE if (script.readyState) {script.onreadystatechange = function () {if (script.readyState =' loaded' | | script.readyState = = 'complete') {script.onreadystatechange = null; callback () } else {/ / handle other browsers script.onload = function () {callback ();}} script.src = url; document.body.append (script);} / / dynamically load js loadScript ('file.js', function () {console.log (' load complete');})

2. Load js files through xhr, but in this way, you may face cross-domain problems.

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. Merge multiple js files into the same and compress them. Currently, most browsers already support parallel downloading of js files, but there are still a certain number of restrictions (browser-based, some browsers can only download 4). In addition, each js file requires an additional http connection, and the four 25KB files are larger than the 100KB files. Therefore, it is best to merge multiple js files into the same and compress the code.

This is the end of the content of "how javascript loads js files dynamically". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!