Winform 通过 WebBrowser 与 JS 交互

Winform 通过 WebBrowser 与 JS 交互

魏刘宏 2019.08.17

之前在使用 Cef (可在 Winform 或 WPF 程序中嵌入 Chrome 内核的网页浏览器的组件)时,使用过在 C# 代码中调用网页 JS 的功能,以为是 Cef 独有的,最近工作中得知,原来 Winform 自带的浏览器控件 WebBrowser 中也有这个功能,那么我们就来看看吧。

我们先建一个 Winform 窗体 FormBrowserJs:

 

其中左侧是一个 WebBrowser 控件,右边有一个 TextBox 接收网页发来(调用 C# 方法)的消息,另一个 TextBox 提供给我们输入内容,然后点击按钮向网页发送消息(调用网页的 JS 方法)。

后台代码比较少:

using System;
using System.IO;
using System.Runtime.InteropServices;
using System.Windows.Forms;
 
namespace WinFormPractice
{
    [ComVisible(true)]
    public partial class FormBrowserJs : Form
    {
        public FormBrowserJs()
        {
            InitializeComponent();
 
            webBrowser.Navigate(Path.Combine(Application.StartupPath, "HTMLBrowserJs.html"));
            webBrowser.ObjectForScripting = this;
        }
 
        public void ShowMsgForJs(string msg)
        {
            TBRecv.Text += $"{msg}\r\n";
        }
 
        private void BtnSend_Click(object sender, EventArgs e)
        {
            webBrowser.Document.InvokeScript("ShowMsgForCSharp", new []{ TBSend.Text });
        }
    }
}

 

我们用 Navigate 方法让 WebBrowser 导航到一个本地网页”HTMLBrowserJs.html” 去,并将其 ObjectForScripting 设置为当前类,意思就是网页可以调用这个类里的方法,同时还要设置这个类的特性 ——[ComVisible (true)]—— 以便将方法暴露出去。

ShowMsgForJs 方法就是供网页的 JS 方法调用的,里面就是把消息显示在接收框里。

发送按钮的方法里面使用了 webBrowser.Document.InvokeScript 方法来调用 JS 的方法,第一个参数是方法名,第二个参数是一个 Object 数组,这里其实使用的是一个 string 数组。

 

下面我们来看看那个网页:

<!DOCTYPE html>
 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        //alert ("准备就绪");
        window.external.ShowMsgForJs("准备就绪");
 
        function ShowMsgForCSharp(str) {
            var msg = "收到消息:" + str;
 
            //1、调用 C# 方法;
            window.external.ShowMsgForJs(msg);
            //2、改变网页内容;
            document.getElementById("info").innerHTML += msg + "<br/>";
            //3、弹窗;
            alert(msg);
        }
    </script>
</head>
<body>
    <div> 通过 WebBrowser 让 JS 与 C# 代码交互 测试页 </div>
    <div id="info"></div>
</body>
</html>

 

在 script 脚本区,首先通过 window.external.ShowMsgForJs 调用了 Winform 窗体类中的 ShowMsgForJs 方法,提示” 准备就绪”。

然后是供 C# 使用的 ShowMsgForCSharp 方法,里面使用了三种方法来显示收到的消息。

 

最后来看看运行效果吧:

 

可以看到发送和接收都成功了。

 

最后奉上 Demo 地址:https://gitee.com/dlgcy/Practice/tree/master/WinFormPractice

 

posted @ 2019-08-17 17:41  独立观察员  阅读(...)  评论(... 编辑 收藏