WebView
L'interfaccia utente dell'app multipiattaforma .NET (.NET MAUI) WebView visualizza pagine Web remote, file HTML locali e stringhe HTML in un'app. Il contenuto visualizzato WebView include il supporto per CSS (Cascading Style Sheets) e JavaScript. Per impostazione predefinita, i progetti MAUI .NET includono le autorizzazioni della piattaforma necessarie per WebView visualizzare una pagina Web remota.
WebView definisce le proprietà seguenti:
- Cookies, di tipo
CookieContainer, fornisce l'archiviazione per una raccolta di cookie. - CanGoBack, di tipo
bool, indica se l'utente può passare alle pagine precedenti. Questa proprietà è di sola lettura. - CanGoForward, di tipo
bool, indica se l'utente può spostarsi in avanti. Questa proprietà è di sola lettura. - Source, di tipo
WebViewSource, rappresenta il percorso visualizzato dall'oggetto WebView . - UserAgent, di tipo
string, rappresenta l'agente utente. Il valore predefinito è l'agente utente del browser della piattaforma sottostante onullse non può essere determinato.
Queste proprietà sono supportate da BindableProperty oggetti, il che significa che possono essere destinazioni di data binding e stili.
La Source proprietà può essere impostata su un UrlWebViewSource oggetto o su un HtmlWebViewSource oggetto, che derivano entrambi da WebViewSource. Un UrlWebViewSource oggetto viene utilizzato per caricare una pagina Web specificata con un URL, mentre un HtmlWebViewSource oggetto viene usato per caricare un file HTML locale o html locale.
WebView definisce un Navigating evento generato all'avvio dello spostamento tra le pagine e un Navigated evento generato al termine della navigazione nella pagina. L'oggetto WebNavigatingEventArgs che accompagna l'evento Navigating definisce una Cancel proprietà di tipo bool che può essere utilizzata per annullare la navigazione. L'oggetto WebNavigatedEventArgs che accompagna l'evento Navigated definisce una Result proprietà di tipo WebNavigationResult che indica il risultato della navigazione.
Importante
Un WebView oggetto deve specificare HeightRequest le relative proprietà e WidthRequest quando è contenuto in un HorizontalStackLayoutoggetto , StackLayouto VerticalStackLayout. Se non si specificano queste proprietà, non verrà eseguito il WebView rendering.
Visualizzare una pagina Web
Per visualizzare una pagina Web remota, impostare la Source proprietà su un string oggetto che specifica l'URI:
<WebView Source="https://learn.microsoft.com/dotnet/maui" />
Il codice C# equivalente è il seguente:
WebView webvView = new WebView
{
Source = "https://learn.microsoft.com/dotnet/maui"
};
Gli URI devono essere completamente formati con il protocollo specificato.
Nota
Nonostante la Source proprietà di tipo WebViewSource, la proprietà può essere impostata su un URI basato su stringa. Poiché .NET MAUI include un convertitore di tipi e un operatore di conversione implicita, che converte l'URI basato su stringa in un UrlWebViewSource oggetto .
Configurare App Transport Security in iOS e Mac Catalyst
Dalla versione 9, iOS consentirà solo all'app di comunicare con server sicuri. Un'app deve acconsentire esplicitamente all'abilitazione della comunicazione con server non sicuri.
La configurazione di Info.plist seguente illustra come abilitare un dominio specifico per ignorare i requisiti di 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>
È consigliabile abilitare solo domini specifici per ignorare ATS, consentendo di usare siti attendibili sfruttando al contempo la sicurezza aggiuntiva nei domini non attendibili.
La configurazione info.plist seguente illustra come disabilitare ATS per un'app:
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
Importante
Se l'app richiede una connessione a un sito Web non sicuro, devi sempre immettere il dominio come eccezione usando la NSExceptionDomains chiave anziché disattivare completamente ATS usando la NSAllowsArbitraryLoads chiave.
Visualizzare il codice HTML locale
Per visualizzare il codice HTML inline, impostare la Source proprietà su un HtmlWebViewSource oggetto :
<WebView>
<WebView.Source>
<HtmlWebViewSource Html="<HTML><BODY><H1>.NET MAUI</H1><P>Welcome to WebView.</P></BODY><HTML>" />
</WebView.Source>
</WebView>
In XAML le stringhe HTML possono diventare illeggibili a causa dell'escape dei < simboli e > . Pertanto, per una maggiore leggibilità, il codice HTML può essere inlined in una CDATA sezione:
<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>
Il codice C# equivalente è il seguente:
WebView webView = new WebView
{
Source = new HtmlWebViewSource
{
Html = @"<HTML><BODY><H1>.NET MAUI</H1><P>Welcome to WebView.</P></BODY></HTML>"
}
};
Visualizzare un file HTML locale
Per visualizzare un file HTML locale, aggiungere il file alla cartella Resources\Raw del progetto dell'app e impostarne l'azione di compilazione su MauiAsset. Il file può quindi essere caricato dal codice HTML inline definito in un HtmlWebViewSource oggetto impostato come valore della Source proprietà :
<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>
Il file HTML locale può caricare fogli di stile css (CSS), JavaScript e immagini, se sono stati aggiunti anche al progetto dell'app con l'azione di compilazione MauiAsset .
Per altre informazioni sugli asset non elaborati, vedere Asset non elaborati.
Ricaricare il contenuto
WebView ha un Reload metodo che può essere chiamato per ricaricare l'origine:
WebView webView = new WebView();
...
webView.Reload();
Quando il Reload metodo viene richiamato, viene generato l'evento ReloadRequested , a indicare che è stata effettuata una richiesta per ricaricare il contenuto corrente.
Eseguire la navigazione
WebView supporta la navigazione a livello di codice con i GoBack metodi e GoForward . Questi metodi consentono lo spostamento tramite lo WebView stack di pagine e devono essere chiamati solo dopo aver esaminato i valori delle CanGoBack proprietà e CanGoForward :
WebView webView = new WebView();
...
// Go backwards, if allowed.
if (webView.CanGoBack)
{
webView.GoBack();
}
// Go forwards, if allowed.
if (webView.CanGoForward)
{
webView.GoForward();
}
Quando lo spostamento di pagina si verifica in un WebViewoggetto , avviato a livello di codice o dall'utente, si verificano gli eventi seguenti:
Navigating, generato all'avvio della struttura di spostamento della pagina. L'oggettoWebNavigatingEventArgsche accompagna l'eventoNavigatingdefinisce unaCancelproprietà di tipoboolche può essere utilizzata per annullare la navigazione.Navigated, generato al termine della navigazione nella pagina. L'oggettoWebNavigatedEventArgsche accompagna l'eventoNavigateddefinisce unaResultproprietà di tipoWebNavigationResultche indica il risultato della navigazione.
Gestire le autorizzazioni in Android
Quando si passa a una pagina che richiede l'accesso all'hardware di registrazione del dispositivo, ad esempio la fotocamera o il WebView microfono, l'autorizzazione deve essere concessa dal controllo. Il WebView controllo usa il Android.Webkit.WebChromeClient tipo in Android per reagire alle richieste di autorizzazione. Tuttavia, l'implementazione WebChromeClient fornita da .NET MAUI ignora le richieste di autorizzazione. È necessario creare un nuovo tipo che eredita da MauiWebChromeClient e approva le richieste di autorizzazione.
Importante
La personalizzazione di per approvare le richieste di autorizzazione, usando questo approccio, richiede l'API WebView Android 26 o versione successiva.
Le richieste di autorizzazione da una pagina Web al WebView controllo sono diverse dalle richieste di autorizzazione dall'app MAUI .NET all'utente. Le autorizzazioni dell'app .NET MAUI vengono richieste e approvate dall'utente per l'intera app. Il WebView controllo dipende dalla capacità delle app di accedere all'hardware. Per illustrare questo concetto, considerare una pagina Web che richiede l'accesso alla fotocamera del dispositivo. Anche se tale WebView richiesta è approvata dal controllo, l'app MAUI .NET non ha ancora ottenuto l'approvazione da parte dell'utente per accedere alla fotocamera, la pagina Web non sarebbe in grado di accedere alla fotocamera.
I passaggi seguenti illustrano come intercettare le richieste di autorizzazione dal WebView controllo per usare la fotocamera. Se si sta tentando di usare il microfono, i passaggi sarebbero simili, ad eccezione del fatto che si userebbero autorizzazioni correlate al microfono anziché autorizzazioni correlate alla fotocamera.
Aggiungere prima di tutto le autorizzazioni necessarie per l'app al manifesto Android. Aprire il file Platforms/Android/AndroidManifest.xml e aggiungere quanto segue nel
manifestnodo:<uses-permission android:name="android.permission.CAMERA" />A un certo punto dell'app, ad esempio quando viene caricata la pagina contenente un
WebViewcontrollo, richiedere l'autorizzazione dell'utente per consentire all'app di accedere alla fotocamera.private async Task RequestCameraPermission() { PermissionStatus status = await Permissions.CheckStatusAsync<Permissions.Camera>(); if (status != PermissionStatus.Granted) await Permissions.RequestAsync<Permissions.Camera>(); }Aggiungere la classe seguente alla cartella Platforms/Android , modificando lo spazio dei nomi radice in modo che corrisponda allo spazio dei nomi del progetto:
using Android.Webkit; using Microsoft.Maui.Handlers; using Microsoft.Maui.Platform; namespace MauiAppWebViewHandlers.Platforms.Android; internal class MyWebChromeClient: MauiWebChromeClient { public MyWebChromeClient(IWebViewHandler handler) : base(handler) { } public override void OnPermissionRequest(PermissionRequest request) { // Process each request foreach (var resource in request.GetResources()) { // Check if the web page is requesting permission to the camera if (resource.Equals(PermissionRequest.ResourceVideoCapture, StringComparison.OrdinalIgnoreCase)) { // Get the status of the .NET MAUI app's access to the camera PermissionStatus status = Permissions.CheckStatusAsync<Permissions.Camera>().Result; // Deny the web page's request if the app's access to the camera is not "Granted" if (status != PermissionStatus.Granted) request.Deny(); else request.Grant(request.GetResources()); return; } } base.OnPermissionRequest(request); } }Nel frammento di codice precedente la
MyWebChromeClientclasse eredita daMauiWebChromeCliented esegue l'override delOnPermissionRequestmetodo per intercettare le richieste di autorizzazione della pagina Web. Ogni elemento di autorizzazione viene controllato per verificare se corrisponde allaPermissionRequest.ResourceVideoCapturecostante stringa, che rappresenta la fotocamera. Se viene trovata una corrispondenza con un'autorizzazione per la fotocamera, il codice verifica se l'app dispone dell'autorizzazione per l'uso della fotocamera. Se dispone dell'autorizzazione, viene concessa la richiesta della pagina Web.Usare il metodo nel SetWebChromeClient controllo android
WebViewper impostare il client Chrome suMyWebChromeClient. I due elementi seguenti illustrano come impostare il client Chrome:Dato un controllo MAUI
WebView.NET denominatotheWebViewControl, è possibile impostare il client Chrome direttamente nella visualizzazione della piattaforma, ovvero il controllo Android:((IWebViewHandler)theWebViewControl.Handler).PlatformView.SetWebChromeClient(new MyWebChromeClient((IWebViewHandler)theWebViewControl.Handler));È anche possibile usare il mapping delle proprietà del gestore per forzare tutti i
WebViewcontrolli a usare il client Chrome. Per altre informazioni, vedere Gestori.Il metodo del
CustomizeWebViewHandlerframmento di codice seguente deve essere chiamato all'avvio dell'app, ad esempio nelMauiProgram.CreateMauiAppmetodo .private static void CustomizeWebViewHandler() { #if ANDROID26_0_OR_GREATER Microsoft.Maui.Handlers.WebViewHandler.Mapper.ModifyMapping( nameof(Android.Webkit.WebView.WebChromeClient), (handler, view, args) => handler.PlatformView.SetWebChromeClient(new MyWebChromeClient(handler))); #endif }
Impostare i cookie
I cookie possono essere impostati su un oggetto WebView in modo che vengano inviati con la richiesta Web all'URL specificato. Impostare i cookie aggiungendo Cookie oggetti a un CookieContainere quindi impostando il contenitore come valore della WebView.Cookies proprietà associabile. Il codice seguente visualizza un esempio:
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() };
In questo esempio viene aggiunto un singolo Cookie oggetto CookieContainer , che viene quindi impostato come valore della WebView.Cookies proprietà . WebView Quando invia una richiesta Web all'URL specificato, il cookie viene inviato con la richiesta.
Richiamare JavaScript
WebView include la possibilità di richiamare una funzione JavaScript da C# e restituire qualsiasi risultato al codice C# chiamante. Questa interoperabilità viene eseguita con il EvaluateJavaScriptAsync metodo , illustrato nell'esempio seguente:
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}.";
Il WebView.EvaluateJavaScriptAsync metodo valuta il codice JavaScript specificato come argomento e restituisce qualsiasi risultato come .string In questo esempio viene richiamata la factorial funzione JavaScript, che restituisce il fattoriale di number di conseguenza. Questa funzione JavaScript viene definita nel file HTML locale caricato WebView e illustrato nell'esempio seguente:
<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>
Configurare WebView nativo in iOS e Mac Catalyst
Il controllo nativo WebView è un MauiWKWebView in iOS e Mac Catalyst, che deriva da WKWebView. Uno degli overload del MauiWKWebView costruttore consente di specificare un WKWebViewConfiguration oggetto, che fornisce informazioni su come configurare l'oggetto WKWebView . Le configurazioni tipiche includono l'impostazione dell'agente utente, la specifica dei cookie da rendere disponibili per il contenuto Web e l'inserimento di script personalizzati nel contenuto Web.
È possibile creare un WKWebViewConfiguration oggetto nell'app e quindi configurarne le proprietà in base alle esigenze. In alternativa, è possibile chiamare il metodo statico MauiWKWebView.CreateConfiguration per recuperare l'oggetto MAUI di WKWebViewConfiguration .NET e quindi modificarlo. L'oggetto WKWebViewConfiguration può quindi essere specificato come argomento per l'overload del MauiWKWebView costruttore.
Poiché la configurazione del nativo WebView non può essere modificata in iOS e Mac Catalyst dopo la creazione della visualizzazione della piattaforma del gestore, è necessario creare un delegato di factory del gestore personalizzato per modificarlo:
#if IOS || MACCATALYST
using WebKit;
using CoreGraphics;
using Microsoft.Maui.Platform;
using Microsoft.Maui.Handlers;
#endif
...
#if IOS || MACCATALYST
Microsoft.Maui.Handlers.WebViewHandler.PlatformViewFactory = (handler) =>
{
WKWebViewConfiguration config = MauiWKWebView.CreateConfiguration();
config.ApplicationNameForUserAgent = "MyProduct/1.0.0";
return new MauiWKWebView(CGRect.Empty, (WebViewHandler)handler, config);
};
#endif
Nota
È consigliabile configurare MauiWKWebView con un WKWebViewConfiguration oggetto prima che venga WebView visualizzato nell'app. Le posizioni appropriate per eseguire questa operazione si trovano nel percorso di avvio dell'app, ad esempio in MauiProgram.cs o App.xaml.cs.
Impostare le preferenze di riproduzione multimediale in iOS e Mac Catalyst
La riproduzione multimediale inline del video HTML5, inclusa la riproduzione automatica e l'immagine nell'immagine, è abilitata per impostazione predefinita per in WebView iOS e Mac Catalyst. Per modificare questo valore predefinito o impostare altre preferenze di riproduzione multimediale, devi creare un delegato factory del gestore personalizzato, perché le preferenze di riproduzione multimediale non possono essere modificate dopo la creazione della visualizzazione della piattaforma del gestore. Il codice seguente illustra un esempio di questa operazione:
#if IOS || MACCATALYST
using WebKit;
using CoreGraphics;
using Microsoft.Maui.Platform;
using Microsoft.Maui.Handlers;
#endif
...
#if IOS || MACCATALYST
Microsoft.Maui.Handlers.WebViewHandler.PlatformViewFactory = (handler) =>
{
WKWebViewConfiguration config = MauiWKWebView.CreateConfiguration();
// True to play HTML5 videos inliine, false to use the native full-screen controller.
config.AllowsInlineMediaPlayback = false;
// True to play videos over AirPlay, otherwise false.
config.AllowsAirPlayForMediaPlayback = false;
// True to let HTML5 videos play Picture in Picture.
config.AllowsPictureInPictureMediaPlayback = false;
// Media types that require a user gesture to begin playing.
config.MediaTypesRequiringUserActionForPlayback = WKAudiovisualMediaTypes.All;
return new MauiWKWebView(CGRect.Empty, (WebViewHandler)handler, config);
};
#endif
Per altre informazioni sulla configurazione di in WebView iOS, vedere Configurare WebView nativo in iOS e Mac Catalyst.
Esaminare un Controllo WebView su Mac Catalyst
Per usare gli strumenti di sviluppo safari per controllare il contenuto di un WebView in Mac Catalyst, aggiungere il codice seguente all'app:
#if MACCATALYST
Microsoft.Maui.Handlers.WebViewHandler.Mapper.AppendToMapping("Inspect", (handler, view) =>
{
if (OperatingSystem.IsMacCatalystVersionAtLeast(16, 6))
handler.PlatformView.Inspectable = true;
});
#endif
Questo codice personalizza il mapper di proprietà per in WebViewHandler Mac Catalyst, per rendere WebView il contenuto ispezionabile dagli strumenti di sviluppo safari. Per altre informazioni sui gestori, vedere Gestori.
Per usare gli strumenti di sviluppo safari con un'app Mac Catalyst:
- Apri Safari sul tuo Mac.
- In Safari selezionare la casella di controllo Safari > Impostazioni > Menu Avanzate > Mostra sviluppo nella barra dei menu.
- Eseguire l'app Catalyst mac .NET MAUI.
- In Safari selezionare il menu Sviluppo > {Nome dispositivo} in cui il segnaposto è il nome del
{Device name}dispositivo,Macbook Proad esempio . Selezionare quindi la voce sotto il nome dell'app, che evidenzia anche l'app in esecuzione. In questo modo verrà visualizzata la finestra controllo Web.
Avviare il browser di sistema
È possibile aprire un URI nel Web browser di sistema con la Launcher classe , fornita da Microsoft.Maui.Essentials. Chiamare il metodo dell'utilità di OpenAsync avvio e passare un string argomento o Uri che rappresenta l'URI da aprire:
await Launcher.OpenAsync("https://learn.microsoft.com/dotnet/maui");
Per altre informazioni, vedere Utilità di avvio.
Commenti e suggerimenti
Presto disponibile: Nel corso del 2024 verranno gradualmente disattivati i problemi di GitHub come meccanismo di feedback per il contenuto e ciò verrà sostituito con un nuovo sistema di feedback. Per altre informazioni, vedere https://aka.ms/ContentUserFeedback.
Invia e visualizza il feedback per