关于WPF中嵌入WEB页面

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

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

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

<!DOCTYPE html>
<!-- saved from url=(0013)about:internet -->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>

2.WebBrowser默认就是运行在IE7 mode下，如果想要在IE9下运行，需要在web页面加上一段<meta http-equiv="X-UA-Compatible" content="IE=9" />。

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

WPF调用JS：

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

JS调用WPF：

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

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

WPF前台：

<Window x:Class="WpfApplication2.Window1"
        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:WpfApplication2"
        mc:Ignorable="d"
        Title="Window1" Height="600" Width="600">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition Height="100"></RowDefinition>
        </Grid.RowDefinitions>
        <WebBrowser x:Name="webbrowser"></WebBrowser>
        <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center">
            <TextBox x:Name="txtBox" Width="150" Height="40"></TextBox>
            <Button  Width="150" Height="40" Click="Button_Click">WPF按钮</Button>
        </StackPanel>
    </Grid>
</Window>

后台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
{
    /// <summary>
    /// Window1.xaml 的交互逻辑
    /// </summary>
    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：

<!DOCTYPE html>
<!-- saved from url=(0013)about:internet -->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <title></title>

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        function Test() {
            window.external.palymusic($("#txtInput").val());
        }
        function msg(obj) {
            alert("页面弹出框："+obj);
        }
    </script>
</head>
<body>
    <input type="text" id="txtInput" />
    <button onclick="Test()">页面按钮</button>
</body>
</html>

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

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

关于WPF中嵌入WEB页面

猜你喜欢