![\"How](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/175410102744340.jpeg\")
How do you dynamically load a JavaScript file?
Aug 02, 2025 am 10:17 AM
Create script elements and add them to the DOM to dynamically load JavaScript files; 2. Use Promise to encapsulation to achieve more concise asynchronous control; 3. Pay attention to execution order, CORS, security risks and duplicate loading issues; 4. You can record loaded scripts through Set to prevent duplicate loading. This method is suitable for lazy loading, third-party components or conditional functions, and it is necessary to ensure that the script source is trustworthy. Finally, the results are processed through onload or onerror callbacks. The entire process is automatically completed by the browser to download and execute the script.
You dynamically load a JavaScript file in the browser by creating a <script></script> element using JavaScript and appending it to the DOM. This allows you to load and execute a script on demand, rather than including it statically in your HTML.
Here's how to do it:
1. Using document.createElement('script')
This is the most common and straightforward method.
function loadScript(src, callback) {
const script = document.createElement('script');
script.src = src;
// Optional: Run code when the script is loaded
script.onload = function() {
console.log('Script loaded successfully:', src);
if (callback) callback(null, script);
};
// Optional: Handle loading errors
script.onerror = function() {
console.error('Failed to load script:', src);
if (callback) callback(new Error(`Failed to load ${src}`));
};
// Append the script to the document (usually <head> or <body>)
document.head.appendChild(script);
}
// Usage:
loadScript('https://example.com/external-script.js', function(err, script) {
if (err) {
console.error('Script load error:', err);
} else {
console.log('External script executed.');
}
});2. Promised Version (Modern Approach)
For cleaner async handling, wrap it in a Promise:
function loadScriptAsync(src) {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = src;
script.onload = () => resolve(script);
script.onerror = () => reject(new Error(`Failed to load ${src}`));
document.head.appendChild(script);
});
}
// Usage with async/await:
async function init() {
try {
await loadScriptAsync('/path/to/script1.js');
await loadScriptAsync('/path/to/script2.js');
console.log('All scripts loaded');
} catch (err) {
console.error('Error loading script:', err);
}
}3. Important Notes
- Execution Timing : The loaded script executes as soon as it's downloaded, so make sure any dependencies are loaded in the right order.
- CORS : If loading from another domain, the server must allow it via CORS headers.
- Security : Only load scripts from trusted sources—dynamically injecting scripts can be a security risk (XSS).
- Duplicate Loading : The browser may cache the script, but if you want to prevent reloading, you can track which scripts are already loaded.
4. Preventing Duplicate Loads
const loadedScripts = new Set();
function loadScriptOnce(src, callback) {
if (loadedScripts.has(src)) {
if (callback) callback(null);
return;
}
const script = document.createElement('script');
script.src = src;
script.onload = () => {
loadedScripts.add(src);
if (callback) callback(null);
};
script.onerror = () => callback(new Error(`Failed to load ${src}`));
document.head.appendChild(script);
}This ensures a script isn't loaded twice.
Basically, dynamically loading JavaScript is just about creating a script tag and letting the browser handle the rest. It's simple but powerful for lazy-loading features, third-party widgets, or conditional functionality.
The above is the detailed content of How do you dynamically load a JavaScript file?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Python implements dynamic page loading and asynchronous request processing function analysis for headless browser collection applications
Aug 08, 2023 am 10:16 AM
Python implements the dynamic loading and asynchronous request processing functions of headless browser collection applications. In web crawlers, sometimes it is necessary to collect page content that uses dynamic loading or asynchronous requests. Traditional crawler tools have certain limitations in processing such pages, and cannot accurately obtain the content generated by JavaScript on the page. Using a headless browser can solve this problem. This article will introduce how to use Python to implement a headless browser to collect page content using dynamic loading and asynchronous requests.
How to handle dynamic loading and switching of components in Vue
Oct 15, 2023 pm 04:34 PM
Handling dynamic loading and switching of components in Vue Vue is a popular JavaScript framework that provides a variety of flexible functions to handle the dynamic loading and switching of components. In this article, we will discuss some methods of handling dynamic loading and switching of components in Vue, and provide specific code examples. Dynamically loading components means dynamically loading components at runtime as needed. This improves the performance and loading speed of your application because relevant components are loaded only when needed. Vue provides async and awa
How to create a table that dynamically loads data using Vue and Element-UI
Jul 21, 2023 pm 11:49 PM
How to use Vue and Element-UI to create a table that dynamically loads data. In modern web development, data tables are one of the common interface components. Vue.js is a very popular front-end framework nowadays, and Element-UI is a set of component libraries developed based on Vue.js, which provides a rich set of UI components for us to use. This article will introduce how to use Vue and Element-UI to create a table that can dynamically load data, and give corresponding code examples. First, we need to install
Revealing the principle of hot update in Golang: insider explanation of dynamic loading and reloading
Jan 20, 2024 am 10:09 AM
Exploring the Principle of Golang Hot Update: The Mystery of Dynamic Loading and Reloading Introduction: In the field of software development, programmers often hope to be able to modify and update code without restarting the application. Such requirements are of great significance to both development efficiency and system operation reliability. As a modern programming language, Golang provides developers with many convenient mechanisms to implement hot updates. This article will delve into the principles of Golang hot update, especially the mysteries of dynamic loading and reloading, and will combine it with specific code examples.
Solve Vue error: Unable to correctly use Vue Router to dynamically load components based on routing parameters
Aug 20, 2023 am 08:09 AM
Solve Vue error: Unable to correctly use VueRouter to dynamically load components based on routing parameters. In the process of using VueRouter for routing jumps, sometimes we need to dynamically load components based on routing parameters. However, in some cases, we may encounter a common error: unable to correctly use VueRouter to dynamically load components based on routing parameters. This article will describe how to resolve this error and provide code examples. First, we need to make it clear: VueRouter can pass
How to use reflection and dynamically load assemblies in C#
Oct 08, 2023 pm 12:12 PM
How to use reflection and dynamically load assemblies in C# Introduction: In C#, reflection (Reflection) is a powerful mechanism that allows us to obtain and operate the metadata of the program at runtime, including type information, member information, etc. Dynamically loading assemblies is a common application implemented through reflection, and is very useful in some specific scenarios. This article will introduce in detail how to use reflection and dynamically load assemblies in C#, and provide specific code examples. The basic concept of reflection Reflection is an important function in the C# language
How to handle the compression and dynamic loading of image resources in Vue technology development
Oct 10, 2023 pm 11:57 PM
How to handle the compression and dynamic loading of image resources in Vue technology development. In modern web development, image resources are inevitable. However, large high-resolution images may affect the loading speed of web pages and affect the user experience. Therefore, compression and dynamic loading of image resources have become important issues in development. This article will introduce how to handle the compression and dynamic loading of image resources in Vue technology development, and provide specific code examples. 1. Image compression In order to improve the loading speed of web pages, we can compress image resources. exist
Use the load() method of the System class in Java to dynamically load classes or resources
Jul 25, 2023 am 10:25 AM
Use the load() method of the System class in Java to dynamically load classes or resources. In Java development, sometimes we need to dynamically load classes or resources while the program is running to achieve some flexible functions. Java provides the load() method of the System class to achieve this requirement. This article will introduce the use of the load() method of the System class and provide corresponding code examples. First, let’s understand the definition of the load() method: publicstaticvo
