WebView2控件未加载HTML字符串

本文介绍了WebView2控件未加载HTML字符串的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

WebView2 控件:如下所示，HTML字符串通过 NavigateToString(...)在 Button_Click(...)事件中进行调用.但是我需要在 Window 和/或其 Grid 加载后立即加载HTML字符串.但是，以下代码在构造函数 MainWindow(){...} 内部或 rootGrid_Loadded(...)事件内部都会引发以下错误:

WebView2 Control: As shown below, the HTML String successfully loads via NavigateToString(...) call inside Button_Click(...) event. But I need to have the HTML string loaded as soon as the Window and/or its Grid is loaded. But the following code either inside the constructor MainWindow(){...} or inside rootGrid_Loadded(...) event throws the error shown below:

问题:如何解决问题并在 Window 或 Grid之后立即加载 HTML字符串已加载?还是有更好的解决方案/解决方法?

Question: How can we have the issue resolved and have the HTML string loaded right after either the Window or the Grid is loaded? Or are there better solutions/workarounds?

MainWindow.xaml :

<Window x:Class="WpfWebView2TEST.MainWindow"
        .....
        xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
        mc:Ignorable="d"
        Style="{StaticResource CustomWindowStyle}"
        Title="MainWindow" Height="450" Width="800">

    <Grid>
        <Button x:Name="btnTest" Content=Test" Click="btnTest_Click"/>
        <wv2:WebView2 Name="MyWebView" />
    </Grid>
</Window>

注意:在以下构造函数中调用MyLoadHTMLString()或 rootGrid_Loaded(...)事件将引发以下错误:

NOTE: Call to MyLoadHTMLString() in the following constructor or the rootGrid_Loaded(...) event throws the error shown below:

MainWindow.xaml.cs :

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        MyLoadHTMLString();
    }
........
}

private void rootGrid_Loaded(object sender, RoutedEventArgs e)
{
  MyLoadHTMLString();
}


public void MyLoadHTMLString()
{
    string sHTML = "<!DOCTYPE html>" +
    "<html lang=\"en\" xmlns=\"http://www.w3.org/1999/xhtml\">" +
    "<head>" +
        "<meta charset=\"utf-8\" />" +
        "<title>Test Title</title>" +
    "</head>" +
    "<body>" +
        "<p>Test paragraph</p>" +
    "</body>" +
    "</html>";
MyWebView.NavigateToString(sHTML);
}

注意:在按钮单击事件后成功成功将HTML字符串加载到 WebView2

NOTE: Following Button click event successfully loads the HTML string into WebView2

private void btnTest_Click(object sender, RoutedEventArgs e)
{
  MyLoadHTMLString();
}

错误:

更新:

此 MSDN文档似乎为此类问题提供了一些解决方案.但我不确定如何实现

The second and third paragraph of this MSDN Doc seem to provide some resolution to such an issue. but I'm not sure how to implement it

`推荐答案`

首先:

您的问题的答案:

使用前，必须确保 Webview2 控件已初始化.您可以通过以下两种方式之一进行操作:

You must ensure the Webview2 control is initialized before you can use it. You can do this in one of two ways, either call:

await MyWebView.EnsureCoreWebView2Async();

或仅设置 Source 属性.

下一步:这只是一个好建议.我从不使用'NavigateToString'，因为在C#字符串中包含html可以很快变成'messy'.

Next:This is just a good advice. I never use 'NavigateToString', because having html in a C# string can quickly become 'messy'.

相反，我创建了一个子文件夹(称为"html").然后，我在此文件夹中有一个 html 文件，一个 css 文件和一个 script 文件.现在，我可以直接编辑文件，并在设计时进行智能感知和错误检查.

Instead I create a subfolder (called 'html'). Then I have a html file, a css file and a script file inside this folder. Now I can edit the files directly and have intellisense and error checking at design time.

记住:在"属性检查器"中单击文件，然后在属性窗口中选择"复制到输出目录".在这里选择:'如果更新则复制'.现在，文件将被复制到"Bin"文件夹中，因此 WebView2 可以找到它们.

Remember: Click the files in 'Property Inspector', then in properties window, select 'Copy to output directory'. Here select: 'Copy if newer'. Now the files will be copied to 'Bin' folder, so WebView2 can find them.

现在，在代码中，您只需将WebView2的 Source 属性设置为html文件的路径，如下所示:

Now in your code, you simple set the WebView2's Source property to the path of the html file, like this:

MyWebView.Source = new Uri(Path.Combine(Environment.CurrentDirectory, @"Html\MyWebView.html"));

注意:这将自动初始化WebView2并导航到您的html文件.

Note: This will automatically initialize the WebView2 and navigate to your html file.

现在，在html文件中，您可以像通常在网页中那样添加css和脚本文件:

In your html file, you can now include css and script files like you normally do for a webpage:

<html>
<head>
    <meta charset="utf-8" />
    <title>Whatever</title>
    <link rel="stylesheet" href="MyWebView.css" type="text/css" />
    <script type="text/javascript" src="MyWebView.js">
    </script>
................

这是恕我直言，这是使用本地html的一种更好的方法-易于维护.

This is IMHO a much nicer way to use local html - much easier to maintain.

                        这篇关于WebView2控件未加载HTML字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！