Winform 通过 WebBrowser 与 JS 交互
之前在使用 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
原创文章，转载请注明： 转载自 独立观察员(dlgcy.com)
本文链接地址: [Winform 通过 WebBrowser 与 JS 交互](https://dlgcy.com/winform-webbrowser-js/)
关注微信公众号 独立观察员博客（DLGCY_BLOG） 第一时间获取最新文章
发表评论