开发者社区> 杰克.陈> 正文

C# 用XiliumCefGlue做浏览器,JS和C#相互调用

简介: 原文:C# 用XiliumCefGlue做浏览器,JS和C#相互调用 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.
+关注继续查看
原文:C# 用XiliumCefGlue做浏览器,JS和C#相互调用

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013564470/article/details/78395984

目录:



XiliumCefGlue初始化,最精简Demo

XiliumCefGlue源码地址
Xilium.CefGlue手册【百度网盘下载,密码:j093】
【推荐】XiliumCefGlueDemo 2.3.0.0(吾乐吧软件站原创)
以上链接是参考资料!此例程中本着精简易懂的原则,把很多不需要的东西去掉,包括try等检查代码。下面开始步入正题。

1.解压压缩包得到下列文件。选择需要的文件复制到自己工程【pdb为调试生成文件不需要】,之后将【Xilium.CefGlue】和【Xilium.CefGlue.WindowsForms】添加到引用。
这里写图片描述
只选取了一部分需要的文件放到Debug文件夹下。
这里写图片描述
2.其中Form.cs中代码如下,添加panl控件让浏览器嵌入其中。Form1_Load的引用在Form1.Designer.cs中。代码中的网址 http://www.e0575.com/web/ie6bye/test/是对CSS3进行测试的网页。

using System.Windows.Forms;

using Xilium.CefGlue;
using Xilium.CefGlue.WindowsForms;
namespace XCdemo
{
    public partial class Form1 : Form
    {
        CefWebBrowser browser = new CefWebBrowser();
        public Form1()
        {
            InitializeComponent();
            Form1_Load();
        }
        private void Form1_Load()
        {
            browser.Dock = DockStyle.Fill;
            browser.StartUrl = @"http://www.e0575.com/web/ie6bye/test/";
            panel1.Controls.Add(browser);
        }
    }
}

3.其中Program.cs中的代码要做更改,要在程序启动前初始化。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows.Forms;

using Xilium.CefGlue;

namespace XCdemo
{
    static class Program
    {
        /// <summary>
        /// 应用程序的主入口点。
        /// </summary>
        [STAThread]
        private static void Main(string[] args)
        {
            CefRuntime.Load();
            var mainArgs = new CefMainArgs(args);
            var app = new DemoApp();
            var exitCode = CefRuntime.ExecuteProcess(mainArgs, app);
            var settings = new CefSettings
            {
                SingleProcess = false,
                MultiThreadedMessageLoop = true,
                LogSeverity = CefLogSeverity.Disable,
                LogFile = "CefGlue.log",             
            };
            CefRuntime.Initialize(mainArgs, settings, app);
            Application.EnableVisualStyles();
            Application.SetCompatibleTextRenderingDefault(false);
            if (!settings.MultiThreadedMessageLoop)
            {
                Application.Idle += (sender, e) => { CefRuntime.DoMessageLoopWork(); };
            }
            Application.Run(new Form1());
            CefRuntime.Shutdown();
        }
        internal sealed class DemoApp : CefApp
        {
            protected override void OnBeforeCommandLineProcessing(string processType, CefCommandLine commandLine)
            {
                ;
            }
        }
    }
}

4.在程序运行前,把项目的平台目标更改为X86之后运行。
代码下载链接http://download.csdn.net/download/u013564470/10046278
这里写图片描述



Xilium.CefGlue,JS调用C#代码

1.Xilium.CefGlue中JS调用C#比较繁琐。需要通过反射机制注册c#函数到JS。因为涉及到的文件较多,而且已经和别的代码混在一起就不一一列举了,这里只列举关键部分。详细参考第2篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:导航篇

public CefV8Handler Cef;
//通过反射机制 注册c#函数到JS
public void RegisterJs()
{
    JsEvent js = new JsEvent();
    Cef = new CefJsV8Handler(js);
    string javascriptCode = CefJavaScriptEx.CreateJsCodeByObject(js, "Cef");
    CefRuntime.RegisterExtension("Cef", javascriptCode, Cef);
}
protected override void OnWebKitInitialized()
{
    //注册JS函数
    RegisterJs();
}
public class JsEvent
{
    public Object MyParam { get; set; }
    public Object GetMyParam(){
        if (MyParam.GetType().IsArray){
            String s = "[";
            Object[] o = (Object[])MyParam;
            for (int i = 0; i < o.Length; i++){
                s += "'" + o[i].ToString() + "'";
                if (i < (o.Length - 1))
                    s += ",";
            }
            s += "]";
            return s;
        }
        return MyParam;
    }
    [DllImport("User32.dll", EntryPoint = "SendMessage")]
    private static extern int SendMessage(int hWnd, int Msg, int wParam, ref COPYDATASTRUCT lParam);
    [DllImport("User32.dll", EntryPoint = "FindWindow")]
    private static extern int FindWindow(string lpClassName, string lpWindowName);  
    public void openMyPc(String dir){
        if( dir == null)
            dir = "::{20D04FE0-3AEA-1069-A2D8-08002B30309D}";
        Process.Start("explorer.exe", dir);
    }
}

上述代码功能为,执行JS页面的代码,调用C#的函数,打开指定的文件夹,参数为空时打开我的电脑。
这里写图片描述
这里写图片描述



Xilium.CefGlue,C#调用JS代码(无返回值)

相对于JS调用C#函数,C#调用JS函数就简单多了。直接调用封装的库函数即可,不过此函数之恩那个调用JS函数却不能获得JS函数的返回值。代码如下:

CefFrame frame = browser.Browser.GetMainFrame();
String js = "test();";
if (js.Length > 1)
{
    frame.ExecuteJavaScript(js, frame.Url, 0);
}

上述代码为调用JS页面的test()函数,函数圆形如下:

function test(){
    alert("C#中调用了此函数!");
}

当C#中运行代码时,浏览器页面会弹窗提示“C#中调用了此函数!”。

这里写图片描述
这里写图片描述



Xilium.CefGlue,C#调用JS代码(有返回值)

很多时候当我们用C#调用JS函数时,需要JS给的返回值。然而封装的函数却不具备此功能。这时候我们需要把JS调用C#和C#调用JS结合起来实现JS和C#互调。思路如下,C#调用JS函数,函数的返回值调用C#函数,由于JS调用C#函数是一个新的实例,所以我们需要进程间通信,将得到的信息传回给主程序。主要代码为注册下列C#函数到JS。

const int WM_COPYDATA = 0x004A;
public void JS2C(String dir)
{
    int hWnd = FindWindow(null, @"JS和c#代码互调");
    if (hWnd == 0)
    {
        MessageBox.Show("555,未找到消息接受者!");
    }
    else
    {
        byte[] sarr = System.Text.Encoding.Default.GetBytes(dir);
        int len = sarr.Length;
        COPYDATASTRUCT cds;
        cds.dwData = (IntPtr)Convert.ToInt16(1);//可以是任意值  
        cds.cbData = len + 1;//指定lpData内存区域的字节数  
        cds.lpData = dir;//发送给目标窗口所在进程的数据  
        SendMessage(hWnd, WM_COPYDATA, 0, ref cds);
    }
}

JS中代码如下

function testreturn(a){
    var str = "返回值:";
    str = str + a;
    return Cef.JS2C(str);
}

之后我们正常调用ExecuteJavaScript函数即可。效果如下:
这里写图片描述


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Vue3 的 Reactive 响应式到底是什么
​Vue 3 除了令人钦佩的性能改进,还带来了一些新功能。可以说,最重要的介绍是 `Composition API` 。在本文的第一部分中,我们将概括 Vue3 创建新 API 的动机:即,更好的组织和重用代码。在第二部分中,我们将重点讨论使用新API时较少讨论的方面,例如响应式特性。我将响应式特性其称为按需响应。
10 0
【React】将 useReducer 应用于 Web Worker,擦出奇妙的火花
有这么一个场景,当加载一个网页时,它突然变得无响应,直到所有的资源完全加载完毕才响应。但是,当资源加载时,用户可能无法执行页面上的某些功能,比如单击、选择或拖动元素。这个时候你可能会想到使用 Web workers帮助我们解决这个问题。
5 0
C#清除DataGridView数据DataGridView中的“无法删除未提交的新行”
C#清除DataGridView数据DataGridView中的“无法删除未提交的新行”
7 0
14 行 CSS 代码实现明暗模式
最近我打算对我的个人网站添加明暗模式的自动检测。这个解决方案不使用 JavaScript。相反,它通过CSS 媒体查询来检测用户的系统设置,并使用两个自定义CSS属性来确定一个基本的配色方案。
7 0
快将你的 React 应用迁移到 Vite 吧,速度太快啦
我们大多数人将使用 Create React App 来创建 React App。 它支持所有开箱即用的配置。 但是,当您的项目代码增长时,您可能会面临更高的构建时间、开发服务器的启动速度变慢并等待 2 到 5 秒以反映您在代码中所做的更改,并且当应用程序大规模增长时,这可能会迅速增加。
10 0
人人都能做游戏系列教程3(视频+图文版)
这是“人人都能做游戏”系列视频教程的第3节。这一节我将会带大家了熟悉一下将会使用的游戏制作工具,然后制作出第一个“你好,小游戏。”的事例,向小游戏开发世界问好。
8 0
SpringMVC面试题大总结
Spring MVC是一个基于Java的实现了MVC设计模式的请求驱动类型的轻量级Web框架,通过把Model,View,Controller分离,将web层进行职责解耦,把复杂的web应用分成逻辑清晰的几部分,简化开发,减少出错,方便组内开发人员之间的配合。
7 0
用惯了其他人的库,自己来实现一个动图图表生成工具,真香!
用惯了其他人的库,自己来实现一个动图图表生成工具,真香!
6 0
R文档沟通|Dashboards入门(3)
前面推了两期有关dashboards的推文,可见:R文档沟通|Dashboards入门(1);R文档沟通|Dashboards入门(2)
5 0
五分钟学 | Flask 使用 JQuery 上传数据并展示在页面上
今天分享一个动态上传数据的知识点,我们知道,传统的通过 form 来上传文件,会导致 web 页面重新刷新,这样有些功能就无法实现了,比如说我当前页面存在某些表单,如果页面刷新,那么已经填写的表单就会丢失甚至重复提交等等问题。而 JQuery 可以很好的帮我们动态更新页面,实现不刷新页面就可以上传文件的功能,一起来看吧!
4 0
+关注
杰克.陈
一个安静的程序猿~
10427
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载