JsInterop javascript 端如何以及在何处在 Blazor 服务器应用程序中实现？

Question

上下文

我正在尝试了解 JsInterop javascript 方面 的实现方式和位置。

在我的 Blazor Server 项目中给出以下示例代码：

public static ValueTask<string> Prompt(IJSRuntime jsRuntime, string message)
{
    // Implemented in exampleJsInterop.js
    return jsRuntime.InvokeAsync<string>(
    "exampleJsFunctions.showPrompt",
    message);
}

及其 javascript 对应物：

window.exampleJsFunctions = {
  showPrompt: function (message) {
    return prompt(message, 'Type anything here');
  }
};

（我理解 SignalR 基础设施及其在电路概念中的用途，我理解电路用于 Blazor Server 项目中的双向客户端服务器通信。）

问题

项目使用的唯一客户端脚本是：<script src="_framework/blazor.server.js"></script> 据了解，所有 javascript 执行分派功能都应该存在。我认为从服务器端完成 javascript 调用的唯一方法是一些 javascript eval() 功能。我试图找到源代码 _framework/blazor.server.js，我想它在这里 here in github，因为它在 /dist 文件夹中的构建输出包含文件 blazor.server.js

我试图在打字稿源代码中找到这部分（执行来自服务器的 javascript 函数 由其名称 给出的位置），但没有成功。谁能指出我正确的方向？我是不是看错地方了，还是没有 eval()？

*** 编辑：同时我了解到不仅 eval() 在这里播放，实际上这是最后一次机会，还有 window["functionName"](arguments); 及其变体。仍在寻找相关的源代码行...

Answer 1

您可以在 blazor.js 文件下添加自定义 JS 文件。您可以在其中声明您的函数，然后通过 JsRuntime 从 razor 组件调用它。

我发现的最简单的方法是将 IJSRuntime 注入组件。

@inject IJSRuntime JSRuntime;

Answer 2

I am trying to understand how and where JsInterop javascript side implemented.

在app主页面，一般是_Host.cshtml（或者_index.cshtml或者wwwroot/index.html等，取决于你的服务器代码结构），某处在<head>或者<body> 标签的结尾。您可以在此处放置 <script src="path/to/exampleJsFunctions.js"></script> 或立即在 <script> 标记内定义函数。

仅供参考，blazor.server.js 脚本负责浏览器和服务器之间的 websocket 连接。当您在应用程序中调用 Prompt(...) 方法时，服务器请求浏览器（通过 websocket）到运行在 window 中定义的名为 exampleJsFunctions.showPrompt 的 js 函数，具有给定的参数 message。如果 js 函数是在 window 中定义的，浏览器将运行它（如果你使用浏览器 devtools 在它上面放置一个断点，它将被命中）。否则，它会抛出错误。没有eval.

（实际上，如何为浏览器定义函数并不重要。唯一重要的是何时服务器要求浏览器调用该函数，浏览器可以在 window 对象下面找到该函数。）

如果您非常想看到源代码，您应该在 jsinterop sources 中找到它。

JsInterop javascript 端如何以及在何处在 Blazor 服务器应用程序中实现？

How and where JsInterop javascript side implemented in a Blazor Server App?

blazor

blazor-server-side

blazor-jsinterop