WPF 客户端浏览器 添加Loading加载进度

在windows开发界面时，使用浏览器来请求和显示网页内容，是比较常见的。

但是在请求网页内容时，因网速或者前端功能复杂加载较慢，亦或者加载时遇到各种问题，如空白/黑屏/加载不完整/证书问题等。

因此需要一个加载进度/加载失败的显示界面。

 加载进度显示

界面显示

1. 界面显示，加载进度样式可参考: 绕圈进度条

2. 添加Loading状态枚举。不加载/加载中/加载失败

    public enum LoadingState
    {
        NotLoading,//正常的网页内容界面
        Loading,   //加载进度显示
        Error,     //加载失败界面
    }

在控件内添加LoadingState附加属性，前端界面通过绑定此附加属性来确定是否显示，LoadingState的变更时，界面显示则直接变更。

进度显示处理

在封装相应浏览器后，针对三个事件DocumentCompleted、ProgressChanged、NavigateError作进度显示的处理。

结束加载进度

1. DocumentCompleted文档加载完成后，结束加载进度。此事件只有Navigate调用后，才会触发
2. ProgressChanged进度变更通知，Navigate、Refresh调用后都会触发。因为Navigate调用后，同一进度会重复触发ProgressChanged，ProgressChanged在Navigate调用时触发并没有任何意义，因此在DocumentCompleted之后再添加事件的订阅，ProgressChanged只开放给Refresh方法。
3. 当前进度大于0时，立即结束Loading，减少延时。

    /// <summary>
    /// 文档加载完成
    /// </summary>
    /// <remark>Navigate方法触发，Refresh方法不会触发</remark>
    /// <remark>在首次加载时，添加DocumentCompleted订阅</remark>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private void Browser_OnDocumentCompleted(object sender, HtmlDocumentCompletedEventArgs e)
    {
        //当前Loading状态不是Error的情况下，才结束加载
        if (LoadingState == LoadingState.Loading)
        {
            LoadingState = LoadingState.NotLoading;
        }

        //显示网页内容首次加载后，再订阅加载进度事件
        _browser.ProgressChanged -= Browser_ProgressChanged;
        _browser.ProgressChanged += Browser_ProgressChanged;
        OnDocumentCompleted(e);
    }

    /// <summary>
    /// 加载进度事件
    /// </summary>
    /// <remark>Navigate会触发多次ProgressChanged事件，所以此事件订阅不应开放给Navigate</remark>
    /// <remark>Refresh调用后，会触发一次</remark>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private void Browser_ProgressChanged(object sender, WebBrowserProgressChangedEventArgs e)
    {
        //当前进度大于0，且当前Loading状态是Loading的情况下，才结束Loading动画
        if (e.CurrentProgress > 0 && LoadingState == LoadingState.Loading)
        {
            LoadingState = LoadingState.NotLoading;
        }
    }

值得注意的是，如果按照如上设置，当IE8环境升级到IE11后，因WebBrowserProgressChangedEventArgs事件参数返回异常，不会结束Loading。

问题跟进记录：When IE updates from version 8 to version 11,this eventArgs value for event ProgressChanged is weird. 

原因：调用refresh方法。经调试发现ProgressedChanged的事件参数中，MaximumProgress一直等于0。
但是，正常情况下，同样的电脑环境，win7 IE8或者IE11下，refresh方法，返回的MaximumProgress不为0。

推荐分析：升级后，原有IE版本的注册项遗留，导致冲突。

解决方案：添加e.CurrentProgress == e.MaximumProgress的条件判断。

    private void Browser_ProgressChanged(object sender, WebBrowserProgressChangedEventArgs e)
    {
        //当以下俩种条件符合时，才结束Loading动画
        //1.当前Loading状态是Loading的情况下
        //2.当前进度大于0，或者当前进度等于进度上限阀值
        if (LoadingState == LoadingState.Loading && (e.CurrentProgress > 0 || e.CurrentProgress == e.MaximumProgress))
        {
            LoadingState = LoadingState.NotLoading;
        }
    }

PS:微软小组成员推荐使用WebView,然而这个只为Win10的Microsoft Edge开发的控件，只能在win10上运行且只支持.NET4.6.2及以上，限制多多。

加载出错

    private void Browser_NavigateError(object sender, BrowserExtendedNavigateErrorEventArgs e)
    {
        e.Cancel = true;
        LoadingState = LoadingState.Error;

        //当前不是网络问题的异常，记录异常日志
        if (e.StatusCode != NavigationErrorHttpStatusCode.INET_E_RESOURCE_NOT_FOUND)
        {
            Console.WriteLine($"WebBrowser无法连接服务器：{e.Url}，异常信息为：{e.StatusCode}，异常Code为：{ (int)e.StatusCode }");
        }
    }

浏览器事件处理

针对如上三个事件，DocumentCompleted、ProgressChanged、NavigateError

winform版IE浏览器

    /// <summary>
    ///   在 <see cref="T:System.Windows.Forms.WebBrowser" /> 控件完成加载文档时发生。
    /// </summary>
    [SRCategory("CatBehavior")]
    [SRDescription("WebBrowserDocumentCompletedDescr")]
    public event WebBrowserDocumentCompletedEventHandler DocumentCompleted;

    /// <summary>
    ///   在 <see cref="T:System.Windows.Forms.WebBrowser" /> 控件已更新有关要导航到的文档的下载进度的信息时发生。
    /// </summary>
    [SRCategory("CatAction")]
    [SRDescription("WebBrowserProgressChangedDescr")]
    public event WebBrowserProgressChangedEventHandler ProgressChanged;

NavigateError加载失败事件，需要重写CreateSink、DetachSink。在对应的cookie中添加额外事件的处理：（在此不详述）

    public void NavigateError(object pDisp, ref object url, ref object frame, ref object statusCode, ref bool cancel)
    {
        _browser?.NavigateError?.Invoke(this, new BrowserExtendedNavigateErrorEventArgs((string)url, (string)frame, (int)statusCode, cancel));
    }

Cef浏览器

    private void Register()
    {
        _cefBrowser.LoadingStateChanged += CefBrowserOnLoadingStateChanged;
        _cefBrowser.LoadError += CefBrowserOnLoadError;
    }
    private void CefBrowserOnLoadError(object sender, LoadErrorEventArgs args)
    {
        // Don't display an error for downloaded files where the user aborted the download.
        if (args.ErrorCode == CefErrorCode.Aborted)
        {
            return;
        }
        _isLoadError = true;
        DispatcherUtil.Invoke(() =>
        {
            NavigateError?.Invoke(this, new BrowserExtendedNavigateErrorEventArgs(args.FailedUrl, args.Frame.Name, (int)args.ErrorCode, false));
        });
    }

    private void CefBrowserOnLoadingStateChanged(object sender, LoadingStateChangedEventArgs args)
    {
        //isLoading为false，代表LoadingCompleted
        //_isLoadError为false，代表未加载出错
        if (!args.IsLoading && !_isLoadError)
        {
            DispatcherUtil.Invoke(() =>
            {
                DocumentCompleted?.Invoke(this, new HtmlDocumentCompletedEventArgs(null));
            });
        }
    }

 

关键字：客户端浏览器进度Loading、IE浏览器loading、Cef浏览器loading