Freigeben über

Erste Schritte mit WebView2 in WinUI 3-Apps (Windows App SDK)

In diesem Artikel erfahren Sie, wie Sie Ihren eigenen WebView2-Code schreiben. Wenn Sie zuerst ein Beispiel ausführen möchten, lesen Sie Win32-Beispiel-App oder einen anderen Beispiel-App-Artikel, z. B. WinUI 3 (Windows App SDK)-Beispiel-App.

In diesem Artikel wird beschrieben, wie Sie Ihre Entwicklungstools einrichten und eine erste WebView2-App für WinUI 3 (Windows App SDK) erstellen und dabei mehr über WebView2-Konzepte erfahren. Sie verwenden zunächst die Visual Studio-Projektvorlage Leere App, Verpackt (WinUI 3 in Desktop), die das WindowsAppSDK verwendet, das das WebView2 SDK enthält. Anschließend fügen Sie ein WebView2-Steuerelement, eine Adressleiste und die Schaltfläche "Gehe zu" sowie URL-Logik hinzu, um nur das Navigieren zu HTTPS-URLs zu ermöglichen.

In diesem Tutorial führen Sie folgende Schritte aus:

  1. Richten Sie die Entwicklungsumgebung ein.

  2. Verwenden Sie die Visual Studio-Projektvorlage Leere App, gepackt (WinUI 3 in Desktop), um ein leeres WinUI 3-Projekt zu erstellen, das eine App definiert, die eine Schaltfläche enthält.

  3. Fügen Sie anstelle der Schaltfläche ein WebView2-Steuerelement hinzu, und navigieren Sie zunächst zur Microsoft-Startseite. WebView2 wird unterstützt, da die Projektvorlage das NuGet-Paket Microsoft.WindowsAppSDK verwendet, das das WebView2 SDK enthält.

  4. Fügen Sie eine Adressleiste als Textfeld-Steuerelement hinzu, und verwenden Sie dann die eingegebene HTTPS-Zeichenfolge, um zu einer neuen Webseite zu navigieren:

    Die App nach dem Navigieren zur Bing-HTTPS-Adresse

  5. Fügen Sie JavaScript in das WebView2-Steuerelement ein, um eine Warnung (Dialogfeld) anzuzeigen, wenn der Benutzer versucht, zu einer URL zu navigieren, die nur ein http:// Präfix anstelle von https://hat:

    Das WebView2-Steuerelement der App zeigt ein Warnungsdialogfeld für Nicht-HTTPS-Websites an.

Abgeschlossenes Projekt

Eine vollständige Version dieses Tutorialprojekts ist im WebView2Samples-Repository verfügbar:

  • Beispielname: WinUI3GetStarted
  • Repositoryverzeichnis: WinUI3_GettingStarted
  • Lösungsdatei: WinUI3GetStarted.sln

Schritt 1: Installieren der neuesten Visual Studio 2022-Version

Stellen Sie sicher, dass Visual Studio 2022 installiert und auf dem neuesten Stand ist.

So installieren Sie die neueste Version von Visual Studio 2022:

  1. Wechseln Sie zu Visual Studio: IDE und Code Editor für Softwareentwickler und Teams, und klicken Sie dann im Abschnitt Visual Studio 2022 auf die Schaltfläche Herunterladen, und wählen Sie dann Community 2022 oder eine andere Version aus.

  2. Im Popup "Downloads " in der oberen rechten Ecke von Microsoft Edge VisualStudioSetup.exe ist aufgeführt. Klicken Sie auf Datei öffnen.

    Visual Studio-Installer wird geöffnet.

  3. Folgen Sie den Anweisungen, und übernehmen Sie die Standardwerte. Im nächsten Schritt installieren oder aktualisieren Sie eine Workload und eine Komponente einer Workload.

Schritt 2: Installieren der neuesten Windows App SDK

Stellen Sie sicher, dass die neueste Windows App SDK in Visual Studio 2022 installiert ist. Die Windows App SDK enthält Visual Studio-Projektvorlagen und das WebView2 SDK. Diese Projektvorlagen enthalten die Projektvorlage Leere App, Verpackt (WinUI 3 in Desktop), die das WindowsAppSDK verwendet, einschließlich des WebView2 SDK.

Die Windows App SDK wird als komponente Windows App SDK C#-Vorlagen der Workload .NET DesktopEntwicklung für Visual Studio installiert. Vor Visual Studio 2022 Version 17.1 wurde die Windows App SDK stattdessen als Visual Studio-Erweiterung installiert, wie unter Installieren von Tools für die Windows App SDK erläutert.

So installieren Sie die neueste Visual Studio 2022-Windows App SDK:

  1. Drücken Sie unter Windows die Starttaste , und geben Sie dann Visual Studio 2022 ein.

    Die Visual Studio 2022-App ist aufgeführt.

  2. Klicken Sie auf Öffnen.

    Das Visual Studio 2022-Dialogfeld wird mit Abschnitten wie Zuletzt geöffnet und Erste Schritte geöffnet.

  3. Klicken Sie auf Ohne Code fortfahren.

    Visual Studio wird geöffnet.

  4. Wählen Sie im Menü Extras die Option Tools und Features abrufen aus.

    Das fenster Visual Studio-Installer wird geöffnet.

  5. Stellen Sie sicher, dass die Registerkarte Workloads ausgewählt ist.

  6. Wählen Sie im Abschnitt Desktop & Mobile die Karte für die Workload .NET-Desktopentwicklung aus, sodass ein Häkchen angezeigt wird:

    Kontrollkästchen der Komponente

  7. Aktivieren Sie in der Installationsdetailsstruktur auf der rechten Seite unter .NET-Desktopentwicklung>Optional das Kontrollkästchen für die Komponente Windows App SDK C#-Vorlagen am unteren Rand der Struktur.

  8. Klicken Sie auf die Schaltfläche Ändern .

    Das Dialogfeld Benutzerkontensteuerung wird geöffnet.

  9. Klicken Sie auf die Schaltfläche Ja .

    Sie werden aufgefordert, Visual Studio zu schließen.

  10. Klicken Sie auf die Schaltfläche Weiter (vorausgesetzt, Sie haben keine nicht gespeicherten Arbeiten).

    Visual Studio lädt die neueste Komponente Windows App SDK C#-Vorlagen herunter und installiert sie. Im fenster Visual Studio-Installer wird die Meldung Alle Installationen sind auf dem neuesten Stand angezeigt, und Visual Studio 2022 wird geöffnet.

Schritt 3: Erstellen eines leeren WinUI 3-Projekts

Erstellen Sie als Nächstes ein Projekt, bei dem es sich um eine einfache WebView2-App für WinUI 3 (Windows App SDK) handelt. Diese Desktop-App enthält ein einzelnes Standard Fenster. Das Projekt enthält noch keinen WebView2-Code.

So erstellen Sie eine WebView2-App für WinUI 3 (Windows App SDK):

  1. Wenn Visual Studio ausgeführt wird, wählen Sie Datei>Neues>Projekt aus. Das Dialogfeld Neues Projekt erstellen wird geöffnet.

  2. Wenn Visual Studio 2022 nicht ausgeführt wird:

    1. Drücken Sie unter Windows die Starttaste , und geben Sie dann Visual Studio 2022 ein.

      Die Visual Studio 2022-App ist aufgeführt.

    2. Klicken Sie auf Öffnen.

      Das Visual Studio 2022-Startdialogfeld mit Abschnitten wie Zuletzt geöffnet und Erste Schritte.

    3. Klicken Sie im Abschnitt Erste Schritte auf das Karte Neues Projekt erstellen. Das Fenster Neues Projekt erstellen wird geöffnet.

  3. Geben Sie im Fenster Neues Projekt erstellen im Feld Nach Vorlagen suchendie Zeichenfolge WinUI 3 in Desktop ein:

    Suchen nach

    Die Projektvorlagen, die im vorherigen Hauptschritt installiert wurden, werden aufgeführt.

  4. Klicken Sie auf die Karte Leere App, Verpackt (WinUI 3 in Desktop), um sie auszuwählen, und klicken Sie dann auf die Schaltfläche Weiter.

    Das Dialogfeld Neues Projekt konfigurieren wird angezeigt.

  5. Geben Sie im Textfeld Projektname einen Projektnamen ein, z. B. WinUI3GetStarted:

    Dialogfeld

  6. Geben Sie im Textfeld Speicherort ein Verzeichnis ein, oder navigieren Sie zu einem Verzeichnis, z C:\Users\myUsername\source\. B. .

  7. Klicken Sie auf die Schaltfläche Erstellen.

    Das Projekt wird erstellt:

Das neue WinUI 3-Projekt in Projektmappen-Explorer

  1. Wenn ein Dialogfeld mit der Meldung "Fehler beim Installieren des Microsoft.WindowsAppSDK-Pakets" angezeigt wird, klicken Sie auf die Schaltfläche OK .

Schritt 4: Aktualisieren oder Installieren des Windows App SDK

Wenn Sie ein neues Projekt in Visual Studio erstellen, überprüfen Sie die status der NuGet-Pakete der Projektmappe. Stellen Sie sicher, dass die erforderlichen NuGet-Pakete von der Projektvorlage installiert wurden, und stellen Sie sicher, dass die Pakete aktualisiert wurden, damit das Projekt über die neuesten Features und Fixes verfügt.

So aktualisieren oder installieren Sie das neueste Windows App SDK NuGet-Paket für Ihr Projekt:

  1. Klicken Sie in Visual Studio in Projektmappen-Explorer mit der rechten Maustaste auf das Projekt WinUI3GetStarted, und wählen Sie dann NuGet-Pakete verwalten aus.

    In Visual Studio wird die Registerkarte NuGet: WinUI3GetStarted geöffnet. Wenn das Microsoft.WindowsAppSDK-Paket während der Projekterstellung mithilfe der Projektvorlage installiert wurde, wird die Registerkarte Installiert ausgewählt, und dieses Paket wird aufgelistet:

    Erwartete Pakete, die auf der Registerkarte

    Wenn das Microsoft.WindowsAppSDK-Paket nicht auf der Registerkarte Installiert aufgeführt ist:

  2. Klicken Sie auf die Registerkarte Durchsuchen , und geben Sie dann im Textfeld Suchendie Zeichenfolge Microsoft.WindowsAppSDK ein.

  3. Wählen Sie die Karte Microsoft.WindowsAppSDK aus:

    Installieren des SDK-Pakets

  4. Klicken Sie rechts auf die Schaltfläche Installieren .

    Das Dialogfeld Vorschau der Änderungen wird geöffnet.

  5. Klicken Sie auf die Schaltfläche Anwenden , und akzeptieren Sie dann die Lizenzbedingungen.

    Das NuGet-Paket Microsoft.WindowsAppSDK ist installiert.

  6. Klicken Sie auf der Registerkarte NuGet – Projektmappe auf die Registerkarte Updates, und aktualisieren Sie dann optional alle dort aufgeführten Pakete.

  7. Schließen Sie die Registerkarte NuGet – Projektmappe .

Schritt 5: Erstellen und Ausführen des Projekts

Das neue WinUI 3-Projekt bleibt in Projektmappen-Explorer in Visual Studio geöffnet:

Das neue WinUI 3-Projekt in Projektmappen-Explorer

  • Die App.xaml.cs Datei definiert eine Application Klasse, die Ihre App instance darstellt.

  • Die MainWindow.xaml.cs Datei definiert eine MainWindow Klasse, die das Standard Fenster darstellt, das von Ihrer App-instance angezeigt wird. Die Klassen werden von Typen im Microsoft.UI.Xaml WinUI-Namespace abgeleitet.

So erstellen Sie das Projekt und führen es aus:

  1. Wählen Sie Datei>Alle speichern (STRG+UMSCHALT+S) aus.

  2. Wählen Sie Debug>Start (F5) aus.

    Das Dialogfeld Entwicklermodus für Windows aktivieren wird möglicherweise geöffnet:

    Dialogfeld: Aktivieren des Entwicklermodus für Windows

  3. Wenn dieses Dialogfeld angezeigt wird, klicken Sie auf Einstellungen für Entwickler, aktivieren Sie den Umschalter Entwicklermodus , klicken Sie auf die Schaltfläche Ja , und klicken Sie dann auf die Schaltfläche Schließen des Visual Studio-Dialogfelds. Weitere Informationen zum Entwicklermodus finden Sie unter Aktivieren Ihres Geräts für die Entwicklung unter Erstellen von Desktop-Apps für Windows.

    Das Projekt wird erstellt. Die leere WinUI Desktop-App wird geöffnet, ohne dass noch ein WebView2-Steuerelement hinzugefügt wurde:

    Die neue leere WinUI 3-App

  4. Klicken Sie auf die Schaltfläche Click Me (Mich klicken).

    Die Schaltflächenbezeichnung ändert sich in Geklickt.

  5. Schließen Sie die App.

Schritt 6: Hinzufügen eines WebView2-Steuerelements

Das Projekt basiert auf der Projektvorlage Leere App, verpackt (WinUI 3 in Desktop), die das NuGet-Paket Microsoft.WindowsAppSDK verwendet, das das WebView2 SDK enthält. Daher können wir WebView2-Code hinzufügen. Sie bearbeiten die MainWindow.xaml Dateien und MainWindow.xaml.cs , um dem leeren WinUI 3-App-Projekt ein WebView2-Steuerelement hinzuzufügen, wobei zunächst die Microsoft-Startseite geladen wird. In der XAML-Datei wird das WebView-Steuerelement wie folgt gekennzeichnet:

<controls:WebView2 x:Name="MyWebView" Source="https://www.microsoft.com">

So fügen Sie ein WebView2-Steuerelement hinzu, das zunächst zur Microsoft-Startseite navigiert:

  1. Doppelklicken Sie in Visual Studio in Projektmappen-Explorer auf MainWindow.xaml.

    Die Datei wird im Code-Editor geöffnet.

  2. Kopieren Sie das folgende Attribut, und fügen Sie es in das <Window> Starttag am Ende der Liste der XML-Namespaces ein:

    xmlns:controls="using:Microsoft.UI.Xaml.Controls"

    Dieser Code fügt den WebView2-XAML-Namespace hinzu. Stellen Sie sicher, dass Ihr Code in MainWindow.xaml dem folgenden Code ähnelt:

    <?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="MyWebView2WinUI3.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyWebView2WinUI3"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button x:Name="myButton" Click="myButton_Click">Click Me</Button>
    </StackPanel>
</Window>

  3. Löschen Sie das <StackPanel> Element (drei Zeilen).

  4. Fügen Sie über dem </Window> Endtag das folgende <Grid> Element ein:

    <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <controls:WebView2 x:Name="MyWebView"  Grid.Row="1" Grid.ColumnSpan="2"
        Source="https://www.microsoft.com" HorizontalAlignment="Stretch" 
        VerticalAlignment="Stretch"/>
</Grid>

    Dieses <Grid> Element enthält ein <controls:WebView2> Element namens MyWebView, das über ein Source Attribut verfügt, das den anfänglichen URI festlegt, der im WebView2-Steuerelement (https://www.microsoft.com) angezeigt wird. Wenn die App geöffnet wird, wird zunächst die Microsoft.com Startseite im WebView2-Steuerelement angezeigt.

  5. Erweitern Sie MainWindow.xaml Projektmappen-Explorer, und doppelklicken Sie dann auf MainWindow.xaml.cs.

  6. MainWindow.xaml.csLöschen Sie in die folgende C#-Codezeile in der myButton_Click -Methode:

    myButton.Content = "Clicked";

    Die -Methode ist vorerst leer. Wir verwenden sie später für die Schaltfläche "Go " der Adressleiste.

  7. Wählen Sie Datei>Alle speichern (STRG+UMSCHALT+S) aus.

  8. Drücken Sie F5.

    Das Projekt wird erstellt, und die App wird geöffnet:

    Das WebView2-Steuerelement, das die microsoft.com Webseite anzeigt

    Die App ist eine WebView2-Host-App, die das WebView2-Steuerelement enthält. Das WebView2-Steuerelement zeigt zunächst die Website https://www.microsoft.coman. Es gibt noch kein Textfeld für die Adressleiste oder die Schaltfläche "Los ".

  9. Schließen Sie die App.

Schritt 7: Hinzufügen von Navigationssteuerelementen

Damit Benutzer steuern können, welche Webseite im WebView2-Steuerelement angezeigt wird, fügen Sie der App wie folgt eine Adressleiste hinzu:

  1. Fügen MainWindow.xamlSie in den folgenden Code in das <Grid> -Element über dem <controls:WebView2> -Element ein:

       <TextBox Name="addressBar" Grid.Column="0"/>
   <Button x:Name="myButton" Grid.Column="1" Click="myButton_Click">Go</Button>

    Stellen Sie sicher, dass das resultierende <Grid> Element in der MainWindow.xaml Datei mit Folgendem übereinstimmt:

    <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <TextBox Name="addressBar" Grid.Column="0"/>
    <Button x:Name="myButton" Grid.Column="1" Click="myButton_Click">Go</Button>

    <controls:WebView2 x:Name="MyWebView"  Grid.Row="1" Grid.ColumnSpan="2"
        Source="https://www.microsoft.com" HorizontalAlignment="Stretch" 
        VerticalAlignment="Stretch"/>
</Grid>

  2. Fügen MainWindow.xaml.csSie in den Textkörper der myButton_Click -Methode den folgenden try/catch -Block ein:

    private void myButton_Click(object sender, RoutedEventArgs e)
{
    try
    {
        Uri targetUri = new Uri(addressBar.Text);
        MyWebView.Source = targetUri;
    }
    catch (FormatException ex)
    {
        // Incorrect address entered.
    }
}

    Dieser Code navigiert das WebView2-Steuerelement zu der URL, die der Benutzer in die Adressleiste eingibt, wenn der Benutzer auf die Schaltfläche Go klickt, indem er den Wert der MyWebView.Source Eigenschaft neu festlegt, der dem Source Attribut des <controls:WebView2 x:Name="MyWebView"> Elements entspricht.

  3. Wählen Sie Datei>Alle speichern (STRG+UMSCHALT+S) aus.

  4. Drücken Sie F5.

    Das Projekt wird erstellt, und die App wird geöffnet, wobei zunächst die Microsoft-Startseite angezeigt wird. Es gibt jetzt eine Adressleiste und die Schaltfläche Gehe zu.

  5. Geben Sie eine neue vollständige HTTPS-URL in die Adressleiste ein, z https://www.bing.com. B. , und klicken Sie dann auf die Schaltfläche Los :

    Die App zeigt die Bing-Website an.

    Das WebView2-Steuerelement in der App zeigt die Bing-Website an. Auf der Adressleiste wird die URL angezeigt, z https://www.bing.com. B. .

  6. Geben Sie eine unvollständige URL in die Adressleiste ein, z bing.com. B. , und klicken Sie dann auf die Schaltfläche Los .

    Das WebView2-Steuerelement versucht nicht, zu dieser URL zu navigieren. Es wird eine Ausnahme ausgelöst, da die URL nicht mit http:// oder https://beginnt. try Im Abschnitt beginnt die addressBar.Text Zeichenfolge nicht mit http:// oder https://, aber die Nicht-URI-Zeichenfolge wird an den Uri Konstruktor übergeben, wodurch eine System.UriFormatException Ausnahme ausgelöst wird. In Visual Studio wird im Ausgabebereich "Ausnahme ausgelöst: 'System.UriFormatException' in System.Private.Uri.dll" angezeigt. Die App wird weiterhin ausgeführt.

  7. Schließen Sie die App.

Schritt 8: Behandeln von Navigationsereignissen

Eine App, die ein WebView2-Steuerelement hostet, lauscht auf die folgenden Ereignisse:

  • NavigationStarting
  • SourceChanged
  • ContentLoading
  • HistoryChanged
  • NavigationCompleted

Diese Ereignisse werden während der Webseitennavigation von einem WebView2-Steuerelement ausgelöst. Wenn eine HTTP-Umleitung auftritt, gibt es mehrere NavigationStarting Ereignisse in einer Zeile. Weitere Informationen finden Sie unter Navigationsereignisse für WebView2-Apps.

Wenn ein Fehler auftritt, werden die folgenden Ereignisse ausgelöst, und eine Fehlerwebseite wird möglicherweise angezeigt:

  • SourceChanged
  • ContentLoading
  • HistoryChanged

In diesem Abschnitt fügen Sie Code zum Importieren der WebView2 Core-Bibliothek hinzu, die Navigationsereignisse verarbeitet, um zu verschiedenen URLs-Typen zu wechseln.

So behandeln Sie Navigationsereignisse:

  1. MainWindow.xaml.csFügen Sie in oben über den anderen using Anweisungen die folgende Zeile hinzu:

    using Microsoft.Web.WebView2.Core;

    Registrieren Sie einen Handler für NavigationStarting , der alle Nicht-HTTPS-Anforderungen abbricht:

  2. MainWindow.xaml.csFügen Sie in im Konstruktor die folgende NavigationStarting Zeile hinzu:

    public MainWindow()
{
    this.InitializeComponent();
    MyWebView.NavigationStarting += EnsureHttps;
}

    Diese Zeile registriert die EnsureHttps -Methode (unten hinzugefügt) als Listener des NavigationStarting Ereignisses.

  3. Fügen Sie unterhalb des Konstruktors die folgende EnsureHttps Methode hinzu:

    private void EnsureHttps(WebView2 sender, CoreWebView2NavigationStartingEventArgs args)
{
    String uri = args.Uri;
    if (!uri.StartsWith("https://"))
    {
        args.Cancel = true;
    }
    else
    {
        addressBar.Text = uri;
    }
}

  4. Wählen Sie Datei>Alle speichern (STRG+UMSCHALT+S) aus.

  5. Drücken Sie F5.

    Das Projekt wird erstellt, und die App wird geöffnet.

  6. Geben Sie in der App in der Adressleiste eine HTTP-URL ein, z http://bing.com. B. , und klicken Sie dann auf die Schaltfläche Gehe zu .

    Die App navigiert nicht zu dieser Seite, da die Navigation zu HTTP-Websites blockiert ist. Wir haben noch kein Dialogfeld hinzugefügt, um dem Benutzer mitzuteilen, warum sich die angezeigte Website nicht geändert hat.

  7. Geben Sie eine HTTPS-URL ein, z https://bing.com. B. , und klicken Sie dann auf die Schaltfläche Los .

    Die App navigiert zur angegebenen Seite, da die Navigation für HTTPS-Websites zulässig ist.

  8. Geben Sie in der App in der Adressleiste eine Zeichenfolge ohne Präfix ein, z bing.com. B. , und klicken Sie dann auf die Schaltfläche Gehe zu .

    Die App navigiert nicht zu dieser Seite. Wie zuvor wird eine UriFormatException Ausnahme ausgelöst und im Bereich Ausgabe in Visual Studio angezeigt.

  9. Schließen Sie die App.

Schritt 9: Einfügen von JavaScript, um den Benutzer über eine Nicht-HTTPS-Adresse zu benachrichtigen

Sie können die Host-App verwenden, um JavaScript-Code zur Laufzeit in das WebView2-Steuerelement einzufügen. Mit WebView2 können Sie beliebiges JavaScript ausführen oder Initialisierungsskripts hinzufügen. Das eingefügte JavaScript gilt für alle neuen Dokumente der obersten Ebene und alle untergeordneten Frames, bis das JavaScript entfernt wird. Der eingefügte JavaScript-Code wird mit einem bestimmten Zeitpunkt ausgeführt, um eine der folgenden Aktionen auszuführen:

  • Führen Sie das eingefügte JavaScript nach der Erstellung des globalen Objekts aus.

  • Führen Sie das eingefügte JavaScript aus, bevor Sie ein anderes Skript ausführen, das im HTML-Dokument enthalten ist.

Im Folgenden fügen Sie JavaScript hinzu, das eine Warnung anzeigt, wenn ein Benutzer versucht, eine Nicht-HTTPS-Website zu öffnen. Dazu müssen Sie ein Skript in den Webinhalt einfügen, der ExecuteScriptAsync verwendet.

So zeigen Sie eine Warnung an, wenn der Benutzer versucht, zu einer Website ohne HTTPS zu navigieren:

  1. MainWindow.xaml.csFügen Sie in der EnsureHttps -Methode die folgende ExecuteScriptAsync Zeile hinzu:

    private void EnsureHttps(WebView2 sender, CoreWebView2NavigationStartingEventArgs args)
{
    String uri = args.Uri;
    if (!uri.StartsWith("https://"))
    {
        MyWebView.ExecuteScriptAsync($"alert('{uri} is not safe, try an https link')");
        args.Cancel = true;
    }
    else
    {
        addressBar.Text = uri;
    }
}

  2. Wählen Sie Datei>Alle speichern (STRG+UMSCHALT+S) aus.

  3. Drücken Sie F5.

    Das Projekt wird erstellt, und die App wird geöffnet.

  4. Geben Sie in der Adressleiste der App eine NICHT-HTTPS-URL ein, z http://www.bing.com. B. , und klicken Sie dann auf die Schaltfläche Gehe zu.

    Das WebView2-Steuerelement der App zeigt ein Warnungsdialogfeld für Nicht-HTTPS-Websites an, in dem darauf hingewiesen wird, dass das Nicht-HTTPS-Steuerelement uri nicht sicher ist:

    Das WebView2-Steuerelement der App zeigt ein Warnungsdialogfeld für Nicht-HTTPS-Websites an.

  5. Schließen Sie die App.

Herzlichen Glückwunsch, Sie haben eine WebView2 WinUI 3 (Windows App SDK)-App erstellt!

Siehe auch

developer.microsoft.com:

GitHub: