:::no-loc(Xamarin.Forms)::: 웹:::no-loc(Xamarin.Forms)::: WebView

샘플 다운로드 샘플 다운로드Download Sample Download the sample

WebView 는 앱에서 웹 및 HTML 콘텐츠를 표시 하는 보기입니다.WebView is a view for displaying web and HTML content in your app:

앱 브라우저에서

콘텐츠Content

WebView 는 다음과 같은 콘텐츠 형식을 지원 합니다.WebView supports the following types of content:

  • HTML & CSS websites 웹 – 보기에는 JavaScript 지원을 비롯 하 여 html & css를 사용 하 여 작성 된 웹 사이트에 대 한 모든 지원이 있습니다HTML & CSS websites – WebView has full support for websites written using HTML & CSS, including JavaScript support.
  • 문서 – 보기는 각 플랫폼에서 네이티브 구성 요소를 사용 하 여 구현 되므로 웹 보기는 기본 플랫폼에서 지원 되는 형식으로 문서를 표시할 수 있습니다.Documents – Because WebView is implemented using native components on each platform, WebView is capable of showing documents in the formats that are supported by the underlying platform.
  • HTML 문자열 – 웹 보기는 메모리의 html 문자열을 표시할 수 있습니다.HTML strings – WebView can show HTML strings from memory.
  • 로컬 파일 – 웹 보기는 앱에 포함 된 모든 콘텐츠 형식을 제공할 수 있습니다.Local Files – WebView can present any of the content types above embedded in the app.

참고

WebView Windows에서는 해당 플랫폼에서 Internet Explorer가 지 원하는 경우에도 Silverlight, Flash 또는 ActiveX 컨트롤을 지원 하지 않습니다.WebView on Windows does not support Silverlight, Flash or any ActiveX controls, even if they are supported by Internet Explorer on that platform.

WebsitesWebsites

인터넷에서 웹 사이트를 표시 하려면 WebViewSource 속성을 문자열 URL로 설정 합니다.To display a website from the internet, set the WebView's Source property to a string URL:

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

참고

Url은 지정 된 프로토콜로 완전히 구성 되어야 합니다 (즉, "http://" 또는 "https://"가 앞에와 야 함).URLs must be fully formed with the protocol specified (i.e. it must have "http://" or "https://" prepended to it).

iOS 및 ATSiOS and ATS

버전 9부터 iOS는 응용 프로그램이 기본적으로 최상의 보안을 구현 하는 서버와 통신할 수 있도록 허용 합니다.Since version 9, iOS will only allow your application to communicate with servers that implement best-practice security by default. Info.plist안전 하지 않은 서버와의 통신을 사용 하려면에서 값을 설정 해야 합니다.Values must be set in Info.plist to enable communication with insecure servers.

참고

응용 프로그램에 보안 되지 않은 웹 사이트에 대 한 연결이 필요한 경우에는를 NSExceptionDomains 사용 하 여 ATS off를 완전히 사용 하는 대신를 사용 하 여 도메인을 항상 예외로 입력 해야 합니다 NSAllowsArbitraryLoads .If your application requires a connection to an insecure website, you should always enter the domain as an exception using NSExceptionDomains instead of turning ATS off completely using NSAllowsArbitraryLoads. NSAllowsArbitraryLoads 매우 긴급 한 상황 에서만 사용 해야 합니다.NSAllowsArbitraryLoads should only be used in extreme emergency situations.

다음은 특정 도메인 (이 경우 xamarin.com)을 사용 하 여 ATS 요구 사항을 무시 하는 방법을 보여 줍니다.The following demonstrates how to enable a specific domain (in this case xamarin.com) to bypass ATS requirements:

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

ATS를 무시 하는 도메인을 사용 하는 것이 좋습니다. 신뢰할 수 없는 도메인에 대 한 추가 보안을 애플리케이션을 빌드하고 하는 동안 신뢰할 수 있는 사이트를 사용할 수 있습니다.It is best practice to only enable some domains to bypass ATS, allowing you to use trusted sites while benefitting from the additional security on untrusted domains. 다음은 응용 프로그램에 대해 ATS를 사용 하지 않도록 설정 하는 안전 하지 않은 방법을 보여 줍니다.The following demonstrates the less secure method of disabling ATS for the app:

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

IOS 9의이 새로운 기능에 대 한 자세한 내용은 앱 전송 보안 을 참조 하세요.See App Transport Security for more information about this new feature in iOS 9.

HTML 문자열HTML Strings

코드에 동적으로 정의 된 HTML 문자열을 표시 하려면 다음과 같이의 인스턴스를 만들어야 합니다 HtmlWebViewSource .If you want to present a string of HTML defined dynamically in code, you'll need to create an instance of HtmlWebViewSource:

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

HTML 문자열을 표시 하는 웹 보기

위의 코드에서 @ 는 HTML을 축 자 문자열 리터럴로표시 하는 데 사용 됩니다. 즉, 대부분의 이스케이프 문자는 무시 됩니다.In the above code, @ is used to mark the HTML as a verbatim string literal, meaning most escape characters are ignored.

참고

WidthRequest HeightRequest WebView 가 자식인 레이아웃에 따라의 및 속성을 설정 하 여 HTML 콘텐츠를 확인 해야 할 수도 있습니다 WebView .It may be necessary to set the WidthRequest and HeightRequest properties of the WebView to see the HTML content, depending upon the layout the WebView is a child of. 예를 들어이는에 필요 StackLayout 합니다.For example, this is required in a StackLayout.

로컬 HTML 콘텐츠Local HTML Content

웹 보기는 앱 내에 포함 된 HTML, CSS 및 JavaScript의 콘텐츠를 표시할 수 있습니다.WebView can display content from HTML, CSS and JavaScript embedded within the app. 예를 들면 다음과 같습니다.For example:

<html>
  <head>
    <title>Xamarin Forms</title>
  </head>
  <body>
    <h1>:::no-loc(Xamarin.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에 지정 된 글꼴은 모든 플랫폼에 동일한 글꼴이 있는 것이 아니라 각 플랫폼에 대해 사용자 지정 해야 합니다.Note that the fonts specified in the above CSS will need to be customized for each platform, as not every platform has the same fonts.

을 사용 하 여 로컬 콘텐츠를 표시 하려면 WebView HTML 파일을 다른 것 처럼 연 다음의 속성에 문자열을 문자열로 로드 해야 합니다 Html HtmlWebViewSource .To display local content using a WebView, you'll need to open the HTML file like any other, then load the contents as a string into the Html property of an HtmlWebViewSource. 파일 열기에 대 한 자세한 내용은 파일 작업을 참조 하세요.For more information on opening files, see Working with Files.

다음 스크린샷에는 각 플랫폼에서 로컬 콘텐츠를 표시 한 결과가 나와 있습니다.The following screenshots show the result of displaying local content on each platform:

로컬 콘텐츠를 표시 하는 웹 보기

첫 번째 페이지가 로드 되어도는 WebView HTML의 출처를 알지 못합니다.Although the first page has been loaded, the WebView has no knowledge of where the HTML came from. 이는 로컬 리소스를 참조 하는 페이지를 처리할 때 발생 하는 문제입니다.That is a problem when dealing with pages that reference local resources. 로컬 페이지를 서로 연결 하거나, 페이지에서 별도의 JavaScript 파일을 사용 하거나, CSS 스타일 시트에 대 한 페이지 링크를 사용 하는 경우를 예로 들 수 있습니다.Examples of when that might happen include when local pages link to each other, a page makes use of a separate JavaScript file, or a page links to a CSS stylesheet.

이를 해결 하려면 WebView 파일 시스템에서 파일을 찾을 위치를 알려 주어 야 합니다.To solve this, you need to tell the WebView where to find files on the filesystem. 에서 사용 하는에 대 한 속성을 설정 하 여이 작업을 수행 BaseUrl HtmlWebViewSource WebView 합니다.Do that by setting the BaseUrl property on the HtmlWebViewSource used by the WebView.

각 운영 체제의 파일 시스템은 서로 다르기 때문에 각 플랫폼에서 해당 URL을 확인 해야 합니다.Because the filesystem on each of the operating systems is different, you need to determine that URL on each platform. :::no-loc(Xamarin.Forms):::DependencyService각 플랫폼에서 런타임에 종속성을 확인 하기 위한를 노출 합니다.:::no-loc(Xamarin.Forms)::: exposes the DependencyService for resolving dependencies at runtime on each platform.

를 사용 하려면 DependencyService 먼저 각 플랫폼에서 구현할 수 있는 인터페이스를 정의 합니다.To use the DependencyService, first define an interface that can be implemented on each platform:

public interface IBaseUrl { string Get(); }

각 플랫폼에서 인터페이스가 구현 될 때까지 앱이 실행 되지 않습니다.Note that until the interface is implemented on each platform, the app will not run. 공통 프로젝트에서를 사용 하 여를 설정 해야 합니다 BaseUrl DependencyService .In the common project, make sure that you remember to set the BaseUrl using the DependencyService:

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

그런 다음 각 플랫폼에 대 한 인터페이스 구현을 제공 해야 합니다.Implementations of the interface for each platform must then be provided.

iOSiOS

IOS에서 웹 콘텐츠는 아래와 같이 BundleResource 빌드 작업을 사용 하 여 프로젝트의 루트 디렉터리 또는 Resources 디렉터리에 배치 되어야 합니다.On iOS, the web content should be located in the project's root directory or Resources directory with build action BundleResource , as demonstrated below:

BaseUrl 주 번들의 경로로 설정 해야 합니다.The BaseUrl should be set to the path of the main bundle:

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

AndroidAndroid

Android에서 아래와 같이 빌드 작업 Androidasset 를 사용 하 여 자산 폴더에 HTML, CSS 및 이미지를 넣습니다.On Android, place HTML, CSS, and images in the Assets folder with build action AndroidAsset as demonstrated below:

Android에서을 BaseUrl 로 설정 해야 합니다 "file:///android_asset/" .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에서 자산 폴더의 파일은 속성에 의해 노출 되는 현재 Android 컨텍스트를 통해 액세스할 수도 있습니다 MainActivity.Instance .On Android, files in the Assets folder can also be accessed through the current Android context, which is exposed by the MainActivity.Instance property:

var assetManager = MainActivity.Instance.Assets;
using (var streamReader = new StreamReader (assetManager.Open ("local.html")))
{
  var html = streamReader.ReadToEnd ();
}

범용 Windows 플랫폼Universal Windows Platform

UWP (유니버설 Windows 플랫폼) 프로젝트에서 빌드 작업을 내용 으로 설정 하 여 프로젝트 루트에 HTML, CSS 및 이미지를 넣습니다.On Universal Windows Platform (UWP) projects, place HTML, CSS and images in the project root with the build action set to Content.

BaseUrl 로 설정 해야 합니다 "ms-appx-web:///" .The BaseUrl should be set to "ms-appx-web:///":

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

웹 보기에서 사용할 수 있는 몇 가지 메서드 및 속성을 탐색할 수 있습니다.WebView supports navigation through several methods and properties that it makes available:

  • Goforward ()CanGoForward 이 true 이면를 호출 하면 GoForward 다음에 방문한 페이지로 이동 합니다.GoForward() – if CanGoForward is true, calling GoForward navigates forward to the next visited page.
  • GoBack ()CanGoBack 이 true 이면를 호출 하면 GoBack 마지막으로 방문한 페이지로 이동 합니다.GoBack() – if CanGoBack is true, calling GoBack will navigate to the last visited page.
  • CanGoBacktrue 다시 탐색할 페이지가 있으면이 고, false 브라우저가 시작 URL에 있으면입니다.CanGoBacktrue if there are pages to navigate back to, false if the browser is at the starting URL.
  • CanGoForwardtrue 사용자가 뒤로 탐색 하 여 이미 방문한 페이지로 이동할 수 있는 경우입니다.CanGoForwardtrue if the user has navigated backwards and can move forward to a page that was already visited.

페이지 내에서 WebView 는 멀티 터치 제스처를 지원 하지 않습니다.Within pages, WebView does not support multi-touch gestures. 콘텐츠가 모바일에 최적화 되 고 확대/축소를 요구 하지 않고 표시 되는지 확인 하는 것이 중요 합니다.It is important to make sure that content is mobile-optimized and appears without the need for zooming.

응용 프로그램에서 장치 브라우저가 아니라 내에 링크를 표시 하는 것이 일반적입니다 WebView .It is common for applications to show a link within a WebView, rather than the device's browser. 이러한 상황에서 일반적인 탐색을 허용 하는 것이 유용 하지만, 시작 링크에 있는 동안 사용자가 다시 방문 하면 앱이 일반 앱 보기로 돌아옵니다.In those situations, it is useful to allow normal navigation, but when the user hits back while they are on the starting link, the app should return to the normal app view.

기본 제공 탐색 메서드 및 속성을 사용 하 여이 시나리오를 사용 하도록 설정 합니다.Use the built-in navigation methods and properties to enable this scenario.

먼저 브라우저 보기에 대 한 페이지를 만듭니다.Start by creating the page for the browser view:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="WebViewSample.InAppBrowserXaml"
             Title="Browser">
    <StackLayout Margin="20">
        <StackLayout Orientation="Horizontal">
            <Button Text="Back" HorizontalOptions="StartAndExpand" Clicked="OnBackButtonClicked" />
            <Button Text="Forward" HorizontalOptions="EndAndExpand" Clicked="OnForwardButtonClicked" />
        </StackLayout>
        <!-- WebView needs to be given height and width request within layouts to render. -->
        <WebView x:Name="webView" WidthRequest="1000" HeightRequest="1000" />
    </StackLayout>
</ContentPage>

코드 숨김으로:In the code-behind:

public partial class InAppBrowserXaml : ContentPage
{
    public InAppBrowserXaml(string URL)
    {
        InitializeComponent();
        webView.Source = URL;
    }

    async void OnBackButtonClicked(object sender, EventArgs e)
    {
        if (webView.CanGoBack)
        {
            webView.GoBack();
        }
        else
        {
            await Navigation.PopAsync();
        }
    }

    void OnForwardButtonClicked(object sender, EventArgs e)
    {
        if (webView.CanGoForward)
        {
            webView.GoForward();
        }
    }
}

이것으로 끝입니다.That's it!

웹 보기 탐색 단추

이벤트Events

웹 보기 상태 변경 내용에 응답 하는 데 도움이 되는 다음 이벤트를 발생 시킵니다.WebView raises the following events to help you respond to changes in state:

  • Navigating – 웹 보기에서 새 페이지를 로드 하기 시작 하면 이벤트가 발생 합니다.Navigating – event raised when the WebView begins loading a new page.
  • Navigated – 페이지가 로드 되 고 탐색이 중지 되 면 이벤트가 발생 합니다.Navigated – event raised when the page is loaded and navigation has stopped.
  • ReloadRequested – 현재 콘텐츠를 다시 로드 하는 요청을 만들 때 발생 하는 이벤트입니다.ReloadRequested – event raised when a request is made to reload the current content.

WebNavigatingEventArgs이벤트와 함께 제공 되는 개체에는 Navigating 다음과 같은 네 가지 속성이 있습니다.The WebNavigatingEventArgs object that accompanies the Navigating event has four properties:

  • Cancel – 탐색을 취소할지 여부를 나타냅니다.Cancel – indicates whether or not to cancel the navigation.
  • NavigationEvent – 발생 한 탐색 이벤트입니다.NavigationEvent – the navigation event that was raised.
  • Source – 탐색을 수행한 요소입니다.Source – the element that performed the navigation.
  • Url – 탐색 대상입니다.Url – the navigation destination.

WebNavigatedEventArgs이벤트와 함께 제공 되는 개체에는 Navigated 다음과 같은 네 가지 속성이 있습니다.The WebNavigatedEventArgs object that accompanies the Navigated event has four properties:

  • NavigationEvent – 발생 한 탐색 이벤트입니다.NavigationEvent – the navigation event that was raised.
  • Result – 열거형 멤버를 사용 하 여 탐색 결과를 설명 합니다 WebNavigationResult .Result – describes the result of the navigation, using a WebNavigationResult enumeration member. 유효한 값은 Cancel, Failure, SuccessTimeout입니다.Valid values are Cancel, Failure, Success, and Timeout.
  • Source – 탐색을 수행한 요소입니다.Source – the element that performed the navigation.
  • Url – 탐색 대상입니다.Url – the navigation destination.

로드 하는 데 시간이 오래 걸리는 웹 페이지를 사용 하는 것으로 예상 되는 경우 및 이벤트를 사용 하 여 상태 표시기를 구현 하는 것이 좋습니다 Navigating Navigated .If you anticipate using webpages that take a long time to load, consider using the Navigating and Navigated events to implement a status indicator. 예를 들면 다음과 같습니다.For example:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="WebViewSample.LoadingLabelXaml"
             Title="Loading Demo">
    <StackLayout>
        <!--Loading label should not render by default.-->
        <Label x:Name="labelLoading" Text="Loading..." IsVisible="false" />
        <WebView HeightRequest="1000" WidthRequest="1000" Source="http://www.xamarin.com" Navigated="webviewNavigated" Navigating="webviewNavigating" />
    </StackLayout>
</ContentPage>

두 이벤트 처리기는 다음과 같습니다.The two event handlers:

void webviewNavigating(object sender, WebNavigatingEventArgs e)
{
    labelLoading.IsVisible = true;
}

void webviewNavigated(object sender, WebNavigatedEventArgs e)
{
    labelLoading.IsVisible = false;
}

이로 인해 다음과 같이 출력 됩니다 (로딩).This results in the following output (loading):

웹 보기 탐색 이벤트 예제

로드 완료:Finished Loading:

웹 보기 탐색 이벤트 예제

콘텐츠 다시 로드Reloading content

WebView 에는 Reload 현재 콘텐츠를 다시 로드 하는 데 사용할 수 있는 메서드가 있습니다.WebView has a Reload method that can be used to reload the current content:

var webView = new WebView();
...
webView.Reload();

Reload메서드가 호출 되 면 ReloadRequested 현재 콘텐츠를 다시 로드 하도록 요청 되었음을 나타내는 이벤트가 발생 합니다.When the Reload method is invoked the ReloadRequested event is fired, indicating that a request has been made to reload the current content.

성능Performance

널리 사용 되는 웹 브라우저는 하드웨어 가속 렌더링 및 JavaScript 컴파일과 같은 기술을 채택 합니다.Popular web browsers adopt technologies like hardware accelerated rendering and JavaScript compilation. 4.4 이전 버전에서는 :::no-loc(Xamarin.Forms)::: :::no-loc(Xamarin.Forms)::: WebView 클래스가 iOS에서 구현 되었습니다 UIWebView .Prior to :::no-loc(Xamarin.Forms)::: 4.4, the :::no-loc(Xamarin.Forms)::: WebView was implemented on iOS by the UIWebView class. 그러나이 구현에서는 이러한 기술을 대부분 사용할 수 없었습니다.However, many of these technologies were unavailable in this implementation. 따라서 4.4부터 :::no-loc(Xamarin.Forms)::: 은 :::no-loc(Xamarin.Forms)::: WebView WkWebView 더 빠른 검색을 지 원하는 클래스에 의해 iOS에서 구현 됩니다.Therefore, since :::no-loc(Xamarin.Forms)::: 4.4, the :::no-loc(Xamarin.Forms)::: WebView is implemented on iOS by the WkWebView class, which supports faster browsing.

참고

IOS에서에는 WkWebViewRenderer 인수를 허용 하는 생성자 오버 로드가 있습니다 WkWebViewConfiguration .On iOS, the WkWebViewRenderer has a constructor overload that accepts a WkWebViewConfiguration argument. 이렇게 하면 렌더러를 만들 때 구성할 수 있습니다.This enables the renderer to be configured on creation.

응용 프로그램은 호환성을 위해 iOS 클래스를 사용 하 여를 구현할 수 있습니다 UIWebView :::no-loc(Xamarin.Forms)::: WebView .An application can return to using the iOS UIWebView class to implement the :::no-loc(Xamarin.Forms)::: WebView, for compatibility reasons. 응용 프로그램에 대 한 iOS 플랫폼 프로젝트의 AssemblyInfo.cs 파일에 다음 코드를 추가 하 여이 작업을 수행할 수 있습니다.This can be achieved by adding the following code to the AssemblyInfo.cs file in the iOS platform project for the application:

// Opt-in to using UIWebView instead of WkWebView.
[assembly: ExportRenderer(typeof(:::no-loc(Xamarin.Forms):::.WebView), typeof(:::no-loc(Xamarin.Forms):::.Platform.iOS.WebViewRenderer))]

WebView Android의 경우 기본적으로 기본 제공 브라우저 만큼 빠르게 제공 됩니다.WebView on Android by default is about as fast as the built-in browser.

UWP 웹 보기 에서는 Microsoft Edge 렌더링 엔진을 사용 합니다.The UWP WebView uses the Microsoft Edge rendering engine. 데스크톱 및 태블릿 장치에는 Edge 브라우저 자체를 사용 하는 것과 동일한 성능이 표시 되어야 합니다.Desktop and tablet devices should see the same performance as using the Edge browser itself.

사용 권한Permissions

WebView 작동 하려면 각 플랫폼에 대 한 사용 권한이 설정 되어 있는지 확인 해야 합니다.In order for WebView to work, you must make sure that permissions are set for each platform. 일부 플랫폼에서는 WebView 디버그 모드에서 작동 하지만 릴리스를 위해 빌드할 때는 작동 하지 않습니다.Note that on some platforms, WebView will work in debug mode, but not when built for release. Android에서 인터넷에 액세스 하는 것과 같은 일부 사용 권한은 기본적으로 디버그 모드에서 Mac용 Visual Studio 하 여 설정 되기 때문입니다.That is because some permissions, like those for internet access on Android, are set by default by Visual Studio for Mac when in debug mode.

  • UWP – 네트워크 콘텐츠를 표시 하는 경우 인터넷 (클라이언트 & 서버) 기능이 필요 합니다.UWP – requires the Internet (Client & Server) capability when displaying network content.
  • AndroidINTERNET 네트워크에서 콘텐츠를 표시 하는 경우에만 필요 합니다.Android – requires INTERNET only when displaying content from the network. 로컬 콘텐츠에는 특별 한 권한이 필요 하지 않습니다.Local content requires no special permissions.
  • iOS – 특별 한 권한이 필요 하지 않습니다.iOS – requires no special permissions.

LayoutLayout

대부분의 다른 :::no-loc(Xamarin.Forms)::: 뷰와 달리에서는 WebView HeightRequest WidthRequest stacklayout 또는 RelativeLayout에 포함 된 경우 및가 지정 되어야 합니다.Unlike most other :::no-loc(Xamarin.Forms)::: views, WebView requires that HeightRequest and WidthRequest are specified when contained in StackLayout or RelativeLayout. 이러한 속성을 지정 하지 않으면 WebView 가 렌더링 되지 않습니다.If you fail to specify those properties, the WebView will not render.

다음 예제에서는 렌더링을 수행 하는 레이아웃을 보여 줍니다 WebView .The following examples demonstrate layouts that result in working, rendering WebViews:

HeightRequest가 있는 StackLayout &:StackLayout with WidthRequest & HeightRequest:

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

RelativeLayout가 Wrequest & HeightRequest로:RelativeLayout with 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 HeightRequest & wrequest를 사용 하지 않습니다 .AbsoluteLayout without 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>

HeightRequest를 & 하는 wrequest가 없는 그리드.Grid without WidthRequest & HeightRequest. 그리드는 요청 된 높이 및 너비를 지정 하지 않아도 되는 몇 가지 레이아웃 중 하나입니다.Grid is one of the few layouts that does not require specifying requested heights and widths.:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Label Text="test" Grid.Row="0" />
    <WebView Source="http://www.xamarin.com/" Grid.Row="1" />
</Grid>

JavaScript 호출Invoking JavaScript

WebView c #에서 JavaScript 함수를 호출 하 고 모든 결과를 호출 하는 c # 코드에 반환 하는 기능을 포함 합니다.WebView includes the ability to invoke a JavaScript function from C#, and return any result to the calling C# code. WebView.EvaluateJavaScriptAsync 작업은 웹 보기 샘플의 다음 예제에 표시 된 메서드를 사용 하 여 수행 됩니다.This is accomplished with the WebView.EvaluateJavaScriptAsync method, which is shown in the following example from the WebView sample:

var numberEntry = new Entry { Text = "5" };
var resultLabel = new Label();
var webView = new WebView();
...

int number = int.Parse(numberEntry.Text);
string result = await webView.EvaluateJavaScriptAsync($"factorial({number})");
resultLabel.Text = $"Factorial of {number} is {result}.";

WebView.EvaluateJavaScriptAsync메서드는 인수로 지정 된 JavaScript를 평가 하 고 모든 결과를로 반환 합니다 string .The WebView.EvaluateJavaScriptAsync method evaluates the JavaScript that's specified as the argument, and returns any result as a string. 이 예제에서는 factorial 의 계승을 반환 하는 JavaScript 함수가 호출 됩니다 number .In this example, the factorial JavaScript function is invoked, which returns the factorial of number as a result. 이 JavaScript 함수는가 로드 하는 로컬 HTML 파일에 정의 되어 WebView 있으며 다음 예제에 나와 있습니다.This JavaScript function is defined in the local HTML file that the WebView loads, and is shown in the following example:

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

쿠키Cookies

에 대해 쿠키를 설정할 수 있습니다. 그러면이 쿠키는 WebView 웹 요청과 함께 지정 된 URL에 전송 됩니다.Cookies can be set on a WebView, which are then sent with the web request to the specified URL. 이렇게 하려면 개체를에 추가 하 여이를 수행 Cookie CookieContainer 합니다. 그러면이 개체는 바인딩 가능한 속성의 값으로 설정 됩니다 WebView.Cookies .This is accomplished by adding Cookie objects to a CookieContainer, which is then set as the value of the WebView.Cookies bindable property. 다음 코드에서 그 예를 볼 수 있습니다.The following code shows an example of this:

using System.Net;
using :::no-loc(Xamarin.Forms):::;
// ...

CookieContainer cookieContainer = new CookieContainer();
Uri uri = new Uri("https://dotnet.microsoft.com/apps/xamarin", UriKind.RelativeOrAbsolute);

Cookie cookie = new Cookie
{
    Name = "XamarinCookie",
    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() };

이 예제에서는 Cookie 개체에 단일가 추가 되 CookieContainer 고,이 개체는 속성의 값으로 설정 됩니다 WebView.Cookies .In this example, a single Cookie is added to the CookieContainer object, which is then set as the value of the WebView.Cookies property. 에서 WebView 지정 된 URL로 웹 요청을 보내는 경우 쿠키는 요청과 함께 전송 됩니다.When the WebView sends a web request to the specified URL, the cookie is sent with the request.

UIWebView 보기 사용 중단 및 앱 스토어 거부 (ITMS-90809)UIWebView Deprecation and App Store Rejection (ITMS-90809)

4 월 2020부터 Apple은 아직 사용 되지 않는 API를 사용 하는 앱을 거부 UIWebView 합니다.Starting in April 2020, Apple will reject apps that still use the deprecated UIWebView API. :::no-loc(Xamarin.Forms):::가 기본값으로 전환 되었지만 WKWebView 이진 파일에는 여전히 이전 SDK에 대 한 참조가 있습니다 :::no-loc(Xamarin.Forms)::: .While :::no-loc(Xamarin.Forms)::: has switched to WKWebView as the default, there is still a reference to the older SDK in the :::no-loc(Xamarin.Forms)::: binaries. 현재 iOS 링커 동작은이를 제거 하지 않습니다 UIWebView . 따라서 앱 스토어에 제출할 때 사용 되지 않는 API가 여전히 앱에서 참조 되는 것으로 나타납니다.Current iOS linker behavior does not remove this, and as a result the deprecated UIWebView API will still appear to be referenced from your app when you submit to the App Store.

이 문제를 해결 하기 위해 링커의 미리 보기 버전을 사용할 수 있습니다.A preview version of the linker is available to fix this issue. 미리 보기를 사용 하도록 설정 하려면 링커에 추가 인수를 제공 해야 --optimize=experimental-xforms-product-type 합니다.To enable the preview, you will need to supply an additional argument --optimize=experimental-xforms-product-type to the linker.

이 작업을 수행 하기 위한 필수 구성 요소는 다음과 같습니다.The prerequisites for this to work are:

  • :::no-loc(Xamarin.Forms)::: 4.5 이상.:::no-loc(Xamarin.Forms)::: 4.5 or higher. :::no-loc(Xamarin.Forms)::: 앱에서 재질 시각적 개체를 사용 하는 경우 4.6 이상이 필요 합니다.:::no-loc(Xamarin.Forms)::: 4.6, or higher, is required if your app uses Material Visual.
  • Xamarin.ios 13.10.0.17 이상Xamarin.iOS 13.10.0.17 or higher. Visual Studio에서xamarin.ios 버전을 확인 합니다.Check your Xamarin.iOS version in Visual Studio. 이 버전의 Xamarin.ios는 Mac용 Visual Studio 8.4.1 및 Visual Studio 16.4.3에 포함 되어 있습니다.This version of Xamarin.iOS is included with Visual Studio for Mac 8.4.1 and Visual Studio 16.4.3.
  • 에 대 한 UIWebView 참조를 제거 합니다.Remove references to UIWebView. 코드에를 UIWebView 사용 하는 또는 클래스에 대 한 참조가 없어야 합니다 UIWebView .Your code should not have any references to UIWebView or any classes that make use of UIWebView.

참조를 검색 하 고 제거 하는 방법에 대 한 자세한 내용은 UIWebView uiwebview 보기사용 중단을 참조 하세요.For more information about detecting and removing UIWebView references, see UIWebView deprecation.

링커 구성Configure the linker

링커가 참조를 제거 하려면 다음 단계를 수행 합니다 UIWebView .Follow these steps for the linker to remove UIWebView references:

  1. IOS 프로젝트 속성 열기 – IOS 프로젝트를 마우스 오른쪽 단추로 클릭 하 고 속성 을 선택 합니다.Open iOS project properties – Right-click your iOS project and choose Properties.
  2. IOS 빌드 섹션 – 으로 이동 합니다. IOS 빌드 섹션을 선택 합니다.Navigate to the iOS Build section – Select the iOS Build section.
  3. 추가 mtouch 인수 – 를 업데이트 합니다. 추가 mtouch 인수 에서이 플래그를 추가 --optimize=experimental-xforms-product-type 합니다 (이미 여기에 있을 수 있는 값 외에).Update the Additional mtouch arguments – In the Additional mtouch arguments add this flag --optimize=experimental-xforms-product-type (in addition to any value that might already be in there). 참고:이 플래그는 SDK로만 설정 된 링커 동작과 함께 작동 하거나 모두 연결 합니다.Note: this flag works together with the Linker Behavior set to SDK Only or Link All. 어떤 이유로 든 링커 동작을 모두로 설정할 때 오류가 표시 되는 경우이는 응용 프로그램 코드 또는 링커 안전 하지 않은 타사 라이브러리에서 문제가 될 가능성이 높습니다.If, for any reason, you see errors when setting the Linker Behavior to All, this is most likely a problem within the app code or a third-party library that is not linker safe. 링커에 대 한 자세한 내용은 Xamarin.ios 앱 연결을 참조 하세요.For more information on the linker, see Linking Xamarin.iOS Apps.
  4. 모든 빌드 구성 업데이트 – 창 맨 위에 있는 구성플랫폼 목록을 사용 하 여 모든 빌드 구성을 업데이트할 수 있습니다.Update all build configurations – Use the Configuration and Platform lists at the top of the window to update all build configurations. 업데이트 하는 가장 중요 한 구성은 릴리스/iPhone 구성으로, 일반적으로 앱 스토어 전송용 빌드를 만드는 데 사용 되기 때문입니다.The most important configuration to update is the Release/iPhone configuration, since that is typically used to create builds for App Store submission.

이 스크린샷에는 새 플래그가 설정 된 창이 표시 됩니다.You can see the window with the new flag in place in this screenshot:

IOS 빌드 섹션에서 플래그 설정Setting the flag in the iOS Build section

이제 새 (릴리스) 빌드를 만들고 앱 스토어에 제출할 때 사용 되지 않는 API에 대 한 경고가 표시 되지 않습니다.Now when you create a new (release) build and submit it to the App Store, there should be no warnings about the deprecated API.