news 2026/8/3 9:44:08

Web之HostObject 投影技术:将 .NET 对象暴露给JS

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Web之HostObject 投影技术:将 .NET 对象暴露给JS

如何在 WebView2 环境中将 .NET(C#)对象"投影"(Project)到 JavaScript 全局环境中,让 H5 页面中的 JS 可以直接调用原生能力。

基本原理与机制

HostObject 投影

WebView2 提供了一种机制,允许将 .NET 对象直接暴露给 JavaScript 运行时,使其成为window.chrome.webview.hostObjects下的属性。这种"投影"机制本质上是 COM 互操作的封装:

┌─────────────────┐ COM/IDispatch ┌─────────────────┐ │ .NET Object │ ◄─────────────────────────────► │ JS Proxy │ │ (C# Class) │ │ (hostObjects) │ └─────────────────┘ └─────────────────┘ │ │ │ [ComVisible] │ │ [ClassInterface] │ ▼ ▼ 注册到 WebView2 JS 直接调用方法 AddHostObjectToScript window.chrome.webview.hostObjects.xxx

核心组件

组件职责
IWebViewHost抽象层,封装 WebView2 操作
WebViewHost实现层,调用CoreWebView2.AddHostObjectToScript
IXxxBridgeCOM 接口定义,声明暴露给 JS 的方法
XxxBridge具体实现,标记[ComVisible(true)]

调用路径

定义 HostObject

接口定义(COM 契约)

usingSystem.Runtime.InteropServices;namespaceShellClient.CommHelper.XTest;/// <summary>/// XTestObj interface exposed to WebView2./// All methods must be COM-visible and use compatible types./// </summary>[ComVisible(true)][Guid("XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX")]// 生成唯一 GUID[InterfaceType(ComInterfaceType.InterfaceIsIDispatch)]publicinterfaceIXTestObj{/// <summary>/// Synchronous call - returns JSON string directly./// </summary>stringTestSync(stringaction,stringdataJson);/// <summary>/// Asynchronous call - invokes callback with response./// </summary>voidTestAsync(stringaction,stringdataJson,[MarshalAs(UnmanagedType.IDispatch)]objectcallback);/// <summary>/// Read-only property: app version./// </summary>stringVersion{get;}/// <summary>/// Read-only property: app name./// </summary>stringName{get;}}

关键点:

  • [ComVisible(true)]- 允许 COM 访问
  • [InterfaceType(ComInterfaceType.InterfaceIsIDispatch)]- 使用 IDispatch 接口,支持 JavaScript 动态调用
  • [MarshalAs(UnmanagedType.IDispatch)]- 将 JavaScript 函数作为 COM 对象传递
  • 所有方法返回string类型(JSON 字符串),便于跨语言边界

实现类

usingSystem.Runtime.InteropServices;usingSystem.Text.Json;usingSerilog;namespaceShellClient.CommHelper.XTest;/// <summary>/// Implementation of XTestObj for WebView2 bridge./// </summary>[ComVisible(true)][Guid("YYYYYYYY-YYYY-YYYY-YYYY-YYYYYYYYYYYY")][ClassInterface(ClassInterfaceType.None)][ComDefaultInterface(typeof(IXTestObj))]publicsealedclassXTestObj:IXTestObj,IDisposable{privatestaticreadonlySerilog.ILogger_log=Log.ForContext<XTestObj>();privatebool_disposed;// Read-only dataprivatereadonlystring_version;privatereadonly
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/8/3 9:40:38

three.js 编辑器的整体性能策略

three.js 编辑器的整体性能策略 本文围绕 three.js 编辑器&#xff08;一款基于 Three.js 的 AI 驱动可视化低代码编辑器&#xff09;展开。- &#x1f310; 在线预览&#xff1a;https://z2586300277.github.io/threejs-editor/- &#x1f4e6; GitHub 开源仓库&#xff1a;ht…

作者头像 李华
网站建设 2026/8/3 9:39:53

思维混乱怎么办?Simple Mind Map助你5分钟理清复杂思路

思维混乱怎么办&#xff1f;Simple Mind Map助你5分钟理清复杂思路 【免费下载链接】mind-map SimpleMindMap&#xff08;思绪思维导图&#xff09;&#xff1a;一个强大的思维导图。A powerful mind map. 项目地址: https://gitcode.com/GitHub_Trending/mi/mind-map 面…

作者头像 李华
网站建设 2026/8/3 9:39:32

计算机网络应用层:协议原理与编程实践

1. 应用层在计算机网络中的核心地位计算机网络就像一座现代化的城市&#xff0c;而应用层就是这座城市里最热闹的商业区。作为OSI七层模型和TCP/IP四层模型中最接近用户的一层&#xff0c;应用层直接决定了我们日常网络体验的质量。想象一下&#xff0c;当你打开浏览器访问网页…

作者头像 李华
网站建设 2026/8/3 9:34:59

【努比亚iMoochi技术解析】1699元AI宠物如何用触感养成拟生命陪伴

文章目录努比亚iMoochi技术解析&#xff1a;1699元AI宠物如何用触感养成拟生命陪伴一、引言二、从展会概念到量产&#xff1a;iMoochi走了哪条路2.1 四个节点完成产品验证2.2 首发规格与未公开信息三、技术链路&#xff1a;生命感来自反馈回路&#xff0c;不来自单个大模型3.1 …

作者头像 李华
网站建设 2026/8/3 9:32:47

PotPlayer字幕翻译插件完整配置指南:3步实现外语视频无障碍观看

PotPlayer字幕翻译插件完整配置指南&#xff1a;3步实现外语视频无障碍观看 【免费下载链接】PotPlayer_Subtitle_Translate_Baidu PotPlayer 字幕在线翻译插件 - 百度平台 项目地址: https://gitcode.com/gh_mirrors/po/PotPlayer_Subtitle_Translate_Baidu 还在为外语…

作者头像 李华