使用CefSharp可以在.NET轻松的嵌入Html,不用担心WPF与Winform 控件与它的兼容性问题,CefSharp大部分的代码是C#,它可以在VB或者其他.NET平台语言中来进行使用。

  近几天来,公司项目中需要使用WebBrowser,其中考虑了几个控件,如1.Winform中的WebBrowser    2.WPF中的WebBrowser    3.WebKit.Net     4.CefSharp

  Winform的WebBrowser放到项目中进行了实验和处理,发现致命问题:AllowsTransparency = true 和 Webbrowser 等内置窗体显示冲突,导致不发选择,还有就是GC回收不及时,一下子就飙到了100MB+.

  后来考虑WPF的webbrowser 它实际上还是封装了Winform,有个严重的问题就是它一直置顶到最顶层,so,无法选择。

  再后来考虑WebKit.Net ,但发现已经N多年没有更新,所以不在考虑...

  最后跌跌撞撞跑到CefSharp,发现非常的坑啊!!竟然不支持AnyCPU,关键是我的项目中有的功能是必须AnyCpu启动的啊!还好,官方在去年已经公布了支持AnyCpu的方法。

  首先Nuget引用cefsharp.WPF,它会自己引用Common,其他不用管。我们还需要再App.xaml.cs中添加代码来支持AnyCpu。

    public partial class App : Application
    {
        public App()
        {
            //Add Custom assembly resolver
            AppDomain.CurrentDomain.AssemblyResolve += Resolver;

            //Any CefSharp references have to be in another method with NonInlining
            // attribute so the assembly rolver has time to do it's thing.
            InitializeCefSharp();
        }

        [MethodImpl(MethodImplOptions.NoInlining)]
        private static void InitializeCefSharp()
        {
            var settings = new CefSettings();

            // Set BrowserSubProcessPath based on app bitness at runtime
            settings.BrowserSubprocessPath = Path.Combine(AppDomain.CurrentDomain.SetupInformation.ApplicationBase,
                                                   Environment.Is64BitProcess ? "x64" : "x86",
                                                   "CefSharp.BrowserSubprocess.exe");

            // Make sure you set performDependencyCheck false
            Cef.Initialize(settings, performDependencyCheck: false, browserProcessHandler: null);
        }

        // Will attempt to load missing assembly from either x86 or x64 subdir
        // Required by CefSharp to load the unmanaged dependencies when running using AnyCPU
        private static Assembly Resolver(object sender, ResolveEventArgs args)
        {
            if (args.Name.StartsWith("CefSharp"))
            {
                )[] + ".dll";
                string archSpecificPath = Path.Combine(AppDomain.CurrentDomain.SetupInformation.ApplicationBase,
                                                       Environment.Is64BitProcess ? "x64" : "x86",
                                                       assemblyName);

                return File.Exists(archSpecificPath)
                           ? Assembly.LoadFile(archSpecificPath)
                           : null;
            }

            return null;
        }
        private void Application_Startup(object sender, StartupEventArgs e)
        {
        }
    }

  还没完,之后你得在你项目的 *.csproj 中添加一行配置,它是在你的第一个PropertyGroup中添加的。

最后一步,在App.config中配置x86,当然不是说不支持CPU,刚刚App.xaml.cs中我们已经修改了啊。

<configuration>
  <runtime>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
      <probing privatePath="x86"/>
    </assemblyBinding>
  </runtime></...>

就现在我们在页面中添加一个CefSharpBrowser在grid中,您需要在容器空间中添加name 标记。

 public static ChromiumWebBrowser cefSha { get; set; }
        public Visualization()
        {
            InitializeComponent();
        }
        private void Page_Loaded(object sender, RoutedEventArgs e)
        {
            cefSha = new ChromiumWebBrowser(Environment.CurrentDirectory + "/../../Pages/STORE/VisualizationHtml/StoreData.html");

            // 页面加载完毕后打开开发者工具
            cefSha.KeyboardHandler = new CEFKeyBoardHander();
            CefSharpSettings.LegacyJavascriptBindingEnabled = true;
            NewMutliPage();
            this.grid.Children.Add(cefSha);//初始化
        }

前后端交互都是在NewMutliPage中搭起的桥梁,该代码是新版本的配置方式,大概是18年底,前后端的钩子可以通过bound来偷取。

public void NewMutliPage()
        {
            cefSha.JavascriptObjectRepository.ResolveObject += (s, eve) =>
            {
                var repo = eve.ObjectRepository;
                if (eve.ObjectName == "bound")
                {
                    repo.Register("bound", new JsEvent(), isAsync: true,
                        options: new BindingOptions()
                        {
                            CamelCaseJavascriptNames = false
                        });
                }
            };
        }

老版本你可以这么配置前后端交互的桥梁。

public void OldSinglePage()
    {
        // 新版本默认为 false
        CefSharpSettings.LegacyJavascriptBindingEnabled = true;
        // 把 TestClass 注入到单个页面,名称为 test
        _chromiumWebBrowser.RegisterJsObject("testold", new TestClass());
    }
 LegacyJavascriptBindingEnabled 该属性就是让WebBrowser与WPF支持js交互,否则不可以建立jsObject 这个对象。

在 RegisterJsObject 中我们是绑定的类,该类中是我们后台向WebBrowser的所有数据方法。
public class JsEvent
    {
        /// <summary>
        /// 根据货架列代码区查相关信息
        /// </summary>
        /// <param name="Sline_code"></param>
        public void GetobjBySline_Code(string Sline_code)
        {
            Visualization.cefSha.ExecuteScriptAsync($@"getgoods({
                Newtonsoft.Json.JsonConvert.SerializeObject(VisualizationDAL.GetList(Sline_code))});");
        }
        /// <summary>
        /// 获取货架信息
        /// </summary>
        /// <param name="Sline_code"></param>
        public void GetShelveDetail(string Sline_code)
        {
            //1.找到那列的所有货架
            ObservableCollection<STORE_SHELVE> shelveList = XDAL.STORE_SHELVE_DAL.GetListByLineName(Sline_code);
            //2.找到关于该列下所有的商品信息
            ObservableCollection<STORe_DetailVm> detailList = new ObservableCollection<STORe_DetailVm>();
            foreach (var item in shelveList)
            {
                XDAL.STORE_goods_Detail.GetGoodsDetail(item.Shelve_code).ToList().ForEach(obj =>
                {
                    detailList.Add(obj);
                });
            }
            #region
            List<VisualShelveVm> VisualList = new List<VisualShelveVm>();
            ; i < shelveList.Count; i++)
            {
                //循环最大粒子,在这个最大粒子当中来组织Json
                ; g < ; g++)
                {
                    ; l < ; l++)
                    {
                        var store_detail = detailList.FirstOrDefault(a => a.grid == g.ToString()
                                    && a.Shelve_code == shelveList[i].Shelve_code
                                    && a.layer == l.ToString());
                        //如果未出库的里没有这个 那就可以添加
                        if (store_detail != null)
                        {
                            VisualList.Add(new VisualShelveVm()
                            {
                                shelve_grid = g.ToString(),
                                shelve_layer = l.ToString(),
                                shelve_code = shelveList[i].Shelve_code,
                                shelve_name = shelveList[i].Shelve_name,
                                isHas = true,
                                goods_code = store_detail.Goods_code,
                                goods_name = store_detail.Goods_name
                            });
                        }
                        else
                        {
                            VisualList.Add(new VisualShelveVm()
                            {
                                isHas = false,
                                shelve_grid = g.ToString(),
                                shelve_layer = l.ToString(),
                            });
                        }
                    }
                }
            }
            #endregion
            Visualization.cefSha.ExecuteScriptAsync($@"GetShelve({Newtonsoft.Json.JsonConvert.SerializeObject(VisualList)});");
        }

  需要注意的是该代码块的最后一行,这是我们用前端方法的方式,Visualization是我们刚才的页面,我们直接调用静态CefSha然后执行它的异步方法,其中是直接执行的Js,它和Wpf自带的WebBrowser还不一样,微软的WebBrowser是高度封装的,而cefsha是高度开源的,这一块不得不赞了。

  前台如何请求后台呢?首先在页面加载的时候配置下bound对象。

<script>
    window.onload = function () {
        loadScrollWidth();
        // 新式注入
        CefSharp.BindObjectAsync("bound");
    }
</script>

随后我们就可以通过bound这个对象来请求后台了

bound.GetobjBySline_Code(Sline_Code);

就以我来说,千万不要拿Jquery和Vue一起用,真的是太糟心了..

<body>
    <div class="container" id="app" style="max-width: 1600px;">
        <div class="row">
            <div class="col-lg-3">
                <div class="card">
                    <h3 class="card-img-top headtext">清单</h3>
                    <div class="card-body">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th scope="col">分类名称</th>
                                    <th scope="col">数量</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item,index) in goods_item">
                                    <th scope="row">{{item.goods_Name}}</th>
                                    <td>{{item.num}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-lg-9" style="overflow: scroll;">
                <div class="row line_div">
                    <div class="row" style="font-size: 20px;background-color: #CCC;width: 100%;">
                        <ul class="nav nav-pills nav-fill" id="nav_list">
                            <li class="nav-item" v-for="(item,index) in line_item">
                                <!-- 如果 index -->
                                <a class="nav-link active" key="item.Sline_code"  @click="toggle(index,item)" v-if="index==0">{{item.Sline_name}}</a>
                                <!-- index  n -->
                                <a class="nav-link" key="item.Sline_code"  @click="toggle(index,item)" v-if="index!=0">{{item.Sline_name}}</a>
                            </li>
                        </ul>
                    </div>
                    <div class="row" style="margin-left: 0;" id="VisualBody">
                        <div class="colums" v-for="item in reversedMessage">
                            <div class="row">
                                <img src="tx_3.png">
                                <div class="table_div">
                                    <table class="custormTable" style="margin-top: 40px;" :id="item.code">
                                    </table>
                                </div>
                            </div>
                            <div class="row"
                                 style="background-image: url('tx_2.png');width: 556px;height:464px;background-repeat: repeat-y;">
                            </div>
                            <div class="row">
                                <img src="tx_1.png">
                                <div class="hj_center">
                                    <h3>{{item.name}}</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    window.onload = function () {
        loadScrollWidth();
        // 新式注入
        CefSharp.BindObjectAsync("bound");
    }
</script>
<script>
    function loadScrollWidth(num) {
        ];
        tags.style.width = num *  + 'px';
    }
    function changedom(listdata,shelvedata) {
        ;
        $(".custormTable").html("");
        shelvedata.shift();

        ; i < shelvedata.length; i++) {
            var shelve_code = shelvedata[i].shelve_code;
            //不管如何都是循环4X4
            ; y < ; y++) {
                var goodshtml = '<tbody><tr class="store_goodsName">';
                var numhtml = '<tr class="store_goodsId">'
                numhtml += "<td>" + num + "</td>";
                numhtml += ) + "</td>";
                numhtml += ) + "</td>";
                numhtml += ) + "</td>";
                numhtml = numhtml + '</tr>';
                ; g < ; g++) {
                    var obj = listdata.find(item => item.shelve_layer == y && item.shelve_grid == g && item.shelve_code == shelve_code);
                    if (obj != null) {
                        if (obj.isHas == true) {
                            goodshtml = goodshtml + "<td>" + obj.goods_name + "</td>";
                        }
                    } else {
                        goodshtml = goodshtml + "<td></td>";
                    }
                }
                goodshtml = goodshtml + '</tr>' + numhtml + '</tbody>';
                var my_element = $("#" + shelve_code);
                $("#" + shelve_code).append(goodshtml);
                num = num + ;
            }
        }
    }

</script>
</html>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            m: "hello",
            line_item: [],//列
            goods_item: [],//商品列表+num
            shelve_list: [],//货架列表
            Listdata: [],//商品列表

        },mounted() {
            //全局钩子引用
            window.getalert = this.getalert;
            window.getgoods = this.getgoods;
            window.GetShelve = this.GetShelve;
            window.DBTwo = this.DBTwo;
        },methods: {
            getalert: function (list) {
                this.line_item = typeof list == 'string' ? JSON.parse(list) : list;
            },toggle:function(index,item){
                $(".nav-item a").each(function () {
                    $(this).removeClass("active");
                });
                $(".nav-item a").eq(index).addClass('active');
                //item 对象 Sline_Code 【字段】
                var Sline_Code = item.Sline_code;
                //调用完之后C#会找我们的一个方法然后将参数带过来
                bound.GetShelveDetail(Sline_Code);
                //请求后台,让后台直接调用一个方法去加载列表。
                bound.GetobjBySline_Code(Sline_Code);
                this.Wecas(index, item);
            },Wecas: function (index, item) {
                $(".nav-item a").each(function () {
                    $(this).removeClass("active");
                });
                $(".nav-item a").eq(index).addClass('active');
                //item 对象 Sline_Code 【字段】
                var Sline_Code = item.Sline_code;
                //调用完之后C#会找我们的一个方法然后将参数带过来
                bound.GetShelveDetail(Sline_Code);
                //请求后台,让后台直接调用一个方法去加载列表。
                bound.GetobjBySline_Code(Sline_Code);
            },getgoods: function (goods_list) {
                //该方法是返回货架有的物品
                this.goods_item = typeof goods_list == 'string' ? JSON.parse(goods_list) : goods_list;
            }, GetShelve: function (list) {
                this.Listdata = list;
                let obj = {};
                list = list.reduce((cur, next) => {
                    obj[next.shelve_code] ? "" : obj[next.shelve_code] = true && cur.push(next);
                    return cur;
                }, []);
                this.shelve_list = typeof list == 'string' ? JSON.parse(list) : list;
                changedom(this.Listdata, this.shelve_list);
            }
        }, computed: {
            //所有的货架列出来
            reversedMessage: function () {
                var array = [];
                ;i<this.shelve_list.length;i++){
                    //判断是否name是不是有
                    if (this.shelve_list[i].shelve_name != null) {
                        var obj = {
                            name: this.shelve_list[i].shelve_name,
                            code : this.shelve_list[i].shelve_code
                        }
                        array.push(obj);
                    }
                }
                ) {
                    loadScrollWidth();

                } else {
                    loadScrollWidth(array.length);
                }
                return array;
            }
        }
    });
</script>

  前后端交互最好是前端请求后端,然后让后端执行前端的Js带上参数,这样就ok了,那今天就这样~

使用CefSharp在.NET中嵌入Chromium的更多相关文章

  1. 使用CefSharp在.Net程序中嵌入Chrome浏览器(一)——简介

    有的时候,我们需要在程序中嵌入Web浏览器,其实.Net Framework中本身就提供了WebBrowser控件,本身这个是最简单易用的方案,但不知道是什么原因,这个控件在浏览网页的时候有些莫名的卡 ...

  2. 转-使用 CefSharp 在 C# App 中嵌入 Chrome 浏览器

    使用 CefSharp 在 C# App 中嵌入 Chrome 浏览器 2016-09-23    分类:.NET开发.编程开发.首页精华0人评论 分享到:更多3 本文由码农网 – 小峰原创翻译,转载 ...

  3. 使用CefSharp在.Net程序中嵌入Chrome浏览器(二)——参数设置

    在实现了.Net程序中嵌入Chrome浏览器后,下一步的个性化操作就是加入一些设置了,在前面的文章中,我们可以看到在使用Chrome控件前,有如下一个操作: var setting = new Cef ...

  4. Qt界面中嵌入其他exe程序的界面,使用Qt5

    下面用一个小例子来演示如何在Qt的界面中嵌入其他exe程序的界面,最终效果如下图所示.本文参考了 http://blog.csdn.net/jiaoyaziyang/article/details/4 ...

  5. linux内核分析作业4:使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用

    系统调用:库函数封装了系统调用,通过库函数和系统调用打交道 用户态:低级别执行状态,代码的掌控范围会受到限制. 内核态:高执行级别,代码可移植性特权指令,访问任意物理地址 为什么划分级别:如果全部特权 ...

  6. 使用CKplayer插件在网页中嵌入视频的方法(常用笔记2)

    在做网站中有时候我们需要在网页中嵌入视频,一般视频嵌入有以下几种方法: 1. 优酷代码嵌入 优点:简单,方便,可靠. 缺点:有广告,现在的网站非常注重用户体验,如果打开一个在线视频是有长广告的一定会崩 ...

  7. 利用webview实现在andorid中嵌入swf

    项目背景是这样的,一套系统有三个客户端分别是网页,flex和android,现在已经在flex上面做好了一个在线客户视频聊天系统,然后在这个基础上修改打包成了SWF,放在网页上面使用效果不错,但是利用 ...

  8. 在应用中嵌入Python:转

    在应用中嵌入Python 前面的章节讨论如何扩展Python,如何生成适合的C库等.不过还有另一种情况:通过将Python嵌入C/C++应用以扩展程序的功能.Python嵌入实现了一些使用Python ...

  9. C++中嵌入Lua脚本环境搭建

    第一步(环境准备工作): 工具: ●LuaForWindows_v5.1.4-46.exe傻瓜式安装. 作用:此工具可以在windows环境下编译运行Lua脚本程序.安装完成后会有两个图标:Lua和S ...

  10. WPF中嵌入普通Win32程序的方法

    公司现在在研发基于.Net中WPF技术的产品,由于要兼容旧有产品,比如一些旧有的Win32程序.第三方的Win32程序等等,还要实现自动登录这些外部Win32程序,因此必须能够将这些程序整合到我们的系 ...

随机推荐

  1. python 执行execute遇到的问题

    1.如下方式去查询无法查询出结果,但直接在数据库查询中去查询是能查询到结果的,郁闷中,花了很久的时间才知道原来是双引号导致的 把:name="%s" 中的%s前后的双引号去掉就对了 ...

  2. 进制,原码VS补码

    进制 十,八,十六进制=>二进制 十进制=>二进制:辗转相除取余,10除2商5余0,5除2商2余1,2除2商1余0,1除2商0余1,So,10d=1010b 八进制=>二进制:每1位 ...

  3. rsync-3.0.6-64

    http://rsync.samba.org/ 用的是rsync-3.0.6-12.el6.x86_64 Rsync version 3.1.1 released June 22nd, 2014 Rs ...

  4. sql 事务处理

    事务定义: 事务是单个的工作单元.如果某一事务成功,则在该事务中进行的所有数据更改均会 提交,成为数据库中的永久组成部分.如果事务遇到错误且必须取消或回滚,则所有 数据更改均被清除. 事务三种运行模式 ...

  5. java签名证书

    import java.io.FileInputStream; import java.security.KeyStore; import java.security.PrivateKey; impo ...

  6. docker 1.12.3版本搭建私有仓库,上传镜像报错:server gave HTTP response to HTTPS client”

    系统环境:centos7 docker版本: 1.12.3(注意版本,可能存在不同版本设置不同的情况) docker registry版本:2.4.1 问题: 成功安装docker registry, ...

  7. 【Unity Shaders】ShadowGun系列之一——飞机坠毁的浓烟效果

    写在前面 最近一直在思考下面的学习该怎么进行,当然自己有在一边做项目一边学OpenGL,偶尔翻翻论文之类的.但是,写shader是一个需要实战和动手经验的过程,而模仿是前期学习的必经之路.很多人都会问 ...

  8. day04 迭代器&amp;生成器&amp;装饰器

    目录   1.迭代器 2.生成器 3.推导式 4.匿名函数 5.内置函数 6.递归 7.闭包 8.装饰器 一.迭代器 特点: 1. 省内存 2. 只能向前. 不能反复 3. 惰性机制 让不同的数据类型 ...

  9. POJ 1904 King&#39;s Quest (强连通分量+完美匹配)

    <题目链接> 题目大意: 有n个王子,每个王子都有k个喜欢的妹子,每个王子只能和喜欢的妹子结婚,大臣给出一个匹配表,每个王子都和一个妹子结婚,但是国王不满意,他要求大臣给他另一个表,每个王 ...

  10. IGServer

    默认运行的服务器程序 (这种没有界面的中间服务件程序但在进程中可以查看到) C/C++ 服务器编程(VS.Linux.测试/维护)C/C++网络编程