Winform Cefsharp Webwiki C#与JS交互完整实现

程序员文章站 2022-07-06 15:18:20

目录最后的效果图CefSharp安装目录结构C#代码HTML 代码禁用右键菜单相关链接最后的效果图CefSharp安装目录结构C#代码using System;using System.Windows.Forms;using CefSharp;using CefSharp.WinForms;namespace WebWikiTest{ public partial class Form1 : DevEx......

源码文件

最后的效果图

源码文件

最后的效果图

Winform Cefsharp Webwiki C#与JS交互完整实现

CefSharp安装

Winform Cefsharp Webwiki C#与JS交互完整实现

目录结构

Winform Cefsharp Webwiki C#与JS交互完整实现

C#代码

using System;
using System.Windows.Forms;
using CefSharp;
using CefSharp.WinForms;

namespace WebWikiTest
{
    public partial class Form1 : DevExpress.XtraEditors.XtraForm
    {
        /// <summary>
        /// web控件
        /// </summary>
        private ChromiumWebBrowser browser;

        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            // 初始化页面
            browser = new ChromiumWebBrowser(GetApplicationPath() + "\\index.html");

            // 布局 添加到页面
            this.browser.Width = 800;
            browser.Dock = DockStyle.Right;
            this.Controls.Add(browser);

            // 注入类到页面
            browser.JavascriptObjectRepository.ResolveObject += (s, eve) =>
            {
                var repo = eve.ObjectRepository;
                if (eve.ObjectName == "jsevent")
                {
                    //repo.Register("jsevent", new JsEvent(), isAsync: true, options: BindingOptions.DefaultBinder);
                    repo.Register("jsevent", new JsEvent(GetApplicationPath() + "\\index.html"), isAsync: true, options: BindingOptions.DefaultBinder);
                }
            };

        }

        /// <summary>
        /// 获取根目录
        /// </summary>
        /// <returns></returns>
        private static string GetApplicationPath()
        {
            string path = Application.StartupPath;
            string folderName = String.Empty;
            while (folderName.ToLower() != "bin")
            {
                path = path.Substring(0, path.LastIndexOf("\\"));
                folderName = path.Substring(path.LastIndexOf("\\") + 1);
            }
            return path.Substring(0, path.LastIndexOf("\\") + 1);
        }

        /// <summary>
        /// C#按钮调用js方法
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void simpleButton1_Click(object sender, EventArgs e)
        {
            // 打开console
            browser.ShowDevTools();

            // 请求js方法
            this.browser.ExecuteScriptAsync("clickMe", new object[] { });
        }

        /// <summary>
        /// 注入到页面的类
        /// </summary>
        public class JsEvent
        {
            private string _url;
            public JsEvent()
            {
            }

            public JsEvent(string url)
            {
                _url = url;
            }

            public string showTest()
            {
                MessageBox.Show("Test OK");
                return "调用C# 方法成功";
            }

            public string getUrl()
            {
                return _url;
            }
        }
    }
}

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webwiki test</title>
</head>
<body>
    <div id='app'>
        <ul>
            <li v-for="i in list">{{i}}</li>
        </ul>
        <button @click="clickMe">ClickMe</button>
    </div>
    <button onclick="a()">ClickMe2</button>
    <button onclick="b()">ClickMe3</button>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    list: [1, 2, 3, 4, 5, 6, 7, 8, 9],
                }
            },
            methods: {
                clickMe: function () {
                    console.log("vue click test");
                },
            },
        })

        // 页面中绑定C#类
        CefSharp.BindObjectAsync("jsevent");
        
        function a() {
            console.log("调用C# 方法测试");
            console.log(jsevent.showTest());
        }

        // C#中调用的clickMe方法
        function clickMe() {
            console.log("触发js 执行click");
        }

        // 较方法a 多了一步解析Promise 
        function b() {
            jsevent.getUrl().then((d) => {
                console.log("调用C#方法获得的返回值是："+d);
            })
        }

    </script>
</body>
</html>

禁用右键菜单

// 注册MenuHandler 写在ChromiumWebBrowser控件实例化后面
this.browser.MenuHandler = new MenuHandler();


/// <summary>
/// 禁用右键菜单 MenuHandler类 随便找个位置写 比如内部类
/// </summary>
public class MenuHandler : IContextMenuHandler
{
    public void OnBeforeContextMenu(IWebBrowser browserControl, IBrowser browser, IFrame frame, IContextMenuParams parameters, IMenuModel model)
    {
        model.Clear();
    }
    public bool OnContextMenuCommand(IWebBrowser browserControl, IBrowser browser, IFrame frame, IContextMenuParams parameters, CefMenuCommand commandId, CefEventFlags eventFlags)
    {
        return false;
    }
    public void OnContextMenuDismissed(IWebBrowser browserControl, IBrowser browser, IFrame frame)
    {
    }
    public bool RunContextMenu(IWebBrowser browserControl, IBrowser browser, IFrame frame, IContextMenuParams parameters, IMenuModel model, IRunContextMenuCallback callback)
    {
        return false;
    }
}

Winform Cefsharp Webwiki C#与JS交互完整实现

源码文件

最后的效果图

CefSharp安装

目录结构

C#代码

HTML 代码

禁用右键菜单

相关链接

C#在WinForm中使用WebKit传递js对象实现与网页交互的方法

Winform Cefsharp Webwiki C#与JS交互完整实现

新版本CefSharp.Winform 实现和js交互（JS调用C#方法）

C#在WinForm中使用WebKit传递js对象实现与网页交互的方法

新版本CefSharp.Winform 实现和js交互（JS调用C#方法）

Winform Cefsharp Webwiki C#与JS交互完整实现