WPF与WebView2双向通信 WPF与javascript相互通信 WPF制作的浏览器与网页双向通信 WPF与网页相互通信 WPF与JS双向通信有实例及源码

weijia3624

已于 2023-12-27 22:39:07 修改

阅读量700

点赞数 8

分类专栏： WPF 文章标签： WPF与网页相互通信 WPF与webview2通信 WPF与JS相互通信 WPF与javascript WPF与JS双向通信

于 2023-12-27 16:29:23 首次发布

本文链接：https://blog.csdn.net/weijia3624/article/details/135248848

版权

WPF 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

上一篇已经介绍 WPF集成WebView2 完整例子及Demo

现在需要c#的数据与显示的网页能双向通信

WPF与WebView2之间的相互通信具有以下优点：
- 灵活性：双向通信使得本地应用程序能够与网页内容无缝集成，提供丰富的交互体验。
- 代码复用：网页开发者可以复用现有的Web技术栈和前端框架，同时利用WPF的强大功能。
- 安全性和隔离性：通过WebView2，网页内容在单独的进程中运行，提供了额外的安全层和资源隔离。
- 性能优化：相比于传统的嵌入式浏览器控件，WebView2基于现代的Chromium内核，提供了更好的性能和兼容性。
- 扩展性：通过JavaScript接口和消息传递机制，可以轻松地扩展和定制WebView2的功能，满足特定的应用需求。
- 更新和维护：由于WebView2依赖于持续更新的Chromium项目，因此可以享受到最新的Web特性和安全性修复。

WPF应用程序可以利用WebView2控件与网页内容进行高效的通信，构建功能丰富、用户体验优秀的混合型桌面应用。

完整例子下载 https://download.csdn.net/download/weijia3624/88670091

 private void webView_WebMessageReceived(object sender, CoreWebView2WebMessageReceivedEventArgs e)
        {
            //接收到的字符串
            string msg = e.TryGetWebMessageAsString();
            Console.WriteLine("msg-->" + msg);

            接收到的json
            //string msgJson = e.WebMessageAsJson;
            //Console.WriteLine("msgJson-->" + msgJson);
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            this.webView.WebMessageReceived += webView_WebMessageReceived;
        }

        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            // 确保 CoreWebView2 已经初始化完成
            if (webView.CoreWebView2 != null)
            {
                try
                {
                    JObject postJson = new JObject();
                    postJson["Name"] = "小明";
                    // 将数据序列化为 JSON 字符串
                    string jsonData = JsonConvert.SerializeObject(postJson);
                    //Console.WriteLine(jsonData);
                    // 向 WebView2 发送 JSON 数据 PostWebMessageAsString  PostWebMessageAsJson
                    webView.CoreWebView2.PostWebMessageAsJson(jsonData);
                }
                catch (Exception ex)
                {
                    Console.WriteLine("Error sending message: " + ex.Message);
                }
            }
        }

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>测试通信</title>
    <script>
        window.onload = function () {
            //alert("onload-success");
        }
        function postMsg() {
            var args = "hello,this msg come from webView2 JS!";
            window.chrome.webview.postMessage(args);
            alert("发送成功，内容：" + args);
        }

        // 在这里处理接收到c#的消息
        window.chrome.webview.addEventListener("message", receiveMessage);
        function receiveMessage(event) {
          alert(JSON.stringify(event.data));
        }
    </script>
</head>
<body>
    <p>你好，这是一个webview2里面的JS与C#通信的简单例子</p>
    </br>
    </br>
    <button type="button" onclick="postMsg()">JS发送信息给C#</button>
</body>
</html>

weijia3624

关注

8
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
0
评论
WPF与WebView2双向通信 WPF与javascript相互通信 WPF制作的浏览器与网页双向通信 WPF与网页相互通信 WPF与JS双向通信有实例及源码

WPF集成WebView2 完整例子及Demo现在需要c#的数据与显示的网页能双向通信灵活性：双向通信使得本地应用程序能够与网页内容无缝集成，提供丰富的交互体验。代码复用：网页开发者可以复用现有的Web技术栈和前端框架，同时利用WPF的强大功能。安全性和隔离性：通过WebView2，网页内容在单独的进程中运行，提供了额外的安全层和资源隔离。性能优化：相比于传统的嵌入式浏览器控件，WebView2基于现代的Chromium内核，提供了更好的性能和兼容性。扩展性。
复制链接

扫一扫