WPF Cef JS交互

UcCef.xaml

<UserControl x:Class="WpfApp.UcCef"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:cefSharp="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"
             xmlns:local="clr-namespace:WpfApp"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <Grid x:Name="gdCef">  
            <cefSharp:ChromiumWebBrowser x:Name="cefSharp"></cefSharp:ChromiumWebBrowser>
        <Button Height="30" VerticalAlignment="Bottom" Click="Button_Click">调用js的方法</Button>
        </Grid>
        <Grid x:Name="gdList">
            <ItemsControl ItemsSource="{Binding userList,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" x:Name="ictrList">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                            <Border Margin="5,0,5,8" BorderBrush="Black" BorderThickness="1">
                        <StackPanel Orientation="Vertical">
                                <TextBlock Margin="10,8,0,8" Text="{Binding title}" />
                            <TextBlock Text="{Binding authors}" Margin="10,0,0,8" />
                            <TextBlock Text="{Binding img_url}" Margin="10,0,0,8" />
                        </StackPanel>
                            </Border>
                           
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </Grid>
    </Grid>
</UserControl>

 

UcCef.xaml.cs

using CefSharp;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;

namespace WpfApp
{
    /// <summary>
    /// UcCef.xaml 的交互逻辑
    /// </summary>
    public partial class UcCef : UserControl
    {
        List<UserModel> userList = new List<UserModel>();
        public UcCef()
        {
            InitializeComponent();

            CefSharpSettings.LegacyJavascriptBindingEnabled = true;

            this.cefSharp.Address = AppDomain.CurrentDomain.BaseDirectory + @"index.html";

            cefSharp.JavascriptObjectRepository.ResolveObject += (s, eve) =>
            {
                var repo = eve.ObjectRepository;
                if (eve.ObjectName == "googleBrower")
                {
                    repo.Register("showTest", new CallbackObjectForJs(), isAsync: true, options: BindingOptions.DefaultBinder);
                }
            };

            //阻止默认行为
            cefSharp.MenuHandler = new MenuHandler();
        }

        public class CallbackObjectForJs
        {

            public string name = "";
            public void showTest(string msg)
            {
                MessageBox.Show(msg);
                MessageBox.Show(name);
            }
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            // cefSharp.ExecuteScriptAsync("ydb1('asdadaasdasdas')");

            Task<CefSharp.JavascriptResponse> t = cefSharp.GetBrowser().MainFrame.EvaluateScriptAsync("ydb1('asdadaasdasdas')");
            // 等待js 方法执行完后，获取返回值

            t.Wait();
            // t.Result 是 CefSharp.JavascriptResponse 对象
            // t.Result.Result 是一个 object 对象，来自js的 callTest2() 方法的返回值
            if (t.Result.Result != null)
            {

                //Json转换需要安装Newtonsoft.Json包
                ResultVoModel<List<UserModel>> resultList = JsonConvert.DeserializeObject<ResultVoModel<List<UserModel>>>(t.Result.Result.ToString());
                userList = resultList.data;
                ictrList.ItemsSource= resultList.data;
                gdCef.Visibility = Visibility.Collapsed;
                gdList.Visibility = Visibility.Visible;
            }
        }
        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;
            }
        }

        public class UserModel
        {
            public long? id { get; set; }
            public string title { get; set; }
            public string authors { get; set; }
            public string img_url { get; set; }
        }

        public class ResultVoModel<T>
        {
            public int code { get; set; }
            public string message { get; set; }
            public T data { get; set; }
            public bool success { get; set; }
        }
    }
}
 

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 id="ydb">我是cccsdadsad</h1>
    <script>
        ydb.onclick = function () {
            JsObj.name = "asdsadasdas";

            JsObj.showTest("test");
        }
        function ydb1(msg) {
            alert(msg);
            let thisChart = {
                code: 200,
                message: "成功",
                data:
                    [
                        {
                            "id": 1,
                            "title": "揭开数据真相：从小白到数据分析达人",
                            "authors": "Edward Zaccaro, Daniel Zaccaro",
                            "img_url": "1.svg"
                        },
                        {
                            "id": 2,
                            "title": "Android 高级进阶",
                            "authors": "顾浩鑫",
                            "img_url": "2.svg"
                        },
                        {
                            "id": 3,
                            "title": "淘宝天猫电商运营与数据化选品完全手册",
                            "authors": "老夏",
                            "img_url": "3.svg"
                        },
                        {
                            "id": 4,
                            "title": "大数据架构详解：从数据获取到深度学习",
                            "authors": "朱洁,罗华霖",
                            "img_url": "4.svg"
                        },
                        {
                            "id": 5,
                            "title": "Meteor全栈开发",
                            "authors": "杜亦舒",
                            "img_url": "5.svg"
                        },
                        {
                            "id": 6,
                            "title": "Kubernetes权威指南：从Docker到Kubernetes实践全接触（第2版）",
                            "authors":  "龚正,吴治辉,王伟,崔秀龙,闫健勇",
                            "img_url": "6.svg"
                        }
                    ]
            }
            return JSON.stringify(thisChart);
        }
    </script>
</body>
</html>