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