如何通过 CefSharp.Wpf 浏览器控件使用本地文件资源显示网页答案

【问题标题】：How to display a web page by CefSharp.Wpf browser control with local file resources如何通过 CefSharp.Wpf 浏览器控件使用本地文件资源显示网页
【发布时间】：2020-04-06 13:57:57
【问题描述】：

我正在尝试使用 CefSharp.Wpf NuGet 包 (v79.1.360) 从磁盘显示一个简单的 html 网页。

页面依赖于与页面本身不同的目录中的本地文件（javascript、css 等...）。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />

    <link rel="stylesheet" type="text/css" href="file:///G:/AngularJS/Framework/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="MyApp.css">

    <script src="file:///G:/AngularJS/Framework/angular.min.js"></script>
    <script src="file:///G:/AngularJS/Framework/jquery.min.js"></script>
    <script src="file:///G:/AngularJS/Framework/bootstrap.min.js"></script>
    <script src="MyApp.js"></script>

    <title></title>
</head>
<body>
            <p class="font-weight-bold">Select address</p>

            <table class="table table-hover">
                <thead>
                    <tr class="bg-primary">
                        <th scope="col">ID</th>
                        <th scope="col">Name</th>
                        <th scope="col">Code</th>
                        <th scope="col">City</th>
                        <th scope="col">Street</th>
                    </tr>
                </thead>

                <tbody>
                    <tr ng-repeat="address in Model.AddressList"
                        ng-click="Model.PickRow(address)"
                        ng-style="{'background-color': address.Background}">
                        <td>{{address.Id}}</td>
                        <td>{{address.Name}}</td>
                        <td>{{address.PostalCode}}</td>
                        <td>{{address.City}}</td>
                        <td>{{address.Street}}</td>
                    </tr>
                </tbody>
            </table>
</body>
</html>

我可以在基于 chromium 的网络浏览器 (Firefox) 上显示该页面，并修改设置： security.fileuri.strict_origin_policy false

-> Firefox 不是基于 chromium 的网络浏览器，所以我用 google chrome 对其进行了测试，它也能正常工作。

在我的网络研究中，我发现这篇文章与该问题相关（不幸的是，这篇文章来自 2014 年）：

https://github.com/cefsharp/CefSharp/issues/572

于是我尝试为cefSharp控件设置浏览器设置：

<Window x:Class="WebControl.MyWebBrowser"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:cefSharpCore="clr-namespace:CefSharp;assembly=CefSharp.Core"
        xmlns:cefSharpWpf="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"
        Height="300" Width="300">
    <Grid>
        <cefSharpWpf:ChromiumWebBrowser>
            <cefSharpWpf:ChromiumWebBrowser.BrowserSettings>
                <cefSharpCore:BrowserSettings WebSecurity="Disabled"
                                              FileAccessFromFileUrls="Enabled"
                                              UniversalAccessFromFileUrls="Enabled"/>
            </cefSharpWpf:ChromiumWebBrowser.BrowserSettings>
        </cefSharpWpf:ChromiumWebBrowser>
    </Grid>
</Window>

但这不起作用。我也尝试在代码隐藏文件中设置设置，但没有成功。

长话短说：

Current result Expected result

如果有人有解决方案，请告诉我。

提前感谢您阅读这篇文章:-)

【问题讨论】：

Firefox 不是铬浏览器。您是否确认它可以在 Chrome 中运行？根据github.com/cefsharp/CefSharp/wiki/General-Usage#file-uri-file，我强烈劝阻任何人不要使用文件方案。推荐的方法是github.com/cefsharp/CefSharp/wiki/General-Usage#scheme-handler
是的，你是对的：Firefox 不是基于铬的，我的错 :-) 我用谷歌浏览器测试了它，它就像一个魅力。因为您不鼓励任何人使用文件方案，所以我将尝试使用方案处理程序的方式。感谢您的回复。
如果你可以移动你的文件，你可以使用cefsharp.github.io/api/79.1.x/html/…

标签： wpf cefsharp

【解决方案1】：

感谢 amaitland 引导我走向正确的方向：

我强烈建议不要在从本地磁盘加载时使用 file:///。适用不同的安全限制，并且存在许多限制。我建议使用 Scheme 处理程序或实现您自己的 IResourceRequestHandlerFactory。（加载数据：编码的 URI 也非常方便，特别是对于 OffScreen 项目）。如果您选择忽略此建议，则必须自己解决使用 file:/// 时遇到的任何问题。 ceforum 是最好的资源。

复制自：https://github.com/cefsharp/CefSharp/wiki/General-Usage#file-uri-file

解决方案是创建自定义方案处理程序：

https://github.com/cefsharp/CefSharp/wiki/General-Usage#scheme-handler

1) 我将 angular、bootstrap 和 jquery 文件作为资源添加到我的 Visual Studio 项目中。

2) 我创建了 DiskSchemeHandlerFactory.cs：

public class DiskSchemeHandlerFactory : ISchemeHandlerFactory
{
    private static readonly string _SchemeName = "disk";
    private static readonly IDictionary<string, string> _ResourceDictionary;


    public string SchemeName
    {
        get { return _SchemeName; }
    }


    static DiskSchemeHandlerFactory()
    {
        _ResourceDictionary = new Dictionary<string, string>
        {
            { "/angular.min.js", Properties.Resources.angular_min },
            { "/angular.min.js.map", Properties.Resources.angular_min_js },
            { "/bootstrap.min.js", Properties.Resources.bootstrap_min1 },
            { "/bootstrap.min.css", Properties.Resources.bootstrap_min },
            { "/jquery.min.js", Properties.Resources.jquery_min }
        };
    }


    public IResourceHandler Create(IBrowser browser, IFrame frame, string schemeName, IRequest request)
    {
        //Notes:
        // - The 'host' portion is entirely ignored by this scheme handler.
        // - If you register a ISchemeHandlerFactory for http/https schemes you should also specify a domain name
        // - Avoid doing lots of processing in this method as it will affect performance.
        // - Uses the Default ResourceHandler implementation

        var uri = new Uri(request.Url);
        var fileName = uri.AbsolutePath;

        string resource;
        if (_ResourceDictionary.TryGetValue(fileName, out resource) && !string.IsNullOrEmpty(resource))
        {
            var fileExtension = Path.GetExtension(fileName);
            return ResourceHandler.FromString(resource, fileExtension);
        }

        return null;
    }
}

3）我修改了MyWebBrowser.xaml.cs的静态构造函数：

    static MyWebBrowser()
    {
        if (Cef.IsInitialized == false)
        {
            var diskSchemeHandlerFactory = new DiskSchemeHandlerFactory();

            var settings = new CefSettings();
            settings.RegisterScheme(new CefCustomScheme()
            {
                SchemeName = diskSchemeHandlerFactory.SchemeName,
                SchemeHandlerFactory = diskSchemeHandlerFactory
            });

            Cef.Initialize(settings);
        }
    }

4) 最后我更改了html页面的文件路径：

<script src="disk://angular/angular.min.js"></script>
<script src="disk://jquery/jquery.min.js"></script>
<script src="disk://bootstrap/bootstrap.min.js"></script>

也许我也修改它以使用完整的文件路径。有了这个解决方案，每次我想使用另一个文件时，我都必须编译我的项目......

【讨论】：

它有效。 N.B return ResourceHandler.FromString(resource, fileExtension) 现在是 ResourceHandler.FromString(resource, mimeType: Cef.GetMimeType(Path.GetExtension(fileName)))。谢谢