Maui-WebView

[删除（380066935@qq.com或微信通知）]

更好的阅读体验请查看原文:https://learn.microsoft.com/zh-cn/dotnet/maui/user-interface/controls/webview?view=net-maui-7.0

.NET 多平台应用 UI (.NET MAUI) WebView 在应用中显示远程网页、本地 HTML 文件和 HTML 字符串。 显示 WebView 的内容包括对级联样式表的支持 (CSS) 和 JavaScript。 默认情况下，.NET MAUI 项目包括 显示远程网页所需的 WebView 平台权限。

WebView 定义以下属性:

  • Cookies类型 CookieContainer为 ，为 Cookie 集合提供存储。
  • CanGoBack，属于 类型 bool，指示用户是否可以导航到以前的页面。 这是只读属性。
  • CanGoForward，类型 bool为 ，指示用户是否可以向前导航。 这是只读属性。
  • Source，属于 类型 WebViewSource，表示 显示的位置 WebView 。

这些属性由 BindableProperty 对象提供支持；也就是说，它们可以作为数据绑定的目标，并能进行样式设置。

属性 Source 可以设置为 UrlWebViewSource 对象或 对象，这两者 HtmlWebViewSource 都派生自 WebViewSource。 UrlWebViewSource用于加载使用 URL 指定的网页，而 HtmlWebViewSource 对象用于加载本地 HTML 文件或本地 HTML。

WebView 定义页面 Navigating 导航启动时引发的事件，以及 Navigated 页面导航完成时引发的事件。 WebNavigatingEventArgs事件附带的对象Navigating定义Cancel可用于取消导航的 类型的bool属性。 WebNavigatedEventArgs事件附带的对象Navigated定义指示Result导航结果的 类型的WebNavigationResult属性。

重要

当 WebView 包含在 、 StackLayout或 VerticalStackLayout中HorizontalStackLayout时，必须指定其 HeightRequest 和 WidthRequest 属性。 如果未能指定这些属性， WebView 则 不会呈现 。

显示网页

若要显示远程网页，请将 Source 属性设置为 string 指定 URI 的 ：

<WebView Source="https://learn.microsoft.com/dotnet/maui" />

等效 C# 代码如下：

WebView webvView = new WebView
{
    Source = "https://learn.microsoft.com/dotnet/maui"
};

URI 必须使用指定的协议完全形成。

注意

尽管 属性 Source 的类型为 WebViewSource，但该属性仍可设置为基于字符串的 URI。 这是因为 .NET MAUI 包括类型转换器和隐式转换运算符，用于将基于字符串的 URI 转换为 UrlWebViewSource 对象。

在 iOS 上配置应用传输安全性

自版本 9 起，iOS 仅允许应用与安全服务器通信。 应用必须选择启用与不安全服务器的通信。

以下 Info.plist 配置演示如何启用特定域以绕过 Apple Transport Security (ATS) 要求：

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSExceptionDomains</key>
        <dict>
            <key>mydomain.com</key>
            <dict>
                <key>NSIncludesSubdomains</key>
                <true/>
                <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                <true/>
                <key>NSTemporaryExceptionMinimumTLSVersion</key>
                <string>TLSv1.1</string>
            </dict>
        </dict>
    </dict>
    ...
</key>

最佳做法是仅允许特定域绕过 ATS，从而允许使用受信任的站点，同时受益于不受信任的域的其他安全性。

以下 Info.plist 配置演示如何为应用禁用 ATS：

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>
    ...
</key>

重要

如果你的应用需要连接到不安全的网站，则应始终使用 NSExceptionDomains 密钥作为例外进入域，而不是使用 NSAllowsArbitraryLoads 密钥完全关闭 ATS。

显示本地 HTML

若要显示内联 HTML，请将 Source 属性设置为 HtmlWebViewSource 对象：

<WebView>
    <WebView.Source>
        <HtmlWebViewSource Html="&lt;HTML&gt;&lt;BODY&gt;&lt;H1&gt;.NET MAUI&lt;/H1&gt;&lt;P&gt;Welcome to WebView.&lt;/P&gt;&lt;/BODY&gt;&lt;HTML&gt;" />
    </WebView.Source>
</WebView>

在 XAML 中，HTML 字符串可能因转义 < 和 > 符号而变得不可读。 因此，为了提高可读性，可以在节中 CDATA 内联 HTML：

<WebView>
    <WebView.Source>
        <HtmlWebViewSource>
            <HtmlWebViewSource.Html>
                <![CDATA[
                <HTML>
                <BODY>
                <H1>.NET MAUI</H1>
                <P>Welcome to WebView.</P>
                </BODY>
                </HTML>
                ]]>
            </HtmlWebViewSource.Html>
        </HtmlWebViewSource>
    </WebView.Source>
</WebView>

等效 C# 代码如下：

WebView webView = new WebView
{
    Source = new HtmlWebViewSource
    {
        Html = @"<HTML><BODY><H1>.NET MAUI</H1><P>Welcome to WebView.</P></BODY></HTML>"
    }
};

显示本地 HTML 文件

若要显示本地 HTML 文件，请将该文件添加到应用项目的 Resources\Raw 文件夹中，并将其生成操作设置为 MauiAsset。 然后，可以从在设置为 Source 属性值的 对象中HtmlWebViewSource定义的内联 HTML 加载文件：

<WebView>
    <WebView.Source>
        <HtmlWebViewSource>
            <HtmlWebViewSource.Html>
                <![CDATA[
                <html>
                <head>
                </head>
                <body>
                <h1>.NET MAUI</h1>
                <p>The CSS and image are loaded from local files!</p>
                <p><a href="localfile.html">next page</a></p>
                </body>
                </html>                    
                ]]>
            </HtmlWebViewSource.Html>
        </HtmlWebViewSource>
    </WebView.Source>
</WebView>

本地 HTML 文件可以加载级联样式表 (CSS) 、JavaScript 和图像（如果它们也已添加到 MauiAsset 生成操作的应用项目中）。

有关原始资产的详细信息，请参阅 原始资产。

重新加载内容

WebView 具有一个 Reload 方法，可以调用该方法来重新加载其源：

WebView webView = new WebView();
...
webView.Reload();

执行导航

WebView 支持使用 GoBack 和 GoForward 方法进行编程导航。 这些方法支持在页面堆栈中WebView导航，并且只能在检查 和 CanGoForward 属性的值CanGoBack后调用：

WebView webView = new WebView();
...

// Go backwards, if allowed.
if (webView.CanGoBack)
{
    webView.GoBack();
}

// Go forwards, if allowed.
if (webView.CanGoForward)
{
    webView.GoForward();
}

在 中 WebView以编程方式或由用户启动的页面导航时，会发生以下事件：

  • Navigating，在页面导航启动时引发。 WebNavigatingEventArgs事件附带的对象Navigating定义Cancel可用于取消导航的 类型的bool属性。
  • Navigated，在页面导航完成时引发。 WebNavigatedEventArgs事件附带的对象Navigated定义指示Result导航结果的 类型的WebNavigationResult属性。

设置 Cookie

可以在 上 WebView 设置 Cookie，以便它们随 Web 请求发送到指定的 URL。 通过将 对象添加到 Cookie 来 CookieContainer设置 Cookie，然后将容器设置为可绑定属性的值 WebView.Cookies 。 请参阅以下代码示例：

using System.Net;

CookieContainer cookieContainer = new CookieContainer();
Uri uri = new Uri("https://learn.microsoft.com/dotnet/maui", UriKind.RelativeOrAbsolute);

Cookie cookie = new Cookie
{
    Name = "DotNetMAUICookie",
    Expires = DateTime.Now.AddDays(1),
    Value = "My cookie",
    Domain = uri.Host,
    Path = "/"
};
cookieContainer.Add(uri, cookie);
webView.Cookies = cookieContainer;
webView.Source = new UrlWebViewSource { Url = uri.ToString() };

在此示例中，将单个 Cookie 添加到 CookieContainer 对象，然后将该对象设置为 属性的值 WebView.Cookies 。 WebView当 将 Web 请求发送到指定的 URL 时，Cookie 随请求一起发送。

调用 JavaScript

WebView 包括从 C# 调用 JavaScript 函数并将任何结果返回给调用的 C# 代码的功能。 此互操作是使用 EvaluateJavaScriptAsync 方法完成的，如以下示例所示：

Entry numberEntry = new Entry { Text = "5" };
Label resultLabel = new Label();
WebView webView = new WebView();
...

int number = int.Parse(numberEntry.Text);
string result = await webView.EvaluateJavaScriptAsync($"factorial({number})");
resultLabel.Text = $"Factorial of {number} is {result}.";

方法 WebView.EvaluateJavaScriptAsync 计算指定为 参数的 JavaScript，并将任何结果返回为 string。 在此示例中， factorial 调用 JavaScript 函数，该函数返回 的阶乘 number 作为结果。 此 JavaScript 函数在 加载的本地 HTML 文件中 WebView 定义，并在以下示例中显示：

<html>
<body>
<script type="text/javascript">
function factorial(num) {
        if (num === 0 || num === 1)
            return 1;
        for (var i = num - 1; i >= 1; i--) {
            num *= i;
        }
        return num;
}
</script>
</body>
</html>

在 iOS 和 Mac Catalyst 上配置本机 WebView

本机 WebView 控件是 MauiWKWebView iOS 和 Mac Catalyst 上的 ，它派生自 WKWebView。 其中 MauiWKWebView 一个 WKWebViewConfiguration 构造函数重载允许指定 对象，该对象提供有关如何配置对象 WKWebView 的信息。 典型配置包括设置用户代理、指定要提供给 Web 内容的 Cookie，以及将自定义脚本注入 Web 内容。

可以在应用中创建 WKWebViewConfiguration 对象，然后根据需要配置其属性。 或者，可以调用静态 MauiWKWebView.CreateConfiguration 方法来检索 .NET MAUI 的对象 WKWebViewConfiguration ，然后对其进行修改。 WKWebViewConfiguration然后，可以通过修改工厂方法将 对象传递给MauiWKWebView构造函数重载，该方法WebViewHandler使用 在每个平台上创建其本机控件：

#if IOS || MACCATALYST
using WebKit;
using CoreGraphics;
using Microsoft.Maui.Platform;
using Microsoft.Maui.Handlers;
#endif
...

#if IOS || MACCATALYST
    WKWebViewConfiguration config = MauiWKWebView.CreateConfiguration();
    config.ApplicationNameForUserAgent = "MyProduct/1.0.0";
    WebViewHandler.PlatformViewFactory =
        handler => new MauiWKWebView(CGRect.Empty, (WebViewHandler)handler, config);
#endif

注意

在应用中显示 之前，WebView应使用 WKWebViewConfiguration 对象进行配置MauiWKWebView。 执行此操作的合适位置位于应用的启动路径中，例如 MauiProgram.cs 或 App.xaml.cs 中。

启动系统浏览器

可以使用 提供的 类Microsoft.Maui.Essentials在系统 Web 浏览器中Launcher打开 URI。 调用启动器的方法 OpenAsync 并传入 string 表示要打开的 URI 的 或 Uri 参数：

await Launcher.OpenAsync("https://learn.microsoft.com/dotnet/maui");