How to load a JavaScript file in the Blazor client index.html
Question
I have the following JavaScript code in a.js file:
export function testAlert() {
alert('Testing Blazor');
}
When I added this to my Razor component , I get a warning:
I added the following to the index.html file - as recommended:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>BlazorTest</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="BlazorTest.styles.css" rel="stylesheet" />
<script type="text/javascript" src="scripts/testing.js"></script>
</head>
Modified the component accordingly:
@inject IJSRuntime JS
protected override async Task OnAfterRenderAsync(bool firstRender)
{
base.OnAfterRenderAsync(firstRender);
await JS.InvokeAsync<string>("testAlert");
}
When I load the page, I get the following error:
Unhandled exception rendering component: Could not find 'testAlert' ('testAlert' was undefined).
I checked the source of the page, and it looked like this:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>BlazorTest</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="BlazorTest.styles.css" rel="stylesheet" />
</head>
What happened to the modified index.html with the loaded script?
1 answers
solution1
1 ACCPTED 2021-03-11 18:04:29
Sometimes the index.html file is cached by the browser. That may be the case here.
Usually forcing a refresh with Ctrl-F5 will force a download of the newly edited file.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.