FBro 的 JS 交互 - 小白入门指南

mosheng · 发表于 2025-12-12 13:03:58

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

×

本帖最后由 mosheng 于 2025-12-12 13:09 编辑

# FBro 的 JS 交互 - 小白入门指南 
 
## 💡 为什么要用 JS 交互？ 
 
### 传统方式的问题 
 
如果不用 JS 交互，前端（网页）和后端（C#）就像两个**完全隔离的世界**： 
 
| 问题 | 说明 | 
|------|------| 
| 😢 网页是"死"的 | 网页只能展示静态内容，无法操作电脑 | 
| 😢 C# 看不到网页 | C# 不知道用户在网页上点了什么 | 
| 😢 无法联动 | 用户点按钮，C# 不知道；C# 有结果，网页不知道 | 
 
### JS 交互的好处 
 
| 好处 | 说明 | 
|------|------| 
| ✅ **双向通讯** | 网页和 C# 可以互相"说话" | 
| ✅ **实时响应** | 用户点击按钮，C# 立刻知道并执行 | 
| ✅ **动态更新** | C# 有新数据，网页立刻更新显示 | 
| ✅ **功能强大** | 网页负责好看的界面，C# 负责强大的功能 | 
| ✅ **各司其职** | 前端专注 UI，后端专注逻辑，分工明确 ，无需使用第三方UI模块支持库比如exui，前端好看的网页UI太多了，比如vue和react| 
![ScreenShot_2025-12-12_130847_844](https://img.msblog.cc/img/ScreenShot_2025-12-12_130847_844.png) 
 
### 项目的实际例子 
 
**没有 JS 交互**： 
``` 
用户点击"添加账号" → 什么都不会发生（网页不会动） 
``` 
 
**有了 JS 交互**： 
``` 
用户点击"添加账号" 
    → 网页告诉 C#："用户要添加账号" 
        → C# 打开新浏览器窗口 
            → C# 告诉网页："浏览器已打开" 
                → 网页更新按钮变成"关闭浏览器" 
``` 
 
**简单说**：JS 交互让你的桌面应用"活"起来了！ 
 
--- 
 
## 🤔 什么是 FBro 的 JS 交互？ 
 
简单来说，就是让网页（JavaScript）和桌面程序（C#）能够"对话"。 
 
想象一下： 
- **网页（前端）** = 服务员 
- **C# 程序（后端）** = 厨师 
 
服务员需要把客人的点单（请求）告诉厨师，厨师做好菜后再把菜（响应）传给服务员。 
 
FBro 提供了这个"传话"的机制，叫做 **cefQuery**。 
 
--- 
 
## 📱 两种通讯方向 
 
### 方向1：网页 → C#（前端调用后端） 
 
**场景**：用户在网页上点击按钮，想让 C# 程序做点事情 
 
``` 
网页点击按钮 
    → 调用 cefQuery 发送消息 
        → C# 的 OnQuery 方法收到消息 
            → C# 处理完毕 
                → 返回结果给网页 
``` 
 
**网页端代码示例**： 
```javascript 
// 发送消息给 C# 
window.cefQuery({ 
    request: JSON.stringify({ 
        action: 'createBrowser',  // 告诉 C# 要做什么 
        accountId: '123', 
        username: '张三' 
    }), 
    onSuccess: function(response) { 
        // C# 处理成功后的回调 
        console.log('成功了！', response); 
    }, 
    onFailure: function(error_code, error_message) { 
        // C# 处理失败后的回调 
        console.log('失败了！', error_message); 
    } 
}); 
``` 
 
**C# 端代码示例**： 
```csharp 
// 在 OnQuery 方法中接收消息 
public override bool OnQuery(IFBroSharpBrowser browser, IFBroSharpFrame frame, 
    long queryId, string request, bool persistent, IFBroSharpQueryCallback callback) 
{ 
    // request 就是网页发过来的 JSON 字符串 
    var data = JObject.Parse(request); 
    string action = data["action"]?.ToString(); 
    
    if (action == "createBrowser") 
    { 
        // 做点事情... 
         
        // 处理完毕，返回成功 
        callback.Success("创建成功！"); 
    } 
    
    return true; 
} 
``` 
**易语言 端代码示例**： 
``` 
.版本 2 
.支持库 spec 
 
.子程序 JS交互回调, 逻辑型, , ! 
.参数 浏览器指针, 整数型, , 使用该回调的浏览器指针，创建”类_FBrowser_浏览器“浏览器变量后，通过调用"浏览器.绑定 (浏览器指针)"后使用类相关功能 
.参数 框架指针, 整数型, , 使用该回调的浏览器框架指针，创建”类_FBrowser_框架“框架变量后，通过调用"框架.绑定 (框架指针)"后使用类相关功能 
.参数 request, 文本型, , 对应JS函数中的“request”变量 
.参数 返回文本类值指针, 整数型, , 返回JS值的指针，通过“FBrowser_置文本类值”设置返回的文本值 
.参数 errorcode, 整数型, 参考, 对应JS函数中的“code”变量，返回JS的错误代码 
.参数 query_id, 整数型, , 对应JS函数返回值request_id 
.参数 type, 整数型, , 0为cefQuery 1为cefQueryCancel，为1时request不会有值 
.局部变量 json, zyJsonValue 
.局部变量 jx, 逻辑型 
.局部变量 action, 文本型 
.局部变量 activationCode, 文本型 
.局部变量 data, 文本型 
.局部变量 uri, 文本型 
 
调试输出 (取程序名称 (1), “收到JS请求”, request) 
 
errorcode ＝ 111 
 
jx ＝ json.解析 (request, , , , ) 
.如果真 (jx ＝ 假) 
    FBrowser_置文本类值 (返回文本类值指针, “未知的操作类型”) 
    返回 (真) 
.如果真结束 
 
action ＝ json.取文本 (“action”) 
 
.判断开始 (action ＝ “activate”)  ' 激活产品 
    ' 简单的激活码验证逻辑（你可以根据需要修改） 
    activationCode ＝ json.取文本 (“data.activationCode”) 
    .如果 (activationCode ＝ “00000000000000000000”) 
        FBrowser_置文本类值 (返回文本类值指针, #激活成功)  ' 因为HTML代码需要JSON格式消息，所以这里返回的信息是JSON格式 
        返回 (真) 
    .否则 
        FBrowser_置文本类值 (返回文本类值指针, #激活码错误)  ' 因为HTML代码需要JSON格式消息，所以这里返回的信息是JSON格式 
        返回 (真) 
 
    .如果结束 
 
.判断 (action ＝ “enterApp”)  ' 进入功能界面 
    data ＝ 编码_Utf8到Ansi (读入文件 (取运行目录 () ＋ “\web\Webui_功能界面.html”)) 
    uri ＝ FBrowser_Parser_取数据URI (“text/html”, data) 
    全_浏览器 [1].取主框架 ().载入地址 (uri) 
    FBrowser_置文本类值 (返回文本类值指针, #进入功能界面)  ' 因为HTML代码需要JSON格式消息，所以这里返回的信息是JSON格式 
    返回 (真) 
 
.判断 (action ＝ “contactService”)  ' 联系客服 
    FBrowser_置文本类值 (返回文本类值指针, #联系客服)  ' 因为HTML代码需要JSON格式消息，所以这里返回的信息是JSON格式 
    返回 (真) 
 
.默认 
 
.判断结束 
 
FBrowser_置文本类值 (返回文本类值指针, request) 
 
 
 
返回 (真) 
``` 
 
--- 
 
### 方向2：C# → 网页（后端调用前端） 
 
**场景**：C# 程序检测到某个事件，想通知网页更新界面 
 
``` 
C# 检测到事件 
    → 获取浏览器的 Frame 
        → 执行 JavaScript 代码 
            → 网页收到通知并更新界面 
``` 
 
**C# 端代码示例**： 
```csharp 
// 调用网页上的 JavaScript 函数 
public void NotifyWebpage(string message) 
{ 
    // 获取主框架 
    var frame = browser.GetMainFrame(); 
    
    // 执行 JavaScript（调用网页上预先定义好的函数） 
    frame.ExecuteJavaScript( 
        $"window.onLoginSuccess({{ message: '{message}' }});", 
        "", 
        0 
    ); 
} 
``` 
**易语言 端代码示例**： 
 
```csharp 
.版本 2 
 
.子程序 调用网页上的JavaScript函数 
.参数 browser, 类_FBrowser_浏览器, , 这个必须是加载了js交互页面的浏览器 
.局部变量 框架, 类_FBrowser_框架 
 
框架 ＝ browser.取主框架 () 
框架.执行JS代码 (“window.onLoginSuccess({ message: '你主动推动到网页的消息' });”, , ) 
``` 
 
 
**网页端需要预先定义好函数**： 
```javascript 
// 在网页上预先定义好接收函数 
window.onLoginSuccess = function(data) { 
    console.log('登录成功！', data.message); 
    // 更新界面... 
}; 
``` 
 
--- 
 
## 🎯 实际应用场景 
 
### 场景1：点击按钮打开浏览器 
 
``` 
用户点击"添加账号"按钮 
    ↓ 
网页发送 cefQuery 请求: { action: 'createBrowser' } 
    ↓ 
C# 收到请求，创建新浏览器窗口 
    ↓ 
C# 返回: callback.Success("创建成功") 
    ↓ 
网页收到成功响应，更新界面显示"浏览器已打开" 
``` 
 
### 场景2：用户扫码登录后通知网页 
 
``` 
用户在新浏览器中扫码登录 
    ↓ 
C# 拦截到登录成功的请求 
    ↓ 
C# 执行: frame.ExecuteJavaScript("window.onLoginSuccess({...})") 
    ↓ 
网页收到通知，添加新账号到列表 
``` 
 
--- 
 
## ⚠️ 最重要的一点：不能阻塞！ 
 
**错误做法** ❌： 
```csharp 
public override bool OnQuery(..., IFBroSharpQueryCallback callback) 
{ 
    // 做一些耗时的操作... 
    Thread.Sleep(5000);  // ❌ 等待5秒 = 阻塞 = 卡死！ 
    
    callback.Success("完成"); 
    return true; 
} 
``` 
 
**正确做法** ✅： 
```csharp 
public override bool OnQuery(..., IFBroSharpQueryCallback callback) 
{ 
    // 启动异步操作，立即返回 
    Task.Run(() => { 
        // 在后台做耗时操作... 
         
        // 完成后再调用 callback 
        callback.Success("完成"); 
    }); 
    
    return true;  // 立即返回，不等待 
} 
``` 
 
**记住**：`OnQuery` 方法必须"秒回"，不能让网页等太久！ 
 
--- 
 
## 📝 简化版理解 
 
把整个通讯想象成**微信聊天**： 
 
| 概念 | 类比 | 
|------|------| 
| cefQuery | 发送消息 | 
| OnQuery | 收到消息 | 
| callback.Success | 回复"收到，已处理" | 
| callback.Failure | 回复"出错了" | 
| ExecuteJavaScript | 给对方发语音消息（主动通知） | 
| window.xxx 函数 | 对方预先设置的"自动回复" | 
 
 
 
## 🎓 总结 
 
1. **网页想叫 C#(易语言) 做事** → 用 `cefQuery(易语言是JS交互回调)` 发消息 
2. **C#(易语言) 做完后回复** → 用 `callback.Success()` 或 `callback.Failure()` 
3. **C#(易语言) 想通知网页** → 用 `ExecuteJavaScript`(易语言是框架执行JS代码) 调用预定义的函数 
4. **最重要** → 不能阻塞 `OnQuery`，必须秒回！

🟨 源码参考

下载FBro官方demo里面有，易语言是JS交互实例.e ，C#是JS交互测试

🟨 成品参考

XiaohongshuHelper_Setup_2.1.5.7z (107.83 MB, 下载次数: 13)

Cc网络 · 发表于 2025-12-13 07:13:09

赞！赞！赞！赞！赞！赞！赞！赞！赞！

		自动登录	找回密码
密码			立即注册

FBrowserCEF3Lib浏览器开发技术交流网址

FBro 的 JS 交互 - 小白入门指南

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

浏览过的版块

活跃会员

热心会员

永久VIP会员

推广达人

宣传达人

突出贡献

优秀版主

荣誉管理

论坛元老