[CefSharp] 如何在JavaScript中调用C#代码

本例在WinForms下实现,具体流程与WPF一致。

本例仅供调用示例,不代表正常业务书写流程。

1. 创建WinForms项目,并将项目属性设置为x86平台

此处预先设置,避免引用时报错,再花更多的时间去改平台。

若有其他需求,可参考官方any cpu解决方案

2. 首先项目中引用 CefSharp.WinForms

3. 创建一个简单的HTML文件

<button onclick="c()">点我</button>
<script>
    // 老式注入,无需在页面执行bind,因为只针对单页面(Single Page Applications)
    function b() {
        test.bbb();
    }

    // 新式注入
    CefSharp.BindObjectAsync("test");
    function c() {
        test.bbb().then((r) => {
            alert(r);
        })
    }
</script>

4. 在默认的Form1.cs下编写初始化代码

public partial class Form1 : Form
{
    private ChromiumWebBrowser _chromiumWebBrowser;

    public Form1()
    {
        InitializeComponent();
    }

    private void Form1_Load(object sender, EventArgs e)
    {
        var path = Path.Combine(Environment.CurrentDirectory, "HTMLPage1.html");
        _chromiumWebBrowser = new ChromiumWebBrowser(path);
        _chromiumWebBrowser.Dock = DockStyle.Fill;

        // 页面加载完毕后打开开发者工具
        _chromiumWebBrowser.FrameLoadEnd += (s, eve) =>
        {
            var browser = _chromiumWebBrowser.GetBrowser();
            browser.ShowDevTools();
        };

        OldSinglePage(); // 老版本的注入方式
        NewMutliPage(); // 新版本的注入方式

        this.Controls.Add(_chromiumWebBrowser);
    }

    public void OldSinglePage()
    {
        // 新版本默认为 false
        CefSharpSettings.LegacyJavascriptBindingEnabled = true;
        // 把 TestClass 注入到单个页面,名称为 test
        _chromiumWebBrowser.RegisterJsObject("testold", new TestClass());
    }

    public void NewMutliPage()
    {
        _chromiumWebBrowser.JavascriptObjectRepository.ResolveObject += (s, eve) =>
        {
            var repo = eve.ObjectRepository;
            if (eve.ObjectName == "testnew")
            {
                repo.Register("testnew", new TestClass(), isAsync: true, options: BindingOptions.DefaultBinder);
            }
        };
    }
}

// 用于注入的类
public class TestClass
{
    public int bbb()
    {
        MessageBox.Show("八八八八");
        return 1;
    }
}

注意,对于文件HTMLPage1.html,我设置了复制到输出目录:如果较新则复制

5. 运行调试,并在开发者工具中测试效果

其他说明

以目前版本为准,注入C#类到WEB页面中的方式有如下2种。

var _chromiumWebBrowser = new ChromiumWebBrowser();
// 反正你先初始化这玩意
// ...

// 1. 旧版本的注入方式,从后端到前端,官方不建议使用
CefSharpSettings.LegacyJavascriptBindingEnabled = true; //首先打开开关(老东西)
_chromiumWebBrowser.RegisterJsObject("testold", new TestClass());

// 2. 新版本的注入方式,从前端到后端,官方推荐,可用于多页面
_chromiumWebBrowser.JavascriptObjectRepository.ResolveObject += (s, eve) =>
{
    var repo = eve.ObjectRepository;
    if (eve.ObjectName == "testnew") //这个名字对应页面上 CefSharp.BindObjectAsync 部分
    {
        repo.Register("testnew", new TestClass(), isAsync: true, options: BindingOptions.DefaultBinder);
    }
};

旧版方式操作起来更加简单,而且页面上无需操作,但是只能用于单页面。(先注入再使用

新版使用起来更简单,因为不用考虑注入太多的情况,可以在页面上按需注册。(先请求再注入最后使用

原文地址:https://www.cnblogs.com/yeshiyu/p/10943496.html

时间: 2024-10-10 08:05:08

[CefSharp] 如何在JavaScript中调用C#代码的相关文章

如何在Java中调用Python代码

有时候,我们会碰到这样的问题:与A同学合作写代码,A同学只会写Python,而不会Java, 而你只会写Java并不擅长Python,并且发现难以用Java来重写对方的代码,这时,就不得不想方设法“调用对方的代码”. 下面我将举一些简单的小例子,借此说明:如何在Java中调用Python代码. 看懂这篇文章只需要具备: 熟悉Java的基本语法 懂一点点Python 主要内容如下: 什么是Jython? 一个HelloPython程序 在Jvm中执行Python脚本 仅在Java中调用Python

针对Android平台我们需要学习如何在Unity中调用Android的JAVA代码。

Unity for Android 比较特殊,Unity for IOS 打包是将XCODE工程直接交给开发者,开发者可以在工程的基础上继续添加新的视图,最后由开发者自行打包生成IPA包,发布程序.而Unity for Android打包直接生成APK包,等于说源代码开发者是看不到的,但是Unity的自身确实有些局限,针对Android平台我们需要学习如何在Unity中调用Android的JAVA代码.本章我们的目标是使用Unity的脚本打开Activity.首先我们创建一个普通的Android

如何在qmake项目中在QML语言中调用C++代码

在这篇文章中,我们将介绍如何在QML中使用C++代码.在以前的文章" 使用C++拓展QML 类型及Property binding!"中,我们可以可以通过C++ plugin的方法来拓展我们的QML功能.那个项目是CMake项目.对于qmake项目来说,我们也可以做同样的事.可以使用一个plugin,并在QML中调用它. 今天,我们将不使用plugin的方法,我们希望在qmake项目中直接调用C++代码.那么我们将如何做呢?这里注意qmake只对15.04及以上的ubuntu手机tar

ios开发,javascript直接调用oc代码而非通过改变url回调方式

之前一个ios项目中,需要通过UIWebview来打开一个静态页面,并在静态页面中 调用相关object-c代码. 一.以前使用js调用object-c的方法 关于如何使用javascript调用object-c中的函数和方法,我搜索了好久 网上所有的方法,基本都指明了一个方向,那就是在UIWebview中载入的js代码中 通过改变document.locations="",然后回调UIWebview的 -(BOOL)webView:(UIWebView *)webView shoul

如何实现 javascript “同步”调用 app 代码

在 App 混合开发中,app 层向 js 层提供接口有两种方式,一种是同步接口,一种一异步接口(不清楚什么是同步的请看这里的讨论).为了保证 web 流畅,大部分时候,我们应该使用异步接口,但是某些情况下,我们可能更需要同步接口.同步接口的好处在于,首先 js 可以通过返回值得到执行结果:其次,在混合式开发中,app 层导出的某些 api 按照语义就应该是同步的,否则会很奇怪——一个可能在 for 循环中使用的,执行非常快的接口,比如读写某个配置项,设计成异步会很奇怪. 那么如何向 js 层导

如何在Javascript中利用封装这个特性

对于熟悉C#和Java的兄弟们,面向对象的三大思想(封装,继承,多态)肯定是了解的,那么如何在Javascript中利用封装这个特性呢? 我们会把现实中的一些事物抽象成一个Class并且把事物的属性(名词)作为Class的Property把事物的动作(动词)作为Class的methods.在面向对象的语言中(C#等)都会有一些关键字来修饰类或者属性(Private,public,protect),这些关键词描述了访问的权限,不多做解释.泗阳县民用航空局 我们来看看Javascript的易变的特性

Windows平台下如何在C#中调用Python

最近迷上了Python,发现它能够做很多C#无法完成的事情,比如,调用CMD或者在CMD中执行一个exe文件命令行并获得输出的结果.过程简单,处理起来也非常方便,但如果要用C#调用Python文件呢,没关系,你想到的肯定早就有也人想到过.网上Google一下,超级多.索性拿来实践吧. 首先要用到的就是这个软件:IronPython,官方下载地址:http://ironpython.codeplex.com 安装在Windows下之后去它的安装地址查找下面这两个文件: IronPython.dll

使用Edge.js,在JavaScript中调用C# .Net

Edge.js能够让开发者在JavaScript中调用C#的接口,提高应用的扩展能力.这里介绍如何调用C#接口获取图片数据,并通过Node.js搭建的WebSocket server发送到Web客户端. 参考:How to Use Edge.js to Empower WebSocket Solutions in JavaScript 通过.Net接口获取图片返回给JavaScript 先看下单纯使用JavaScript来load本地图片可以这样: var fs = require('fs');

vs2013如何在C++中调用Lua(二)

Lua学习笔记 vs2013如何在C++中调用Lua (此为转载教程) 本人试过完全可行 一.准备工作 1.下载Lua源码,地址:http://www.lua.org/download.html(我用的是目前最新版5.2.3) 2.将源码放在合适的盘(我的在D盘,路径D:/Lua-5.2.3/src) 3.打开vs2013新建一个win32控制台应用程序(Win32 console project ),我将他取名为LuaLib 4.确定后,会弹出应用程序向导的提示框,点击下一步.应用程序类型选择