英文:
Blazor WebAssembly Dotnet 5 Javascript Interop can't find JS function
问题
I am getting this error while trying to run JS in Blazor WA dotnet 6:
> Microsoft.JSInterop.JSException: 在‘bweInterop’中找不到‘bweInterop.getWindowSize’（‘bweInterop’未定义）。
>Error: 在‘bweInterop’中找不到‘bweInterop.getWindowSize’（‘bweInterop’未定义）。
My index.razor is:
@page "/"
@using BwaJsInterop.Model
@inject IJSRuntime Js
<PageTitle>Home</PageTitle>
@if (_windowSize.Width != null)
{
<h2>
窗口大小: @_windowSize.Width x @_windowSize.Height
</h2>
}
<button @onclick="GetWindowSize">获取窗口大小</button>
@code {
private WindowSize _windowSize = new();
private async Task GetWindowSize()
{
_windowSize = await Js.InvokeAsync<WindowSize>(
"bweInterop.getWindowSize");
}
}
I placed the external javascript in the wwwroot/index.js:
<body>
<div id="app">加载中...</div>
<div id="blazor-error-ui">
发生了未处理的错误。
<a href="" class="reload">重新加载</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script src="js/bweInterop.js"></script>
</body>
Javascript is located here:
And finally the javascript file itself:
let bweInterop = {};
bweInterop.getWindowSize = function () {
return {
width: window.innerWidth,
height: window.innerHeight
};
}
In the browser console, I ran bweInterop.getWindowSize() function and it works, so the problem is not the javascript.
Am I missing anything?
英文:
I am getting this error while trying to run JS in Blazor WA dotnet 6:
> Microsoft.JSInterop.JSException: Could not find 'bweInterop.getWindowSize' ('bweInterop' was undefined).
>Error: Could not find 'bweInterop.getWindowSize' ('bweInterop' was undefined).
My index.razor is:
@page "/"
@using BwaJsInterop.Model
@inject IJSRuntime Js
<PageTitle>Home</PageTitle>
@if (_windowSize.Width != null)
{
<h2>
Window Size: @_windowSize.Width x @_windowSize.Height
</h2>
}
<button @onclick="GetWindowSize">Get Window Size</button>
@code {
private WindowSize _windowSize = new();
private async Task GetWindowSize()
{
_windowSize = await Js.InvokeAsync<WindowSize>(
"bweInterop.getWindowSize");
}
}
I placed the external javascript in the wwwroot/index.js:
<body>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script src="js/bweInterop.js"></script>
</body>
Javascript is located here:
And finally the javascript file itself:
let bweInterop = {};
bweInterop.getWindowSize = function () {
return {
width: window.innerWidth,
height: window.innerHeight
};
}
In the browser console, I ran bweInterop.getWindowSize() function and it works, so the problem is not the javascript.
Am I missing anything?
答案1
得分: 2
你可能遇到了Blazor的JavaScript模块隔离问题（请参见此处）。尝试在你的Blazor组件内明确加载JS文件，即：
@page "/"
@using BwaJsInterop.Model
@inject IJSRuntime Js
<PageTitle>Home</PageTitle>
@if (_windowSize.Width != null)
{
<h2>
Window Size: @_windowSize.Width x @_windowSize.Height
</h2>
}
<button @onclick="GetWindowSize">Get Window Size</button>
@code {
private WindowSize _windowSize = new();
private IJSObjectReference? module;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
module = await Js.InvokeAsync<IJSObjectReference>("import", "./js/bweInterop.js");
}
}
private async Task GetWindowSize()
{
_windowSize = await module.InvokeAsync<WindowSize>(
"bweInterop.getWindowSize");
}
}
英文:
Maybe you're running into issues with Blazor's JavaScript module isolation (see here). Try explicitly loading your JS file inside your Blazor component, i. e.:
@page "/"
@using BwaJsInterop.Model
@inject IJSRuntime Js
<PageTitle>Home</PageTitle>
@if (_windowSize.Width != null)
{
<h2>
Window Size: @_windowSize.Width x @_windowSize.Height
</h2>
}
<button @onclick="GetWindowSize">Get Window Size</button>
@code {
private WindowSize _windowSize = new();
private IJSObjectReference? module;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
module = await Js.InvokeAsync<IJSObjectReference>("import", "./js/bweInterop.js");
}
}
private async Task GetWindowSize()
{
_windowSize = await module.InvokeAsync<WindowSize>(
"bweInterop.getWindowSize");
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论