嵌入YouTube视频的.NET8 Blazor应用突发Illegal invocation JS错误求助

开发者阿泽

2026-6-16

解决方案：修复YouTube嵌入导致的Permissions非法调用错误

问题分析

你遇到的TypeError: Failed to execute 'query' on 'Permissions': Illegal invocation错误，是近期YouTube播放器JS更新引发的兼容性问题——YouTube的脚本在调用navigator.permissions.query时丢失了正确的上下文（this指向），导致方法调用不符合浏览器规范，和你的Blazor代码、iframe嵌入方式无关。

修复步骤

方法1：全局JS注入

在Blazor应用的wwwroot/js/site.js文件中添加以下代码：

// 修复YouTube播放器的Permissions.query调用上下文问题
if (navigator.permissions?.query) {
  const originalQuery = navigator.permissions.query;
  navigator.permissions.query = function(...args) {
    return originalQuery.apply(navigator.permissions, args);
  };
}

然后在index.html中确保该脚本在Blazor初始化前加载：

<script src="js/site.js"></script>
<script src="_framework/blazor.webassembly.js"></script>

方法2：页面级JS注入

如果只想在含视频的页面修复，可在对应Blazor组件中添加以下代码：

@inject IJSRuntime JSRuntime

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await JSRuntime.InvokeVoidAsync("eval", @"
            if (navigator.permissions?.query) {
                const originalQuery = navigator.permissions.query;
                navigator.permissions.query = function(...args) {
                    return originalQuery.apply(navigator.permissions, args);
                };
            }
        ");
    }
}