通过 JSInterop 调用 DOM 元素上的方法

Question

如何在 jsinterop (

Element

) 调用中给定

ElementReference

(Blazor) 参数来调用 (DOM)

InvokeVoidAsync

的 Javascript 方法？

我想我可以为该元素分配一个 id 属性，然后在 InvokeVoidAsync 调用中传递

document.getElementById("soandso").FunctionIWantToCall

，但这会消除 Blazor 的一些用处...

Answer 1

我一直在开发一个完整的 Javascript 互操作库，该库允许将 Blazor WASM 和 Javascript 一起使用，而无需编写任何 Javascript。 SpawnDev.BlazorJS。您可以在此处支持的 Javascript 类型查看库中包含的 Javascript 对象列表。该库正在积极开发中，因为有数百种 Javascript 接口和对象类型需要支持，但我随时准备帮助您解决可能遇到的任何问题（请参阅Issues...总共 19 个，0 个开放 atm。）

例如，将事件附加到窗口：

[Inject]
BlazorJSRuntime JS { get; set; }

void AttachEventHandlersExample()
{
    using var window = JS.Get<Window>("window");
    // If this is the first time Window_OnStorage has been attached to an event a .Net reference is automatically created and held for future use and removal
    window.OnStorage += Window_OnStorage;
    // the window JSObject reference can safely be disposed as the .Net reference is attached to Window_OnStorage internally
}
void DetachEventHandlersExample()
{
    using var window = JS.Get<Window>("window");
    // If this is the last reference of Window_OnStorage being removed then the .Net reference will automatically be disposed.
    // IMPORTANT - detaching is important for preventing resource leaks. .Net references are only released when the reference count reaches zero (same number of -= as += used)
    window.OnStorage -= Window_OnStorage;
}

void Window_OnStorage(StorageEvent storageEvent)
{
    Console.WriteLine($"StorageEvent: {storageEvent.Key} has changed");
}

通过 ElementReference 使用 HTML 元素：

var video = new HTMLVideoElement(elementReference);
video.Src = "https://www.somesite.com/avideo.mp4";
await video.Play();

SpawnDev.BlazorJS 的目标是允许在 Blazor WASM 中使用 Javascript，而无需编写 Javascript。功能数量太长，无法在此列出。

Nuget：SpawnDev.BlazorJS

目前下载量超过 14,000 次。

如果需要，请参阅 SpawnDev.BlazorJS GitHub 存储库以获取更多信息。