WebView2控件未加载HTML字符串 [英] WebView2 control not loading HTML string
问题描述
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();
}
错误:
System.InvalidOperationExceptionHResult = 0x80131509Message =尝试使用WebView2功能，该功能需要在初始化CoreWebView2之前先使用其CoreWebView2.调用GuaranteeCoreWebView2Async或先设置Source属性.来源= Microsoft.Web.WebView2.Wpf
System.InvalidOperationException HResult=0x80131509 Message=Attempted to use WebView2 functionality which requires its CoreWebView2 prior to the CoreWebView2 being initialized. Call EnsureCoreWebView2Async or set the Source property first. Source=Microsoft.Web.WebView2.Wpf
更新:
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字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
