Xamarin.Forms WebView

時間 2019-11-21

標籤 xamarin.forms xamarin forms webview 简体版

原文原文鏈接

目前本地或網絡的網頁內容和文件加載 html

WebView是在您的應用程序顯示Web和HTML內容的視圖。不像OpenUri，這須要用戶在Web瀏覽器的設備上，WebView中顯示您的應用程序內的HTML內容。 android

本指南由如下幾部分組成： ios

內容 - web視圖支持各類內容源，包括嵌入的HTML，網頁和HTML字符串。
導航 -網頁視圖包括導航到特定頁面，回到主頁。
活動 –監聽並經過在WebView中用戶所採起的行動做出迴應。
性能 -瞭解的WebView的每一個平臺上的性能特色。
權限 -瞭解如何設置權限，這樣的WebView將在您的應用程序工做。
佈局 -的WebView有它是如何奠基了一些很是特殊的要求。學習如何正確地肯定的WebView顯示：

內容 web
WebView中附帶了如下類型的內容支持： api
HTML和CSS網站 - 的WebView有使用HTML和CSS編寫的網站，包括支持JavaScript的全力支持。
文檔 - 由於WebView中使用每一個平臺上本地組件實現的WebView可以顯示是每一個平臺上查看文件。這意味着.PDF適用於iOS和Android，但不是的Windows Phone。
HTML字符串 - 網頁視圖能夠顯示從內存中的HTML字符串。
本地文件 - 上方內嵌在應用中的WebView能夠提出任何內容類型。
注：WebView在Windows和Windows Phone不支持的Silverlight，Flash或任何ActiveX控件，即便它們被完整的Internet Explorer在該平臺上的支持。瀏覽器
網站安全
從網上顯示的網站中，設置的WebView的來源屬性爲一個字符串網址：服務器
var browser = new WebView { 網絡
Source = "http://xamarin.com" dom
};
注 - URL必須以指定的協議徹底造成（即它必須具有的"http：//"或"https：//"前綴）。
iOS和ATS
自9版，iOS版將只容許您的應用程序與默認狀況下采用最佳實踐的安全服務器進行通訊。值必須在設定的Info.plist以實現與不安全的服務器進行通訊。
注意：若是您的應用須要到不安全網站的鏈接，你應該老是輸入域使用異常NSExceptionDomains改運ATS徹底關閉使用NSAllowsArbitraryLoads。NSAllowsArbitraryLoads應只有在極端緊急狀況下使用。
如下說明如何使特定域（在這種狀況下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內容
web視圖能夠顯示嵌入到應用程序中的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中指定的字體將須要被定製爲每一個平臺，由於不是每一個平臺具備相同的字體。

注：目前在Xamarin.Forms一個bug，使得本地的HTML內容沒法在Windows上顯示。這不會影響的Windows Phone。見Bugzilla的更多信息，以及最新的狀態。
要使用顯示本地內容WebView，你須要打開HTML文件像任何其餘，而後加載的內容做爲串入的Html的HtmlWebViewSource。有關打開文件的詳細信息，請參閱處理文件。
雖然咱們已經加載的第一頁時，WebView沒有的HTML來自哪裏知識。與引用本地資源的網頁打交道時是個問題。當這可能發生在包括當地頁面連接到對方的例子，一個頁面使用了一個單獨的JavaScript文件的，或者頁面連接到CSS樣式表。
爲了解決這個問題，你須要告訴的WebView在哪裏能夠找到文件系統上的文件。作到這一點經過設置BASEURL對房地產HtmlWebViewSource被使用的WebView。
由於在每一個操做系統的文件系統是不一樣的，你須要肯定每一個平臺上的網址。Xamarin.Forms公開DependencyService在每一個平臺上運行時的解決依賴。
要使用DependencyService，首先定義能夠在每一個平臺上實現的接口：
```
Public interface IBaseUrl 
```
```
{ 
```
```
    String Get(); 
```
```
} 
```
```
                            
```
須要注意的是，直到接口各平臺上實現，應用程序將沒法運行。在共同的項目，請務必記得設置BASEURL使用DependencyService：
```
var source = new HtmlWebViewSource(); 
```
```
source.BaseUrl = DependencyService.Get<IBaseUrl>().Get(); 
```
```
                            
```
從這裏，你須要提供每一個平臺項目中的接口的實現：
iOS版
```
[assembly: Dependency (typeof (BaseUrl_iOS))] 
```
```
Namespace WorkingWithWebview.iOS 
```
```
{ 
```
```
    Public class BaseUrl_iOS : IBaseUrl 
```
```
    { 
```
```
        Public string Get() 
```
```
        { 
```
```
        Return NSBundle.MainBundle.BundlePath; 
```
```
     } 
```
```
 } 
```
```
} 
```
```
                            
```
該網站的內容應位於項目的根目錄或資源與生成操做目錄BundleResource，以下所示：

Android版
在Android上，地方HTML，CSS，以及與構建行動Assets文件夾圖片AndroidAsset以下所示：

On Android, the BaseUrl should be set to "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（）; 
```
```
 } 
```
```
                            
```
導航
WebView支持經過幾種方法和屬性，可用導航：
GoForward（） -若是CanGoForward是真實的，號召GoForward導航着下一個訪問的網頁。
GoBack的（） -若是CanGoBack是真實的，號召GoBack的將導航到最後訪問的網頁。
CanGoBack - true，若是有頁面導航回，false若是瀏覽器正處於起步URL。
CanGoForward - true若是用戶向後導航，並能夠向前移動到已經訪問過的頁面。
在頁面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;
}
這致使瞭如下的輸出（負荷）：

加載完成：

性能
最新進展已經看到每一個受歡迎的網頁瀏覽器採用相似硬件加速渲染和JavaScript的編譯技術。不幸的是，因爲安全限制，大多數的進步是不可用的了iOS-equaivalent 的WebView，UIWebView的。Xamarin.Forms 的WebView採用UIWebView的。若是這是一個問題，你須要編寫使用自定義渲染WKWebView，支持更快的瀏覽速度。須要注意的是WKWebView僅支持在iOS 8和更新。
在Android的WebView默認狀況下是同樣快的內置瀏覽器。
在web瀏覽器在Windows Phone 8和Windows Phone 8.1控件不支持最新的HTML5的功能和可每每表現不佳。要注意的網站將如何在Windows Phone的顯示的WebView。這是不可以在Internet Explorer中進行測試。
權限
爲了讓WebView中工做，你必須確保權限爲每一個平臺設置。請注意，在某些平臺上，web視圖會在調試模式下工做，而不是在釋放建造。這是由於一些權限，就像那些在Android互聯網接入，默認狀況下，在調試模式下設置由Xamarin工做室。
Windows Phone的8.0 -須要ID_CAP_WEBBROWSERCOMPONENT控制和ID_CAP_NETWORKING互聯網接入。
的Windows Phone 8.1 -顯示網絡內容時須要因特網（客戶端和服務器）的能力。
Android的 -須要INTERNET 顯示來自網絡的內容，只有當。當地含量要求任何特殊權限。

iOS版 -無需任何特殊權限。

佈局

與大多數其餘Xamarin.Forms意見，的WebView要求HeightRequest和WidthRequest包含在StackLayout或RelativeLayout的時候指定。若是你沒有指定這些屬性時，web視圖將不會呈現。

下面的例子證實，致使工做佈局，渲染的WebView小號：

StackLayout 與WidthRequest＆HeightRequest：

< StackLayout >

< Label  Text = "test"  / >

< WebView  Source = "http://www.xamarin.com/"  HeightRequest = "1000"  WidthRequest = "1000"  / >

< / StackLayout >

RelativeLayout與WidthRequest＆HeightRequest的：

< RelativeLayout >

< Label  Text = "test"  RelativeLayout.XConstraint = "{ ConstraintExpression Type = Constant , Constant = 10 }"

RelativeLayout . YConstraint = "{ ConstraintExpression  Type = Constant , Constant = 20 }" / >

< WebView  Source = "http://www.xamarin.com/"  RelativeLayout . XConstraint = "{ ConstraintExpression  Type = Constant , Constant = 10 }" RelativeLayout.YConstraint = "{ ConstraintExpression  Type = Constant , Constant = 50 }"

WidthRequest = "1000"  HeightRequest = "1000"  / >

< / RelativeLayout >

AbsoluteLayout 沒有 WidthRequest＆HeightRequest：

< AbsoluteLayout >

< Label  Text = "test"  AbsoluteLayout . LayoutBounds = "0,0,100,100"  / >

< WebView  Source = "http://www.xamarin.com/"  AbsoluteLayout . LayoutBounds = "0,150,500,500"  / >

< / AbsoluteLayout >

Grid 無 WidthRequest＆HeightRequest。格是一種不須要指定所請求的高度和寬度的少數佈局之一：

<Grid>

<Grid.RowDefinitions>

        <RowDefinition Height="100" />

            <RowDefinition eight="*" />

                </Grid.RowDefinitions>

                    <Label Text="test" Grid.Row="0" />

                        <WebView Source="http://www.xamarin.com/" Grid.Row="1" />

</Grid>

相關標籤/搜索

webview#shouldoverrideurlloading

webview&html5

httpclient+webview

webview+floatingactionbutton

11.webview

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。