我试图调用一个JS函数。JS脚本由第三方提供。
在简单的HTML/JS中，我可以写：
<html>
<head>
<script src="myscriptA.js"></script>
<script src="myscriptB.js"></script>
</head>
<body>
<div id="foo"></div>
<div id="bar"></div>
<script>
var viewer = new foo.Viewer('foo', /*other params*/);
viewer.function1().then(() => { /*ommited code*/ }).catch((error) => { console.log(error)});
document.getElementById('bar').addEventListener('click', event => {
var b1 = new B('bar', /*params*/)});
var b2 = new B('foo');
viewer.addB(b1, b2, { click: function(e) { viewer.function2() } });
</script>
</body>
</html>
我想和Blazor做同样的事情。目前，我可以使用我的组件访问myscriptA.js文件
Page3.razor
@page "/Page3"
@inject IJSRuntime JS
@code {
var scriptA = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./js/myscriptA.js");
var foo = await JSRuntime.InvokeAsync<IJSObjectReference>("new foo.Viewer", scriptA);
// I have try:
var foo = await JSRuntime.InvokeAsync<IJSObjectReference>("new foo.Viewer", "foo", @*other params*@);
var foo = await JSRuntime.InvokeAsync<IJSObjectReference>("foo.Viewer", "foo", @*other params*@);
var foo = await JSRuntime.InvokeAsync<IJSObjectReference>("Viewer", "foo", @*other params*@);
var foo = await JSRuntime.InvokeAsync<IJSObjectReference>("new Viewer", "foo", @*other params*@);
}
对于我的组件中的每个C#foo变量，我的浏览器控制台显示：
blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Could not find 'new foo.Viewer' ('new foo' was undefined).
Error: Could not find 'new foo.Viewer' ('new foo' was undefined).
at https://localhost:5001/_framework/blazor.webassembly.js:1:1287
at Array.forEach (<anonymous>)
at e.findFunction (https://localhost:5001/_framework/blazor.webassembly.js:1:1247)
at b (https://localhost:5001/_framework/blazor.webassembly.js:1:2989)
at https://localhost:5001/_framework/blazor.webassembly.js:1:3935
at new Promise (<anonymous>)
at Object.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.webassembly.js:1:3908)
at Object.w [as invokeJSFromDotNet] (https://localhost:5001/_framework/blazor.webassembly.js:1:64232)
at _mono_wasm_invoke_js_blazor (https://localhost:5001/_framework/dotnet.5.0.4.js:1:190800)
at do_icall (<anonymous>:wasm-function[10596]:0x194e4e)
更新
2021年5月8日：index.html
正如评论中所写的那样(用Blazor调用JavaScript函数(来自外部库((，我只想在Page3.razor文件中注入myscriptA.js和myscriptB.js，而不想在其他文件(Page1、Page2、Page4…(中注入
2021年5月11日：js文件
作为Blazor组件的*.css文件，我尝试添加一个与我的页面同名的*.js文件：
Project.csprojPages文件夹Page1.razorPage2.razorPage2.razor.css<--在SharedNavMenu.razor中看到Page3.razorPage3.razor.js
我有相同的错误
你很接近！！要仅在需要的地方加载JS文件(例如，特定页面(，您需要实现IJSObjectReference接口并正确利用JavaScript模块隔离。
Razor页面：
@inject IJSRuntime JsRuntime
<h1>My Page</h1>
@code{
private IJSObjectReference MyJsModule { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
try
{
// Load the JS Helpers Module
MyJsModule = await JsRuntime.InvokeAsync<IJSObjectReference>("import", "./js/MyScript.js");
}
catch (Exception ex)
{
Logger.LogError($"Failed to load JS module. Error: {ex}");
}
}
}
private async void AddViewer()
{
try
{
await MyJsModule.InvokeVoidAsync("AddViewer", "foo");
}
catch (Exception ex)
{
Logger.LogError($"Failed to execute JS function. Error: {ex}");
}
}
MyScript.js文件：
import "./myScriptWithUsefulCodes.min.js";
export function AddViewer(id) {
var viewer = new foo.Viewer(id, /*other params*/);
/* ...Your code... */
}
点击此处阅读更多信息：https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-5.0#javascript模块中的javascript隔离
难道不能像默认的Blazor示例加载.json文件一样，在Blazor页面中加载JavaScript文件吗？
然后使用IJSRuntime将该字符串中的内容作为JavaScript"执行"？