Blazor Web Assembly 中的 window.focus/blur 事件

Posted 2023-03-27

【中文标题】Blazor Web Assembly 中的 window.focus/blur 事件

【英文标题】：window.focus/blur events in Blazor Web Assembly

【发布时间】：2021-05-27 18:33:02

【问题描述】：

基本上类似于 How to tell if browser/tab is active 中的场景，但使用 Blazor Web Assembly。就我而言，这个想法特别是当 Blazor 应用程序出现在前端时，从后端重新加载数据。

我还没有找到任何指向这个特定场景的链接（大多数 Blazor 和焦点都是关于现在解决的 setfocus 问题）。当您的 Blazor 应用程序中有多个页面并且其中只有一个或几个页面想要对 focus/blur/document.hidden 做出反应时，最好的解决方法是什么？ JSInvokable 从静态到实例将是有问题的，如果某些页面没有功能，但其他人有。 （我最初的想法：一个存储字符串的JS func“registerFocusEvent('mycallback')”，当焦点发生时，只有在设置字符串时才回调.NET）

【问题讨论】：

“来到最前面”是什么意思？你是如何实例化组件的？

用户在浏览器中创建一个新选项卡或切换到另一个选项卡，然后返回到 Blazor 应用程序。

【参考方案1】：

我不知道除了 JS 互操作之外的其他方法。那么你可以做什么（基于我在文档here 和here 上的工作：

在你的 razor 组件中添加一个 JS Invokable 更新方法（我使用的是Index.razor）。注意，这有点奇怪，因为JSInvokable 方法需要是静态的。

private static Func<Task> updateAsyncAction;
protected override void OnInitialized()

    base.OnInitialized();
    updateAsyncAction = async () =>  await InvokeAsync(StateHasChanged); ; // triggers a rerender.


[JSInvokable]
public static async Task Update()

    await updateAsyncAction.Invoke();

在 e.g. 中添加调用者wwwroot\Interop.js文件：

window.IndexFunctions = 
    EnableOnFocusUpdate: function () 
        window.addEventListener("focus", function () 
            DotNet.invokeMethodAsync('APP ASSEMBLY', 'Update'); // The placeholder APP ASSEMBLY is the app's app assembly name.
        );
    

在index.html 中，在结束正文标记之前添加脚本

<script src="Interop.js"></script>

最后，你必须在剃须刀页面中启用js事件监听器

@inject IJSRuntime JS
...
protected override async Task OnAfterRenderAsync(bool firstRender)

    await base.OnAfterRenderAsync(firstRender);
    if (firstRender)
    
        await JS.InvokeVoidAsync("IndexFunctions.EnableOnFocusUpdate");
    

但是，您需要单击一次 blazor 窗口才能开始工作……所以可能需要更多的魔法。

edit：如 cmets 中所述，Update 将保持注册状态，即使您离开该页面也是如此，因此会重新呈现焦点。不过我没有看到异常，所以在 WASM 中，对象/实例似乎没有被破坏。

如果 razor 组件有某种OnNavigateAway 或析构函数，我们可以使用它从updateAsyncAction 中删除实例，那就太好了。我们现在能做的最好的事情是使用removeEventListener 进行另一个JSInterop 调用。 我可能会在 Blazor github 上问这个问题。

【讨论】：

还没试过，但是……如果我离开那个索引，听众不是一直在附近吗？坚持使用样板，如果我去柜台，并在那里切换标签，电话会去哪里？

@christophwille 好点！需要更多代码来删除事件侦听器。有一个原生的 blazor 解决方案会很好

【参考方案2】：

我在https://github.com/zxyao145/BQuery/找到了现成的解决方案