FBro 的 JS 交互 实战

mosheng

# FBro JavaScript ↔ C# 双向通信演示<br /> <br /> 这是一个完整的 FBro 浏览器框架 JavaScript 与 C# 双向通信演示项目。<br /> <br /> ## 项目结构<br /> <br /> ```<br /> ├── frontend/                      # React 前端项目<br /> │   ├── package.json               # 前端依赖配置<br /> │   ├── vite.config.js             # Vite 构建配置<br /> │   ├── index.html                 # HTML 入口<br /> │   └── src/<br /> │       ├── main.jsx               # React 入口<br /> │       ├── App.jsx                # 主应用组件（Tab 切换）<br /> │       ├── index.css              # 全局样式<br /> │       └── components/<br /> │           ├── JsCallCsharp.jsx   # Tab1: 前端调用后端<br /> │           └── CsharpCallJs.jsx   # Tab2: 后端调用前端<br /> │<br /> └── Csharp代码/                    # C# 后端项目<br />     ├── Program.cs                 # 应用程序入口<br />     ├── InitEvent.cs               # FBro 初始化事件<br />     ├── QueryHandler.cs            # cefQuery 处理器<br />     └── Form1.cs                   # 主窗体（包含浏览器控件）<br /> ```<br /> <br /> ## 功能说明<br /> <br /> ### Tab 1: 前端调用后端（JS → C#）<br /> <br /> 使用 `window.cefQuery()` 实现 JavaScript 向 C# 发送请求：<br /> <br /> 1. **发送文本消息** - 发送简单文本到 C#，C# 返回处理结果<br /> 2. **请求后端计算** - 发送数字到 C#，C# 进行计算并返回结果<br /> 3. **获取系统信息** - 请求 C# 返回操作系统、机器名等系统信息<br /> <br /> ```javascript<br /> // JavaScript 调用示例<br /> window.cefQuery({<br />     request: JSON.stringify({<br />         action: 'sendMessage',<br />         data: 'Hello from JavaScript!'<br />     }),<br />     onSuccess: function(response) {<br />         console.log('C# 返回:', response);<br />     },<br />     onFailure: function(errorCode, errorMessage) {<br />         console.error('错误:', errorMessage);<br />     }<br /> });<br /> ```<br /> <br /> ### Tab 2: 后端调用前端（C#/易语言 → JS）<br /> <br /> C# 通过 `ExecuteJavaScript()` 调用前端注册的全局函数：<br /> 易语言 通过 `框架.执行JS代码()` 调用前端注册的全局函数：<br /> <br /> 1. **receiveMessageFromCsharp(message)** - 接收简单文本消息<br /> 2. **receiveDataFromCsharp(jsonData)** - 接收 JSON 数据对象<br /> 3. **showNotificationFromCsharp(title, content, type)** - 显示通知<br /> 4. **updateUIFromCsharp(config)** - 更新 UI 样式<br /> 5. **calculateFromCsharp(a, b, operation)** - 执行计算<br /> <br /> ```csharp<br /> // C# 调用示例<br /> var frame = browser.GetMainFrame();<br /> frame.ExecuteJavaScript("receiveMessageFromCsharp('Hello from C#!')", "", 0);<br /> ```<br /> ```<br /> // 易语言 调用示例<br /> 框架 = 浏览器.取主框架()<br /> 框架.执行JS代码("receiveMessageFromCsharp('Hello from C#!')", "", 0)<br /> ```<br /> <br /> ## 运行步骤<br /> <br /> ### 1. 启动前端项目(开发环境)<br /> <br /> ```bash<br /> cd frontend<br /> npm install<br /> npm run dev<br /> ```<br /> <br /> 前端将运行在 `http://localhost:2030`<br /> <br /> ### 2. 运行 C# 项目<br /> <br /> 1. 将 `Csharp代码` 文件夹中的文件添加到你的 C# WinForms 项目<br /> 2. 添加 FBroSharp 引用<br /> 3. 确保 `FBroSubprocess.exe` 在运行目录中<br /> 4. 运行项目<br /> <br /> ### 3. 测试交互<br /> <br /> 1. 在 C# 窗体中点击「创建浏览器」按钮<br /> 2. 浏览器将加载 React 前端页面<br /> 3. 在 Tab1 中测试 JS → C# 通信<br /> 4. 使用 C# 控制面板按钮测试 C# → JS 通信<br /> 5. 在 Tab2 中查看 C# 调用的结果<br /> <br /> ## 关键技术点<br /> <br /> ### cefQuery 注册（必须在 InitPro 之前）<br /> <br /> ```csharp<br /> // Program.cs<br /> FBroSharpInitControl.QueryFunctions("cefQuery", "cefQueryCancel", new FBroQueryHandlerDis(0));<br /> FBroSharpInitControl.InitPro(set, init_event);  // 之后才能初始化<br /> ```<br /> ### 易语言的JS交互注册在初始化之前<br /> ```<br /> FBrowser_注册JS交互 (“cefQuery”, “cefQueryCancel”, &JS交互回调)<br /> ```<br /> <br /> ### QueryHandler 方法签名<br /> <br /> ⚠️ **重要**：参数类型必须是对象，不是 ID！<br /> <br /> ```csharp<br /> // ✅ 正确<br /> public override bool OnQuery(<br />     IFBroSharpBrowser browser,   // 对象，不是 int<br />     IFBroSharpFrame frame,       // 对象，不是 long<br />     long query_id, <br />     string request, <br />     bool persistent, <br />     IFBroSharpQueryCallback callback)<br /> ```<br /> <br /> 易语言的JS交互回调<br /> ```<br /> <br /> .版本 2<br /> <br /> .子程序 JS交互回调, 逻辑型, , !<br /> .参数 浏览器指针, 整数型, , 使用该回调的浏览器指针，创建”类_FBrowser_浏览器“浏览器变量后，通过调用"浏览器.绑定 (浏览器指针)"后使用类相关功能<br /> .参数 框架指针, 整数型, , 使用该回调的浏览器框架指针，创建”类_FBrowser_框架“框架变量后，通过调用"框架.绑定 (框架指针)"后使用类相关功能<br /> .参数 request, 文本型, , 对应JS函数中的“request”变量<br /> .参数 返回文本类值指针, 整数型, , 返回JS值的指针，通过“FBrowser_置文本类值”设置返回的文本值<br /> .参数 errorcode, 整数型, 参考, 对应JS函数中的“code”变量，返回JS的错误代码<br /> .参数 query_id, 整数型, , 对应JS函数返回值request_id<br /> .参数 type, 整数型, , 0为cefQuery 1为cefQueryCancel，为1时request不会有值<br /> <br /> <br /> ```<br /> <br /> ### 前端注册全局函数<br /> <br /> ```javascript<br /> // 在 window 对象上注册函数，供 C# 调用<br /> window.receiveMessageFromCsharp = (message) => {<br />     console.log('收到消息:', message);<br />     return '已收到';<br /> };<br /> ```<br /> <br /> ## 依赖<br /> <br /> ### 前端<br /> - React 18<br /> - Vite 5<br /> <br /> ### 后端<br /> - .NET Framework / .NET<br /> - FBroSharp<br /> - 易语言FBro服务器事件和JS交互回调<br /> <br /> ## 注意事项<br /> <br /> 1. 请确保前端和后端同时运行<br /> 2. 前端默认端口为 2030，如需修改请同步更新 C# 代码中的 `frontendUrl`<br /> 3. 所有 cefQuery 请求/响应都使用 JSON 格式<br /> 4. C# 调用 JS 时，复杂对象需要 JSON 序列化后传递

注意：开发环境是2030端口，我所发的代码和成品是内置了服务器，端口是7777
进入前端目录，通过命令npm run build打包dist目录，dist目录的文件在C#已经设置为了内嵌资源，易语言是图片资源
下载成品无需理会，直接体验

游客，如果您要查看本帖隐藏内容请回复

其他FBro的JS交互成品图片演示

mosheng

C#和前端由AI编写，提示词：
一、使用react编写一个前端项目，端口定义为2030，左侧两个Tab菜单：
1、前端调用后端JS交互，使用按钮和编辑框，使用fbro_register_cef_query的例子交互
2、后端直接使用前端JS，在前端注册全局js函数，使用fbro_register_cef_query的例子交互

二、在`Csharp代码`文件夹内编写FBro的C#代码

目的是编写一个在 FBro 浏览器中建立 JavaScript ↔ C# 的通信桥梁的demo

cnkjs

6666666666666666666666666666666666666666666666666666666666666666666666666

q779418475

学习学习学习学习学习学习学习学习学习学习

qq11223366

FBro 的 JS 交互 实战