WebView是在您的應用程式中顯示網頁和HTML內容的檢視。不同的是OpenUri，將使用者帶到裝置上的Web瀏覽器，在WebView應用程式中顯示HTML內容。

本指南由以下部分組成：

內容 - WebView支援各種內容源，包括嵌入式HTML，網頁和HTML字串。
導航 - WebView包括導航到特定頁面並返回的支援。
事件 - 聽取並回應使用者在WebView中採取的行動。
效能 - 瞭解WebView在每個平臺上的效能特徵。
許可權 - 瞭解如何設定許可權，以便WebView可以在您的應用程式中執行。
佈局 - WebView對它的佈局有一些非常特殊的要求。瞭解如何確保WebView正確顯示：

內容

WebView支援以下型別的內容：

HTML和CSS網站 - WebView完全支援使用HTML和CSS編寫的網站，包括JavaScript支援。
文件 - 由於WebView是使用每個平臺上的本機元件實現的，所以WebView能夠顯示每個平臺上可檢視的文件。這意味著PDF檔案適用於iOS和Android，但不適用於Windows Phone。
HTML字串 - WebView可以顯示記憶體中的HTML字串。
本地檔案 - WebView可以顯示上述嵌入在應用程式中的任何內容型別。

注意：WebViewWindows和Windows Phone不支援Silverlight，Flash或任何ActiveX控制元件，即使該平臺上的Internet Explorer支援它們。

網站

要顯示從網際網路網站，設定WebView的Source屬性為字串URL：

var browser = new WebView {
  Source = "http://xamarin.com"
};

注意：URL必須使用指定的協議完全形成（即它必須有“http：//”或“https：//”）。

iOS和ATS

自版本9以來，iOS將只允許您的應用程式與預設實現最佳實踐安全性的伺服器進行通訊。必須設定值Info.plist以實現與不安全的伺服器的通訊。

注意：如果您的應用程式需要連線到不安全的網站，則應始終使用NSExceptionDomains作為異常輸入域，而不是使用NSAllowsArbitraryLoads

完全關閉ATS 。只有在極端緊急情況下才能使用NSAlwaysArbitraryLoads。

以下演示如何啟用特定域（在這種情況下為xamarin.com）來繞過ATS要求：

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

最好的做法是隻允許某些域繞過ATS，允許您使用受信任的站點，同時從不受信任的域上的附加安全性中受益。以下演示了對應用程式禁用ATS的安全性較低的方法：

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

有關iOS 9中此新功能的詳細資訊，請參閱應用程式傳輸安全性。

HTML字串

如果要在程式碼中呈現動態定義的HTML字串，則需要建立一個例項HtmlWebViewSource：

var browser = new WebView();
var htmlSource = new HtmlWebViewSource();
htmlSource.Html = @"<html><body>
  <h1>Xamarin.Forms</h1>
  <p>Welcome to WebView.</p>
  </body></html>";
browser.Source = htmlSource;

在上面的程式碼中，@用於將HTML標記為字串文字，這意味著所有常見的轉義字元都將被忽略。

本地HTML內容

WebView可以顯示嵌入在應用程式中的HTML，CSS和Javascript內容。例如：

<html>
  <head>
    <title>Xamarin Forms</title>
  </head>
  <body>
    <h1>Xamrin.Forms</h1>
    <p>This is an iOS web page.</p>
    <img src="XamarinLogo.png" />
  </body>
</html>

CSS：

html,body {
  margin:0;
  padding:10;
}
body,p,h1 {
  font-family: Chalkduster;
}

請注意，上述CSS中指定的字型需要為每個平臺定製，因為並非每個平臺都具有相同的字型。

要使用a顯示本地內容WebView，您需要像其他任何一樣開啟HTML檔案，然後將內容作為字串載入到Html屬性中HtmlWebViewSource。有關開啟檔案的更多資訊，請參閱使用檔案。

以下螢幕截圖顯示了在每個平臺上顯示本地內容的結果：

雖然第一頁已經載入，但WebView不知道HTML來自哪裡。在處理引用本地資源的頁面時，這是一個問題。何時可能發生的示例包括當本地頁面彼此連結時，頁面使用單獨的JavaScript檔案或連結到CSS樣式表的頁面。

要解決這個問題，您需要告訴在WebView哪裡找到檔案系統上的檔案。通過設定BaseUrl所HtmlWebViewSource使用的屬性來做到這一點WebView。

由於每個作業系統上的檔案系統不同，因此您需要在每個平臺上確定該URL。Xamarin.Forms DependencyService在每個平臺上公開了在執行時解析依賴關係。

要使用DependencyService，首先定義一個可以在每個平臺上實現的介面：

public interface IBaseUrl { string Get(); }

請注意，在每個平臺上實現該介面之前，應用程式將不會執行。在通用專案中，請確保您記得BaseUrl使用以下設定DependencyService：

var source = new HtmlWebViewSource();
source.BaseUrl = DependencyService.Get<IBaseUrl>().Get();

那麼必須提供每個平臺的介面的實現。

iOS版

在iOS上，Web內容應位於專案的根目錄或資源目錄中，其中包含構建操作BundleResource，如下所示：

該BaseUrl應設定主束的路徑：

[assembly: Dependency (typeof (BaseUrl_iOS))]
namespace WorkingWithWebview.iOS{
  public class BaseUrl_iOS : IBaseUrl {
    public string Get() {
      return NSBundle.MainBundle.BundlePath;
    }
  }
}

Android的

在Android上，將HTML，CSS和影象放在資產資料夾中，其中包含構建動作AndroidAsset，如下所示：

在Android上，BaseUrl應該設定為"file:///android_asset/"：

[assembly: Dependency (typeof(BaseUrl_Android))]
namespace WorkingWithWebview.Android {
  public class BaseUrl_Android : IBaseUrl {
    public string Get() {
      return "file:///android_asset/";
    }
  }
}

在Android上，資源資料夾中的檔案也可以通過Forms.Context.Assets屬性訪問，如下面的程式碼示例所示：

var assetManager = Xamarin.Forms.Forms.Context.Assets;
using (var streamReader = new StreamReader (assetManager.Open ("local.html"))) {
  var html = streamReader.ReadToEnd ();
}

Windows Phone

在Windows Phone上，將HTML，CSS和影象放在專案根目錄中，將構建操作設定為Content，如下所示：

在Windows Phone上，BaseUrl應該設定為""：

[assembly: Dependency (typeof(BaseUrl_Windows))]
namespace WorkingWithWebview.Windows {
  public class BaseUrl_Windows : IBaseUrl {
    public string Get() {
      return "";
    }
  }
}

Windows執行時和通用Windows平臺

在Windows執行時和通用Windows平臺（UWP）專案中，將HTML，CSS和影象放在專案根目錄中，並將構建操作設定為“ 內容”。

該BaseUrl應設定為"ms-appx-web:///"：

[assembly: Dependency(typeof(BaseUrl))]
namespace WorkingWithWebview.UWP
{
    public class BaseUrl : IBaseUrl
    {
        public string Get()
        {
            return "ms-appx-web:///";
        }
    }
}

GoForward（） - 如果CanGoForward是true，呼叫GoForward導航到下一個訪問頁面。
GoBack（） - 如果CanGoBack為true，則呼叫GoBack將導航到最後訪問的頁面。
CanGoBack - true如果false瀏覽器處於起始URL ，那麼有頁面可以導航回來。
CanGoForward - true如果使用者已經向後導航，並且可以前進到已訪問的頁面。

在頁面內，WebView不支援多點觸控手勢。重要的是確保內容是移動裝置優化的，不需要縮放即可顯示。

應用程式通常在一個WebView而不是裝置的瀏覽器中顯示連結。在這些情況下，允許正常導航是有用的，但是當用戶在啟動連結上點選時，應用程式應該返回到正常的應用程式檢視。

使用內建的導航方法和屬性啟用此方案。

首先建立瀏覽器檢視的頁面：

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="WebViewDemo.InAppDemo"
Title="In App Browser">
    <ContentPage.Content>
        <StackLayout>
            <StackLayout Orientation="Horizontal" Padding="10,10">
                <Button Text="Back" HorizontalOptions="StartAndExpand" Clicked="backClicked" />
                <Button Text="Forward" HorizontalOptions="End" Clicked="forwardClicked" />
            </StackLayout>
            <WebView x:Name="Browser" WidthRequest="1000" HeightRequest="1000" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

在我們的程式碼隱藏中：

public partial class InAppDemo : ContentPage
{
  //sets the URL for the browser in the page at creation
    public InAppDemo (string URL)
    {
        InitializeComponent ();
        Browser.Source = URL;
    }
    private void backClicked(object sender, EventArgs e)
    {
    // Check to see if there is anywhere to go back to
        if (Browser.CanGoBack) {
            Browser.GoBack ();
        } else { // If not, leave the view
            Navigation.PopAsync ();
        }
    }
    private void forwardClicked(object sender, EventArgs e)
    {
        if (Browser.CanGoForward) {
            Browser.GoForward ();
        }
    }
}

而已！

活動

WebView引發兩個事件來幫助您響應狀態更改：

瀏覽 - WebView開始載入新頁面時引發的事件。
導航 - 頁面載入並導航停止時引發的事件。

如果您預期使用需要很長時間載入的網頁，請考慮使用這些事件來實現狀態指示器。例如：

我們的XAML：

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="WebViewDemo.LoadingDemo" Title="Loading Demo">
    <ContentPage.Content>
    <StackLayout>
      <Label x:Name="LoadingLabel"
        Text="Loading..."
        HorizontalOptions="Center"
        isVisible="false" />
      <WebView x:Name="Browser"
      HeightRequest="1000"
      WidthRequest="1000"
      Navigating="webOnNavigating"
      Navigated="webOnEndNavigating" />
    </StackLayout>
    </ContentPage.Content>
</ContentPage>

我們的兩個事件處理程式：

void webOnNavigating (object sender, WebNavigatingEventArgs e)
{
            LoadingLabel.IsVisible = true;
}
void webOnEndNavigating (object sender, WebNavigatedEventArgs e)
{
            LoadingLabel.IsVisible = false;
}

這導致以下輸出（載入）：

已完成裝載：

效能

最近的進展已經看到每個流行的Web瀏覽器都採用硬體加速渲染和JavaScript編譯等技術。不幸的是，由於安全限制，大多數的進步都不在的iOS的-equaivalent可用WebView，UIWebView。Xamarin.Forms WebView使用UIWebView。如果這是一個問題，您需要編寫一個使用的自定義渲染器WKWebView，這支援更快的瀏覽。請注意，WKWebView只有iOS 8和更高版本才支援。

預設情況下，Android上的WebView與內建瀏覽器的速度一樣快。

將WebBrowser在Windows Phone 8和Windows Phone 8.1控制元件不支援最新的HTML5功能，可以經常有表現不佳。請注意網站在Windows Phone中的顯示方式WebView。在Internet Explorer中測試還不夠。

許可權

為了WebView工作，您必須確保為每個平臺設定許可權。請注意，在某些平臺上，WebView將在除錯模式下工作，但不能在內建版本時釋出。這是因為在除錯模式下，Xamarin Studio預設設定了一些許可權，如Android上的網際網路訪問許可權。

Xamarin.Forms 使用者介面——控制元件——WebView

內容

網站

iOS和ATS

HTML字串

本地HTML內容

iOS版

Android的

Windows Phone

Windows執行時和通用Windows平臺

導航

活動

效能

許可權

Xamarin.Forms 使用者介面——控制元件——WebView

Xamarin(vs2015) Android控制元件 WebView載入網頁

.NET介面控制元件DevExpress釋出v18.1.7|附下載

.NET介面控制元件DevExpress v18.2.3全新發布|附下載

VCL介面控制元件DevExpress VCL釋出v18.1.6|附下載

VCL介面控制元件DevExpress VCL釋出v18.1.7|附下載

unity如何在C#程式碼裡面獲得介面控制元件的屬性

Dialog新增webview+原生控制元件webview高度自適應問題

WinForm 清空介面控制元件值的小技巧

QT中的UI介面控制元件隨視窗自適應變化大小

Android--介面控制元件

設定Android控制元件WebView不可滑動

.NET介面控制元件DevExpress釋出v18.2.4|附下載

PyQt5高階介面控制元件之QLIstView（二）

解決HRESULT:0x80070057 (E_INVALIDARG)異常導致介面控制元件無法顯示

PyQt5高階介面控制元件之QThread（十二）

關於winForm介面控制元件和圖片載入時出現閃屏的問題

fairyGUI介面控制元件的基本製作和功能實現

VCL介面控制元件DevExpress VCL Controls釋出v18.2.3|附下載

基於MVC4+EasyUI的Web開發框架形成之旅--介面控制元件的使用

Xamarin.Forms 使用者介面——控制元件——WebView

內容

網站

iOS和ATS

HTML字串

本地HTML內容

iOS版

Android的

Windows Phone

Windows執行時和通用Windows平臺

導航

活動

效能

許可權

相關推薦