天天看點

WPF CefSharp v67 vs2015詳細安裝使用 嵌入本地html c#與js互動

CefSharp 67 的環境安裝

vs 2015

.Net Framework 4.5.2

項目目标架構選擇4.5.2

Microsoft Visual C++ 2015 Redistributable 下載下傳位址

系統需要安裝C++運作庫

1.建立項目

WPF CefSharp v67 vs2015詳細安裝使用 嵌入本地html c#與js互動

2.建立編譯設定

WPF CefSharp v67 vs2015詳細安裝使用 嵌入本地html c#與js互動
WPF CefSharp v67 vs2015詳細安裝使用 嵌入本地html c#與js互動
WPF CefSharp v67 vs2015詳細安裝使用 嵌入本地html c#與js互動
WPF CefSharp v67 vs2015詳細安裝使用 嵌入本地html c#與js互動
WPF CefSharp v67 vs2015詳細安裝使用 嵌入本地html c#與js互動
WPF CefSharp v67 vs2015詳細安裝使用 嵌入本地html c#與js互動
WPF CefSharp v67 vs2015詳細安裝使用 嵌入本地html c#與js互動
WPF CefSharp v67 vs2015詳細安裝使用 嵌入本地html c#與js互動
WPF CefSharp v67 vs2015詳細安裝使用 嵌入本地html c#與js互動
WPF CefSharp v67 vs2015詳細安裝使用 嵌入本地html c#與js互動
WPF CefSharp v67 vs2015詳細安裝使用 嵌入本地html c#與js互動
WPF CefSharp v67 vs2015詳細安裝使用 嵌入本地html c#與js互動

2.使用cefsharp

WPF CefSharp v67 vs2015詳細安裝使用 嵌入本地html c#與js互動
using System;
using System.Collections.Generic;
using System.Windows;
using Newtonsoft.Json;
using CefSharp;
using System.Linq;

namespace WpfApplication1
{
    /// <summary>
    /// MainWindow.xaml 的互動邏輯
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            initial();
        }
        private void initial()
        {
            mychrome.DownloadHandler = new MyDownLoadFile();//處理下載下傳
            mychrome.MenuHandler = new MenuHandler();//禁用滑鼠右鍵
            mychrome.Address = AppDomain.CurrentDomain.BaseDirectory + @"Chart/Chart.html";//頁面路徑
            CefSharpSettings.LegacyJavascriptBindingEnabled = true;//必須配置
            //"wpfObj" 在js裡的 wpf對象名,可通過此對象通路c#方法
            //CallbackObjectForJs  js可通路的對象
            //CamelCaseJavascriptNames = false 關閉隻c#隻能調用駝峰式命名的js方法 的設定
            mychrome.RegisterAsyncJsObject("wpfObj", new CallbackObjectForJs(), new CefSharp.BindingOptions { CamelCaseJavascriptNames = false });
            
        }

//wpf按鈕事件
        public void btnClick(object sender, RoutedEventArgs e)
        { 
        //OpenChart js裡的一個方法名
        //new object[] { 1 } 參數清單
        //ExecuteScriptAsync c# 調用js
            mychrome.ExecuteScriptAsync("OpenChart", new object[] { 1 });
        }


    }
    //在js裡可以通路到的類 
    public class CallbackObjectForJs
    {
        public string name = "";
        //方法可有傳回值
        public object getChartData(string table)
        {
            return new List<string>{"a","b","c"};
        }
        //方法可沒傳回值
        public void sayChart(string str)
        {
            MessageBox.Show(str);
        }
    }


//禁用滑鼠右鍵
    public class MenuHandler : CefSharp.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 MyDownLoadFile : IDownloadHandler
    {
        public void OnBeforeDownload(IWebBrowser chromiumWebBrowser, IBrowser browser, DownloadItem downloadItem, IBeforeDownloadCallback callback)
        {
            if (!callback.IsDisposed)
            {
                using (callback)
                {
                    callback.Continue("", true);
                }
            }
        }
        public void OnDownloadUpdated(IWebBrowser chromiumWebBrowser, IBrowser browser, DownloadItem downloadItem, IDownloadItemCallback callback)
        {
            if (downloadItem.IsComplete)
            {
                //browser.MainFrame.ExecuteJavaScriptAsync($"document.writeln(' 下載下傳完成,視窗即将關閉')");

                //Task.Factory.StartNew(() => {
                // Thread.Sleep(2000);
                browser.CloseBrowser(true);
                //});
            }
            else if (downloadItem.IsCancelled)
            {
                browser.CloseBrowser(true);
            }
            else
            {
                browser.MainFrame.ExecuteJavaScriptAsync($"var sp=document.getElementsByTagName('span')[0];if(sp === undefined) {{document.write('<span></span>');}}sp.innerText='{downloadItem.FullPath.Split('\\').LastOrDefault()} {downloadItem.PercentComplete}%'");
            }

        }
    }
}
           
//xmlns:cefSharp="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf" 引入命名空間
//<Button Click="btnClick" Height="50">llgusd</Button> 按鈕調用js方法
//<cefSharp:ChromiumWebBrowser x:Name="mychrome" Height="813" Width="auto"/> 建立浏覽器
<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        xmlns:cefSharp="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="897.786" Width="905.99" >
    <StackPanel x:Name="myst">
        <Button Click="btnClick" Height="50">llgusd</Button>
        <cefSharp:ChromiumWebBrowser x:Name="mychrome" Height="813" Width="auto"/>
    </StackPanel>

</Window>
           
WPF CefSharp v67 vs2015詳細安裝使用 嵌入本地html c#與js互動
<script>
//c#按鈕調用該js方法OpenChart
function OpenChart(id) {
alert(id);
getData();
sayChart();
}
function getData(){
//js 通過c#注冊對象調用c#方法getChartData 有傳回值
 wpfObj.getChartData('temp').then(data=> {
 alert(data[0]);
});
}
function sayChart(){
wpfObj.sayChart('chart');
}
</script>