【问题标题】:window.focus/blur events in Blazor Web AssemblyBlazor Web Assembly 中的 window.focus/blur 事件
【发布时间】: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 应用程序。

标签: blazor blazor-webassembly


【解决方案1】:

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

在你的 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/找到了现成的解决方案

【讨论】:

    猜你喜欢
    • 2020-12-22
    • 2021-05-21
    • 2020-11-24
    • 2021-07-05
    • 1970-01-01
    • 2023-01-24
    • 2021-11-27
    • 1970-01-01
    • 2020-11-02
    相关资源
    最近更新 更多