https://github.com/devessenceinc/BlazorScriptReload
A solution for using JavaScript in Blazor Web Applications
https://github.com/devessenceinc/BlazorScriptReload
Last synced: 8 months ago
JSON representation
A solution for using JavaScript in Blazor Web Applications
- Host: GitHub
- URL: https://github.com/devessenceinc/BlazorScriptReload
- Owner: devessenceinc
- License: other
- Created: 2024-12-30T14:17:01.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-02-11T19:18:56.000Z (9 months ago)
- Last Synced: 2025-02-11T20:27:09.093Z (9 months ago)
- Language: JavaScript
- Homepage:
- Size: 935 KB
- Stars: 10
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- trackawesomelist - BlazorScriptReload (⭐14) -   A component which provides support for using JavaScript in Blazor Web Applications (Recently Updated / [Mar 01, 2025](/content/2025/03/01/README.md))
README
# Blazor Script Reload
Blazor Web Applications (ie. Static Server-Side Blazor using Enhanced Navigation) only process `````` elements during the initial page load. This means that any ```<script>``` elements which are encountered during subsequent "enhanced" navigations are ignored, resulting in unexpected behavior and broken functionality.
This project provides a simple solution for allowing ```<script>``` elements to behave in a standard manner in a Blazor Web Application. It was inspired by the [BlazorPageScript](https://github.com/MackinnonBuck/blazor-page-script) project created by Mackinnon Buck however it takes a different approach.
## Goals
- allow developers to use standard ```<script>``` elements in their Blazor Web Application components
- allow content creators to use standard ```<script>``` elements in their markup (if they have the permission to do so in their application)
- leverage standard browser script loading behaviors
- support external and in-line scripts
- support scripts in the head and body of a document
- support most standard script libraries without requiring any modification
- support script loading order to manage script dependencies
- provide a simple alternative for simulating onload behavior during enhanced navigation
- ensure that scripts are only executed once per enhanced navigation** (see Notes)
- utilize an opt-in approach to avoid undesired side effects
- provide a simple integration story
## Solution
Utilizes a custom HTML element which interacts with the Blazor "enhancedload" event. When an "enhancedload" occurs it triggers logic which iterates over all of the script elements in the page. Any script element which has a **data-reload** attribute specified is "replaced" in the DOM which forces the browser to process the script element utilizing its standard script loading approach.
## Integration
- include the latest BlazorScriptReload Nuget package into your Blazor Web Application project:
```
<ItemGroup>
<PackageReference Include="BlazorScriptReload" Version="1.0.4" />
</ItemGroup>
```
- add a ```@using BlazorScriptReload``` to your _Imports.razor (or simply add the using statement to App.razor as that is the only place it will be referenced)
- include the ```<ScriptReload />``` component at the bottom of your body section in App.razor:
```
<body>
<Routes />
...
<script src="_framework/blazor.web.js">