Blazor/Maui项目JSInterop调用isElementInViewport提示未定义问题

问题描述 #

在Blazor/Maui项目中使用JSInterop实现即时聊天的消息已读逻辑：判断消息气泡是否在聊天容器视窗内，可见则标记为已读，不可见则累加未读计数。index.html中的其他JS函数均可正常调用，但自行编写的isElementInViewport函数出现异常：启用函数内的return判断语句时，调用会提示“找不到'isElementInViewport'（未定义）”；注释该return语句后，函数能正常被调用。该函数已在VS Code的POC验证中确认逻辑可行。

问题代码 #

JS函数 #

function isElementInViewport(message) {
    try {
        var el = document.getElementById(message);
        if (!el) return false;
        var rect = el.getBoundingClientRect();
        var container = document.querySelector('.chatboxContainerInner');
        var containerRect = container.getBoundingClientRect();
        return (
            rect.top >= containerRect.top &&
            rect.left >= containerRect.left &&
            rect.bottom <= containerRect.bottom &&
            rect.right <= containerRect.right; // 此处存在语法错误
        );
    } catch (e) {
        return false;
    }
}

C#调用代码 #

private async Task CallBackRenderMessage(Guid messageId)
{
    try
    {
        var message = _channel.Messages.FirstOrDefault(m => m.Id == messageId);
        if (message == null)
            return;
        await Task.Delay(100);
        var visible = await _jsRuntime.InvokeAsync<bool>("isElementInViewport", $"message{message.Id}");
        if (visible)
        {
            message.IsRead = true;
            IsReadCallBack(message.Id);
        }
    }
    catch (Exception ex)
    {
        Console.WriteLine($"Error invoking JS function: {ex.Message}");
    }
}

报错信息 #

[DOTNET] Error invoking JS function: Could not find 'isElementInViewport' ('isElementInViewport' was undefined).
[DOTNET] Error: Could not find 'isElementInViewport' ('isElementInViewport' was undefined).

解决方法 #

问题根源是JS函数存在语法错误：return语句的条件块最后一行rect.right <= containerRect.right后面多了一个分号，导致整个函数无法被JS引擎正确解析，函数未被注册到全局作用域，因此C#调用时提示“未定义”。

修正方法：去掉该分号，修改后的return部分代码如下：

return (
    rect.top >= containerRect.top &&
    rect.left >= containerRect.left &&
    rect.bottom <= containerRect.bottom &&
    rect.right <= containerRect.right
);

补充说明 #

• 注释return语句后函数能正常调用，是因为此时函数没有语法错误，JS引擎可以正常解析并注册该函数；
• 若修正语法后仍有问题，可确认函数是否挂载到window全局对象（Blazor/Maui的JSInterop默认调用全局作用域的函数），以及调用时DOM元素是否已渲染完成（当前代码中的Task.Delay(100)可确保元素渲染，但也可改用OnAfterRenderAsync生命周期方法）。

内容的提问来源于stack exchange，提问作者user25618643