--- title: JavaScript location in ASP.NET Core Blazor apps author: guardrex description: Learn where to place and how to load JavaScript in Blazor apps. monikerRange: '>= aspnetcore-3.1' ms.author: riande ms.custom: mvc ms.date: 11/12/2024 uid: blazor/js-interop/javascript-location --- # JavaScript location in ASP.NET Core Blazor apps [!INCLUDE[](~/includes/not-latest-version.md)] Load JavaScript (JS) code using any of the following approaches: :::moniker range=">= aspnetcore-6.0" * [Load a script in `` markup](#load-a-script-in-head-markup) (*Not generally recommended*) * [Load a script in `` markup](#load-a-script-in-body-markup) * [Load a script from an external JavaScript file (`.js`) collocated with a component](#load-a-script-from-an-external-javascript-file-js-collocated-with-a-component) * [Load a script from an external JavaScript file (`.js`)](#load-a-script-from-an-external-javascript-file-js) * [Inject a script before or after Blazor starts](#inject-a-script-before-or-after-blazor-starts) :::moniker-end :::moniker range="< aspnetcore-6.0" * [Load a script in `` markup](#load-a-script-in-head-markup) (*Not generally recommended*) * [Load a script in `` markup](#load-a-script-in-body-markup) * [Load a script from an external JavaScript file (`.js`)](#load-a-script-from-an-external-javascript-file-js) * [Inject a script after Blazor starts](#inject-a-script-after-blazor-starts) :::moniker-end :::moniker range=">= aspnetcore-8.0" > [!WARNING] > Only place a ``) in the [`` element markup](xref:blazor/project-structure#location-of-head-and-body-content): ```html ... ``` Loading JS from the `` isn't the best approach for the following reasons: * JS interop may fail if the script depends on Blazor. We recommend loading scripts using one of the other approaches, not via the `` markup. * The page may become interactive slower due to the time it takes to parse the JS in the script. ### Load a script in `` markup Place the JavaScript tags (``) inside the [closing `` element](xref:blazor/project-structure#location-of-head-and-body-content) after the Blazor script reference: ```html ... ``` **In the preceding example, the `{BLAZOR SCRIPT}` placeholder is the Blazor script path and file name.** For the location of the script, see . :::moniker range=">= aspnetcore-6.0" ### Load a script from an external JavaScript file (`.js`) collocated with a component [!INCLUDE[](~/blazor/includes/js-interop/js-collocation.md)] For more information on RCLs, see . :::moniker-end ### Load a script from an external JavaScript file (`.js`) Place the JavaScript (JS) tags (``) with a script source (`src`) path inside the [closing `` element](xref:blazor/project-structure#location-of-head-and-body-content) after the Blazor script reference: ```html ... ``` For the placeholders in the preceding example: * The `{BLAZOR SCRIPT}` placeholder is the Blazor script path and file name. For the location of the script, see . * The `{SCRIPT PATH AND FILE NAME (.js)}` placeholder is the path and script file name under `wwwroot`. In the following example of the preceding ` ``` You can also serve scripts directly from the `wwwroot` folder if you prefer not to keep all of your scripts in a separate folder under `wwwroot`: ```html ``` When the external JS file is supplied by a [Razor class library](xref:blazor/components/class-libraries), specify the JS file using its stable static web asset path: `_content/{PACKAGE ID}/{SCRIPT PATH AND FILE NAME (.js)}`: * The `{PACKAGE ID}` placeholder is the library's [package ID](/nuget/create-packages/creating-a-package-msbuild#set-properties). The package ID defaults to the project's assembly name if `` isn't specified in the project file. * The `{SCRIPT PATH AND FILE NAME (.js)}` placeholder is the path and file name under `wwwroot`. ```html ... ``` In the following example of the preceding ` ``` For more information, see . :::moniker range=">= aspnetcore-6.0" ### Inject a script before or after Blazor starts To ensure scripts load before or after Blazor starts, use a JavaScript initializer. For more information and examples, see . :::moniker-end :::moniker range="< aspnetcore-6.0" ### Inject a script after Blazor starts To inject a script after Blazor starts, chain to the `Promise` that results from a manual start of Blazor. For more information and an example, see . :::moniker-end ## JavaScript isolation in JavaScript modules Blazor enables JavaScript (JS) isolation in standard [JS modules](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules) ([ECMAScript specification](https://tc39.es/ecma262/#sec-modules)). JS isolation provides the following benefits: * Imported JS no longer pollutes the global namespace. * Consumers of a library and components aren't required to import the related JS. In server-side scenarios, always trap in case loss of Blazor's SignalR circuit prevents a JS interop call from disposing a module, which results in an unhandled exception. Blazor WebAssembly apps don't use a SignalR connection during JS interop, so there's no need to trap in Blazor WebAssembly apps for module disposal. For more information, see the following resources: * [JavaScript isolation in JavaScript modules](xref:blazor/js-interop/call-javascript-from-dotnet#javascript-isolation-in-javascript-modules) * [JavaScript interop calls without a circuit](xref:blazor/js-interop/index#javascript-interop-calls-without-a-circuit)