关于WPF中嵌入WEB页面

最近工作上项目需要把WPF项目的首页改的炫一些，想到WPF做不了那么炫，就算做也很耗时，所以决定把首页做成Html页嵌入到WPF中。在网上查了资料，一种是WPF中的WebBrowser控件，基于IE内核的，另一种是CefSharp控件（需要从Nuget上下载Nuget包），基于Chrome内核，我一开始选的是CefSharp控件，但是后来首页因为要查看实时监控，无奈换成了WebBrowser控件。

---

过程中遇到了一些问题，相信大家以后都会遇到，下面贴出来：

1.运行起来每次都会出现如图所示安全提醒，解决方法在web页面的标签上添上一句代码，就不会再弹出这安全提示。

2.如果页面中用到了Echarts图表，有可能会显示不了，解决办法：对于eCharts在IE兼容模式中显示，需要在web页面加上一段。

3.如果需要加载ActiveX控件，在项目属性中将目标平台设置为x86即可解决，不然会报js错误。

下面开始说一下WPF和JS的交互。

WPF调用JS：

WebBrowser控件有自带的和JS交互的方法InvokeScript，可以直接调用和传参，只研究了浅层次的，深层次的暂时没研究。

JS调用WPF：

WebBrowser控件有自带的和JS交互的方法ObjectForScripting，需要自己定义一个类，然后实例化       webbrowser.ObjectForScripting = new OprateBasic();类里面写JS调用的WPF方法。

最后把代码贴出来供有需要的参考：

WPF前台：

    
        
            
            
        
        
        
            
            WPF按钮
        
    

后台C#：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace WpfApplication2
{
    /// 

    /// Window1.xaml 的交互逻辑
    /// 
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            webbrowser.Source = new Uri(Environment.CurrentDirectory + @"\Test.html");
            webbrowser.ObjectForScripting = new OprateBasic();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            webbrowser.InvokeScript("msg",txtBox.Text);
        }
    }
}

[System.Runtime.InteropServices.ComVisible(true)] // 将该类设置为com可访问
public class OprateBasic
{
    public void palymusic(string msg)
    {
        MessageBox.Show( "WPF弹出框："+msg);
    }
}

Html：

    
    
    

    
    


    
    页面按钮

C#调用后台的Html页面地址需要注意下，不然运行不了，webbrowser.Source = new Uri(Environment.CurrentDirectory + @"\Test.html");需要把Test.html的文件属性复制到输出目录改成始终复制。

---

总结：WPF中嵌入Web页面要不是页面摄像头需要IE模式，我肯定就选择CefSharp控件了，不过也正好熟悉了下WebBrowser控件的用法以及WPF和JS的交互。以上就是个小例子，本人从网上查阅资料，整理运行成功的小例子，希望能帮助到有需要的人就够了。有空会再写下WPF中CefSharp控件的用法和交互。(✪ω✪)