目前本地或网络的网页内容和文件加载

WebView是在您的应用程序显示Web和HTML内容的视图。不像OpenUri，这需要用户在Web浏览器的设备上，WebView中显示您的应用程序内的HTML内容。

本指南由以下几部分组成：

内容 - web视图支持各种内容源，包括嵌入的HTML，网页和HTML字符串。
导航 -网页视图包括导航到特定页面，回到主页。
活动 –监听并通过在WebView中用户所采取的行动作出回应。
性能 -了解的WebView的每个平台上的性能特点。
权限 -了解如何设置权限，这样的WebView将在您的应用程序工作。
布局 -的WebView有它是如何奠定了一些非常特殊的要求。学习如何正确地确定的WebView显示：

内容

WebView中附带了以下类型的内容支持：
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"

};

注 - 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>

</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>

Xamarin.Forms WebView的更多相关文章

Binding a Xamarin.Forms WebView to ReactiveUI View Model using Custom Type Converters
引用:https://jamilgeor.com/binding-a-xamarin-forms-webview-to-reactiveui-view-model-using-custom-type- ...
Xamarin.Forms——WebView技术研究
在Xamarin中有一些Forms原生不太好实现的内容可以考虑使用HTML.Javascript.CSS那一套前端技术来实现,使用WebView来承载显示本地或网络上的HTML文件.不像OpenUri ...
Xamarin Forms中WebView的自适应高度
在Xamarin.Forms中,WebView如果嵌套在StackLayout和RelativeLayout中必须要设置HeightRequest和WidthRequest属性才会进行渲染.可是在实际 ...
Xamarin.Forms 自定义控件（呈现器和效果）
Xamarin.Forms 使用目标平台的本机控件呈现用户界面,从而让 Xamarin.Forms 应用程序为每个平台保留了相应的界面外观.凭借效果,无需进行自定义呈现器实现,即可自定义每个平台上的本 ...
Xamarin.Forms中为WebView指定数据来源Source
Xamarin.Forms中为WebView指定数据来源Source 网页视图WebView用来显示HTML和网页形式内容.使用这种方式,可以借助网页形式进行界面设计,并利于更新和维护.WebVi ...
Xamarin.Forms 开发资源集合(复制)
复制:https://www.cnblogs.com/mschen/p/10199997.html 收集整理了下 Xamarin.Forms 的学习参考资料,分享给大家,稍后会不断补充: UI样式 S ...
Xamarin.Forms 开发资源集合
收集整理了下 Xamarin.Forms 的学习参考资料,分享给大家,稍后会不断补充: UI样式 Snppts: Xamarin Forms UI Snippets. Prebuilt Templat ...
整理 Xamarin.Forms - Plugins
Open Source Components for Xamarin Xamarin官方整理的一些开源组件,有需要可以先到这里找 GitHub: xamarin/XamarinComponents: ...
xamarin.forms新建项目android编译错误
vs2015 update3 新建的xamarin.forms项目中的android项目编译错误.提示缺少android_m2repository_r22.zip,96659D653BDE0FAEDB ...

随机推荐

nginx的upstream目前支持5种方式的分配
Nginx nginx的upstream目前支持5种方式的分配 FROM: 转载 1 轮询(默认) 每个请求按时间顺序逐一分配到不同的后端服务器, 如果后端服务器down掉, 能自动剔除. 2 w ...
Fuel4D 2.1 免费跨平台游戏引擎现已发布
Fuel4D 2.1 免费跨平台游戏引擎现已发布开发环境:纯 C/C++,无JAVA.O-C. 支持 WIN32.安卓系统. 详情见官方网站:http://www.fuel4d.com 或者进F ...
学习《Spring 3.x 企业应用开发实战》Day-1
Day-1 记录自己学习spring的笔记提要:根据<Spring 3.x 企业应用开发实战>开头一个用户登录的例子,按照上面敲的. 1.项目分层
zoj 3537 Cake(区间dp)
这道题目是经典的凸包的最优三角剖分,不过这个题目给的可能不是凸包,所以要提前判定一下是否为凸包,如果是凸包的话才能继续剖分,dp[i][j]表示已经排好序的凸包上的点i->j上被分割成一个个小三 ...
全文索引--自定义chinese_lexer词典
全文索引它的数据字典本来就是自己加密过的数据格式,只有翻译过来了,才可以修改.这样修改后再生成它自己的数据格式文件,覆盖掉原来的,就会将新添加的关键词加入进去了!! 以下操作是在Oracle服务器安装 ...
UIScrollView 之图片缩放
UIScrollView 之图片缩放有些时候,我们可能要对某些内容进行手势缩放,如下图所示 UIScrollView不仅能滚动显示大量内容,还能对其内容进行缩放处理也就是说,要完成缩放功能的话,只 ...
iOS面试题整理(一)
代码规范这是一个重点考察项,曾经在微博上发过一个风格纠错题: 也曾在面试时让人当场改过,槽点不少,能够有 10 处以上修改的就基本达到标准了(处女座的人在这方面表现都很优秀一个区分度很大的面试题 ...
Swift - 04 - 浮点型
import UIKit var str = "Hello, playground" // 显式定义浮点型常量 let PI:Float = 3.141592612312312 l ...
centos yum
1.介绍 yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器.基於RPM包管理,能够从指定的服务器 ...
centos 6.X 安装输入法
1.打开终端 su 输入密码 yum install "@Chinese Support" 2.接下来是启用中文输入法的操作系统 ->首选项 ->输入法 3.在弹出 ...

Xamarin.Forms WebView

布局

Xamarin.Forms WebView的更多相关文章

随机推荐

热门专题