Bir WebView’u Özelleştirme

A Xamarin.FormsWebView , uygulamanızda web ve HTML içeriği görüntüleyen bir görünümdür. Bu makalede, C# kodunun JavaScript'ten çağrılmasına izin vermek için öğesini WebView genişleten bir özel işleyicinin nasıl oluşturulacağı açıklanır.

Her Xamarin.Forms görünümde, yerel denetimin bir örneğini oluşturan her platform için eşlik eden bir işleyici vardır. iOS'ta WebView bir Xamarin.Forms uygulama tarafından işlendiğinde, WkWebViewRenderer sınıfın örneği oluşturulur ve bu da yerel WkWebView denetim örneği oluşturur. Android platformunda WebViewRenderer , sınıfı yerel WebView bir denetim örneği oluşturur. Evrensel Windows Platformu (UWP) sınıfı WebViewRenderer yerel WebView bir denetim örneği oluşturur. Eşlenmeyi denetleen Xamarin.Forms işleyici ve yerel denetim sınıfları hakkında daha fazla bilgi için bkz . oluşturucu Temel Sınıfları ve Yerel Denetimler.

Aşağıdaki diyagramda, bunu uygulayan ve buna karşılık gelen yerel denetimler arasındaki View ilişki gösterilmektedir:

WebView Sınıfı ile Yerel Sınıfları Uygulama Arasındaki İlişki

İşleme işlemi, her platformda bir için özel işleyici oluşturarak platform özelleştirmelerini uygulamak için WebView kullanılabilir. Bunu yapma işlemi aşağıdaki gibidir:

HybridWebView Özel denetimi oluşturun.
'den Xamarin.Formsöğesini tüketin. HybridWebView
Her platformda için HybridWebView özel işleyici oluşturun.

Her öğe artık C# kodunun JavaScript'ten çağrılmasına izin verecek şekilde geliştiren Xamarin.FormsWebView bir HybridWebView işleyici uygulamak için ele alınacaktır. Örnek HybridWebView , kullanıcıdan adını girmesini isteyen bir HTML sayfası görüntülemek için kullanılır. Ardından, kullanıcı bir HTML düğmesine tıkladığında, bir JavaScript işlevi kullanıcı adını içeren bir açılır pencere görüntüleyen bir C# Action çağırır.

JavaScript'ten C# çağırma işlemi hakkında daha fazla bilgi için bkz . JavaScript'ten C# çağırma. HTML sayfası hakkında daha fazla bilgi için bkz . Web Sayfası Oluşturma.

Not

A WebView , C# dilinden bir JavaScript işlevi çağırabilir ve C# kodunu çağıran herhangi bir sonucu döndürebilir. Daha fazla bilgi için bkz . JavaScript çağırma.

HybridWebView oluşturma

Özel HybridWebView denetim, sınıfı alt sınıflanarak WebView oluşturulabilir:

public class HybridWebView : WebView
{
    Action<string> action;

    public static readonly BindableProperty UriProperty = BindableProperty.Create(
        propertyName: "Uri",
        returnType: typeof(string),
        declaringType: typeof(HybridWebView),
        defaultValue: default(string));

    public string Uri
    {
        get { return (string)GetValue(UriProperty); }
        set { SetValue(UriProperty, value); }
    }

    public void RegisterAction(Action<string> callback)
    {
        action = callback;
    }

    public void Cleanup()
    {
        action = null;
    }

    public void InvokeAction(string data)
    {
        if (action == null || data == null)
        {
            return;
        }
        action.Invoke(data);
    }
}

Özel HybridWebView denetim .NET Standard kitaplık projesinde oluşturulur ve denetim için aşağıdaki API'yi tanımlar:

Uri Yüklenecek web sayfasının adresini belirten özellik.
RegisterAction denetimine bir kaydeden bir Action yöntem. Kayıtlı eylem, özelliği aracılığıyla başvurulan HTML dosyasında bulunan JavaScript'ten çağrılır Uri .
CleanUp Kayıtlı Actionöğesine başvuruyu kaldıran bir yöntem.
InvokeAction Kayıtlı Actionöğesini çağıran bir yöntem. Bu yöntem, her platform projesindeki özel işleyiciden çağrılır.

HybridWebView'ı kullanma

Özel HybridWebView denetime, konumu için bir ad alanı bildirilerek ve özel denetimde ad alanı ön eki kullanılarak .NET Standart kitaplık projesindeki XAML'de başvurulabilir. Aşağıdaki kod örneği, özel denetimin HybridWebView bir XAML sayfası tarafından nasıl tüketilebileceğini gösterir:

<ContentPage ...
             xmlns:local="clr-namespace:CustomRenderer;assembly=CustomRenderer"
             x:Class="CustomRenderer.HybridWebViewPage"
             Padding="0,40,0,0">
    <local:HybridWebView x:Name="hybridWebView"
                         Uri="index.html" />
</ContentPage>

Ad local alanı ön eki herhangi bir adla adlandırılabilir. Ancak ve clr-namespace assembly değerleri özel denetimin ayrıntılarıyla eşleşmelidir. Ad alanı bildirildikten sonra, özel denetime başvurmak için ön ek kullanılır.

Aşağıdaki kod örneği, özel denetimin HybridWebView bir C# sayfası tarafından nasıl kullanılıp kullanılamayabileceğini gösterir:

public HybridWebViewPageCS()
{
    var hybridWebView = new HybridWebView
    {
        Uri = "index.html"
    };
    // ...
    Padding = new Thickness(0, 40, 0, 0);
    Content = hybridWebView;
}

Örnek HybridWebView , her platformda yerel bir web denetimi görüntülemek için kullanılır. Özelliği Uri , her platform projesinde depolanan ve yerel web denetimi tarafından görüntülenecek bir HTML dosyasına ayarlanır. İşlenen HTML, kullanıcıdan adını girmesini ister ve bir JavaScript işlevi html düğmesine tıklamaya yanıt olarak C# Action çağrılır.

, HybridWebViewPage aşağıdaki kod örneğinde gösterildiği gibi JavaScript'ten çağrılacak eylemi kaydeder:

public partial class HybridWebViewPage : ContentPage
{
    public HybridWebViewPage()
    {
        // ...
        hybridWebView.RegisterAction(data => DisplayAlert("Alert", "Hello " + data, "OK"));
    }
}

Bu eylem, örnek tarafından HybridWebView görüntülenen HTML sayfasına girilen adı gösteren kalıcı bir açılır pencere görüntülemek için yöntemini çağırırDisplayAlert.

JavaScript'ten C# kodunun çağrılmasına izin vererek platform web denetimlerini geliştirmek için artık her uygulama projesine özel işleyici eklenebilir.

Her platformda özel işleyici oluşturma

Özel işleyici sınıfını oluşturma işlemi aşağıdaki gibidir:

iOS'ta sınıfının bir alt sınıfını WkWebViewRenderer ve WebViewRenderer özel denetimi işleyen Android ve UWP'de sınıfını oluşturun.
özelleştirmek OnElementChanged için ve yazma mantığını işleyen WebView yöntemini geçersiz kılın. Bu yöntem, bir HybridWebView nesne oluşturulduğunda çağrılır.
Özel işleyici sınıfına veya AssemblyInfo.cs özel denetimi işlemek Xamarin.Forms için kullanılacağını belirtmek için bir ExportRenderer öznitelik ekleyin. Bu öznitelik, özel işleyiciyi ile Xamarin.Formskaydetmek için kullanılır.

Not

Çoğu Xamarin.Forms öğe için, her platform projesinde özel işleyici sağlamak isteğe bağlıdır. Özel işleyici kaydedilmemişse, denetimin temel sınıfı için varsayılan işleyici kullanılır. Ancak, bir View öğesi işlenirken her platform projesinde özel işleyiciler gereklidir.

Aşağıdaki diyagramda, örnek uygulamadaki her projenin sorumlulukları ve aralarındaki ilişkiler gösterilmektedir:

HybridWebView Özel oluşturucu Proje Sorumlulukları

Özel HybridWebView denetim, iOS'ta sınıfından WkWebViewRenderer ve Android ve UWP'de sınıfından WebViewRenderer türetilen platform işleyici sınıfları tarafından işlenir. Bu, aşağıdaki ekran görüntülerinde gösterildiği gibi her HybridWebView özel denetimin yerel web denetimleriyle işlenmesine neden olur:

Her Platformda HybridWebView

WkWebViewRenderer ve WebViewRenderer sınıfları, ilgili yerel web denetimini işlemek için özel denetim oluşturulduğunda çağrılan Xamarin.Forms yöntemini kullanıma sunarOnElementChanged. Bu yöntem ve NewElement özelliklerini içeren OldElement bir VisualElementChangedEventArgs parametre alır. Bu özellikler, işleyicinin eklendiği öğeyi ve Xamarin.Forms sırasıyla işleyicinin eklendiği öğeyi temsil Xamarin.Forms edilir. Örnek uygulamada OldElement özelliği olur null ve NewElement özelliği örneğe bir başvuru HybridWebView içerir.

Her platform işleyici sınıfında yönteminin OnElementChanged geçersiz kılınmış bir sürümü, yerel web denetimi özelleştirmesinin gerçekleştirebileceğiniz yerdir. İşlenmekte olan denetime Xamarin.Forms bir başvuru özelliği aracılığıyla Element alınabilir.

Her özel işleyici sınıfı, işleyiciyi ile kaydeden bir ExportRenderer öznitelikle Xamarin.Formsdekore edilmiştir. özniteliği iki parametre alır: işlenen özel denetimin Xamarin.Forms tür adı ve özel işleyicinin tür adı. assembly özniteliğinin ön eki, özniteliğin tüm derleme için geçerli olduğunu belirtir.

Aşağıdaki bölümlerde, her yerel web denetimi tarafından yüklenen web sayfasının yapısı, JavaScript'ten C# çağırma işlemi ve bunun her platform özel işleyici sınıfında uygulanması ele alınıyor.

Web sayfasını oluşturma

Aşağıdaki kod örneği, özel denetim tarafından HybridWebView görüntülenecek web sayfasını gösterir:

<html>
<body>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <h1>HybridWebView Test</h1>
    <br />
    Enter name: <input type="text" id="name">
    <br />
    <br />
    <button type="button" onclick="javascript: invokeCSCode($('#name').val());">Invoke C# Code</button>
    <br />
    <p id="result">Result:</p>
    <script type="text/javascript">function log(str) {
            $('#result').text($('#result').text() + " " + str);
        }

        function invokeCSCode(data) {
            try {
                log("Sending Data:" + data);
                invokeCSharpAction(data);
            }
            catch (err) {
                log(err);
            }
        }</script>
</body>
</html>

Web sayfası, kullanıcının bir öğeye adını input girmesini sağlar ve tıklandığında C# kodunu çağıracak bir button öğe sağlar. Bunu başarma süreci aşağıdaki gibidir:

Kullanıcı öğeye button tıkladığında JavaScript invokeCSCode işlevi çağrılır ve öğenin değeri input işleve geçirilir.
işleviinvokeCSCode, C# Actionöğesine gönderdiği verileri görüntülemek için işlevini çağırırlog. Ardından öğesinden input alınan parametreyi invokeCSharpAction geçirerek C# Actionçağırmak için yöntemini çağırır.

invokeCSharpAction JavaScript işlevi web sayfasında tanımlanmaz ve her özel işleyici tarafından bu işleve eklenir.

iOS'ta bu HTML dosyası, BundleResource derleme eylemiyle platform projesinin İçerik klasöründe bulunur. Android'de bu HTML dosyası, AndroidAsset derleme eylemiyle birlikte platform projesinin Varlıklar/İçerik klasöründe bulunur.

JavaScript'ten C# çağırma

JavaScript'ten C# çağırma işlemi her platformda aynıdır:

Özel işleyici yerel bir web denetimi oluşturur ve özelliği tarafından HybridWebView.Uri belirtilen HTML dosyasını yükler.
Web sayfası yüklendikten sonra, özel işleyici JavaScript işlevini web sayfasına ekler invokeCSharpAction .
Kullanıcı adını girip HTML button öğesine tıkladığında işlev invokeCSCode çağrılır ve işlev çağrılır invokeCSharpAction .
invokeCSharpAction işlevi, özel işleyicide bir yöntem çağırır ve bu yöntem de yöntemini çağırırHybridWebView.InvokeAction.
HybridWebView.InvokeAction yöntemi kayıtlı Actionöğesini çağırır.

Aşağıdaki bölümlerde bu işlemin her platformda nasıl uygulandığı açıklanacaktır.

iOS'ta özel işleyici oluşturma

Aşağıdaki kod örneği, iOS platformu için özel işleyiciyi gösterir:

[assembly: ExportRenderer(typeof(HybridWebView), typeof(HybridWebViewRenderer))]
namespace CustomRenderer.iOS
{
    public class HybridWebViewRenderer : WkWebViewRenderer, IWKScriptMessageHandler
    {
        const string JavaScriptFunction = "function invokeCSharpAction(data){window.webkit.messageHandlers.invokeAction.postMessage(data);}";
        WKUserContentController userController;

        public HybridWebViewRenderer() : this(new WKWebViewConfiguration())
        {
        }

        public HybridWebViewRenderer(WKWebViewConfiguration config) : base(config)
        {
            userController = config.UserContentController;
            var script = new WKUserScript(new NSString(JavaScriptFunction), WKUserScriptInjectionTime.AtDocumentEnd, false);
            userController.AddUserScript(script);
            userController.AddScriptMessageHandler(this, "invokeAction");
        }

        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if (e.OldElement != null)
            {
                userController.RemoveAllUserScripts();
                userController.RemoveScriptMessageHandler("invokeAction");
                HybridWebView hybridWebView = e.OldElement as HybridWebView;
                hybridWebView.Cleanup();
            }

            if (e.NewElement != null)
            {
                string filename = Path.Combine(NSBundle.MainBundle.BundlePath, $"Content/{((HybridWebView)Element).Uri}");
                LoadRequest(new NSUrlRequest(new NSUrl(filename, false)));
            }
        }

        public void DidReceiveScriptMessage(WKUserContentController userContentController, WKScriptMessage message)
        {
            ((HybridWebView)Element).InvokeAction(message.Body.ToString());
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                ((HybridWebView)Element).Cleanup();
            }
            base.Dispose(disposing);
        }        
    }
}

sınıfı özelliğinde HybridWebViewRenderer HybridWebView.Uri belirtilen web sayfasını yerel WKWebView denetime yükler ve invokeCSharpAction JavaScript işlevi web sayfasına eklenir. Kullanıcı adını girip HTML button öğesine tıkladıktan sonra JavaScript invokeCSharpAction işlevi yürütülür ve web sayfasından DidReceiveScriptMessage bir ileti alındıktan sonra yöntemi çağrılır. Buna karşılık bu yöntem, açılır pencere görüntülemek için kayıtlı eylemi çağıran yöntemini çağırır HybridWebView.InvokeAction .

Bu işlev aşağıdaki gibi elde edilir:

oluşturucu bir WkWebViewConfiguration nesne oluşturur ve nesnesini WKUserContentController alır. WkUserContentController nesnesi ileti göndermeye ve bir web sayfasına kullanıcı betikleri eklemeye olanak tanır.
oluşturucu, web sayfası yüklendikten sonra JavaScript işlevini web sayfasına ekleyen invokeCSharpAction bir WKUserScript nesne oluşturur.
oluşturucu, nesnesini içerik denetleyicisine eklemek WKUserScript için yöntemini çağırırWKUserContentController.AddUserScript.
oluşturucu, nesnesine adlı invokeAction bir betik ileti işleyicisi eklemek için WKUserContentController yöntemini çağırır WKUserContentController.AddScriptMessageHandler ve bu da JavaScript işlevinin window.webkit.messageHandlers.invokeAction.postMessage(data) nesneyi kullanan tüm örneklerdeki tüm WebView çerçevelerde tanımlanmasına WKUserContentController neden olur.
Özel işleyicinin yeni Xamarin.Forms bir öğeye eklenmesi koşuluyla:
- yöntemi özelliği WKWebView.LoadRequest tarafından HybridWebView.Uri belirtilen HTML dosyasını yükler. Kod, dosyanın projenin klasöründe depolandığını Content belirtir. Web sayfası görüntülendiğinde JavaScript invokeCSharpAction işlevi web sayfasına eklenir.
İşleyici öğe değişikliklere eklendiğinde kaynaklar serbest bırakılır.
oluşturucu Xamarin.Forms atıldığında öğesi temizlenir.

Not

WKWebView sınıfı yalnızca iOS 8 ve sonraki sürümlerde desteklenir.

Ayrıca, Info.plist dosyasının aşağıdaki değerleri içerecek şekilde güncelleştirilmiş olması gerekir:

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

Android'de özel işleyici oluşturma

Aşağıdaki kod örneği, Android platformu için özel işleyiciyi gösterir:

[assembly: ExportRenderer(typeof(HybridWebView), typeof(HybridWebViewRenderer))]
namespace CustomRenderer.Droid
{
    public class HybridWebViewRenderer : WebViewRenderer
    {
        const string JavascriptFunction = "function invokeCSharpAction(data){jsBridge.invokeAction(data);}";
        Context _context;

        public HybridWebViewRenderer(Context context) : base(context)
        {
            _context = context;
        }

        protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
        {
            base.OnElementChanged(e);

            if (e.OldElement != null)
            {
                Control.RemoveJavascriptInterface("jsBridge");
                ((HybridWebView)Element).Cleanup();
            }
            if (e.NewElement != null)
            {
                Control.SetWebViewClient(new JavascriptWebViewClient(this, $"javascript: {JavascriptFunction}"));
                Control.AddJavascriptInterface(new JSBridge(this), "jsBridge");
                Control.LoadUrl($"file:///android_asset/Content/{((HybridWebView)Element).Uri}");
            }
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                ((HybridWebView)Element).Cleanup();
            }
            base.Dispose(disposing);
        }        
    }
}

sınıfı HybridWebViewRenderer , özelliğinde HybridWebView.Uri belirtilen web sayfasını yerel WebView bir denetime yükler ve invokeCSharpAction Web sayfasının yüklenmesi OnPageFinished tamamlandıktan sonra JavaScript işlevi web sayfasına eklenir ve geçersiz kılma sınıfına JavascriptWebViewClient eklenir:

public class JavascriptWebViewClient : FormsWebViewClient
{
    string _javascript;

    public JavascriptWebViewClient(HybridWebViewRenderer renderer, string javascript) : base(renderer)
    {
        _javascript = javascript;
    }

    public override void OnPageFinished(WebView view, string url)
    {
        base.OnPageFinished(view, url);
        view.EvaluateJavascript(_javascript, null);
    }
}

Kullanıcı adını girip HTML button öğesine invokeCSharpAction tıkladıktan sonra JavaScript işlevi yürütülür. Bu işlev aşağıdaki gibi elde edilir:

Özel işleyicinin yeni Xamarin.Forms bir öğeye eklenmesi koşuluyla:
- yöntemi, SetWebViewClient uygulaması WebViewClientolarak yeni JavascriptWebViewClient bir nesne ayarlar.
- yöntemi, WebView.AddJavascriptInterface WebView'un JavaScript bağlamının ana çerçevesine yeni JSBridge bir örnek ekler ve adını verir jsBridge. Bu, sınıfındaki JSBridge yöntemlere JavaScript'ten erişilmesine olanak tanır.
- yöntemi özelliği WebView.LoadUrl tarafından HybridWebView.Uri belirtilen HTML dosyasını yükler. Kod, dosyanın projenin klasöründe depolandığını Content belirtir.
- JavascriptWebViewClient sınıfında, invokeCSharpAction sayfa yüklemeyi bitirdikten sonra JavaScript işlevi web sayfasına eklenir.
İşleyici öğe değişikliklere eklendiğinde kaynaklar serbest bırakılır.
oluşturucu Xamarin.Forms atıldığında öğesi temizlenir.

invokeCSharpAction JavaScript işlevi yürütürken, aşağıdaki kod örneğinde gösterilen yöntemini çağırırJSBridge.InvokeAction:

public class JSBridge : Java.Lang.Object
{
    readonly WeakReference<HybridWebViewRenderer> hybridWebViewRenderer;

    public JSBridge(HybridWebViewRenderer hybridRenderer)
    {
        hybridWebViewRenderer = new WeakReference<HybridWebViewRenderer>(hybridRenderer);
    }

    [JavascriptInterface]
    [Export("invokeAction")]
    public void InvokeAction(string data)
    {
        HybridWebViewRenderer hybridRenderer;

        if (hybridWebViewRenderer != null && hybridWebViewRenderer.TryGetTarget(out hybridRenderer))
        {
            ((HybridWebView)hybridRenderer.Element).InvokeAction(data);
        }
    }
}

sınıfı öğesinden Java.Lang.Objecttüretilmelidir ve JavaScript'e sunulan yöntemler ve [Export] öznitelikleriyle [JavascriptInterface] donatılmalıdır. Bu nedenle, invokeCSharpAction JavaScript işlevi web sayfasına eklenir ve yürütülürken ve [Export("invokeAction")] öznitelikleriyle [JavascriptInterface] donatılması nedeniyle yöntemini çağırırJSBridge.InvokeAction. Buna karşılık yöntemi, InvokeAction açılır pencere görüntülemek için kayıtlı eylemi çağıran yöntemini çağırır HybridWebView.InvokeAction .

Önemli

özniteliğini [Export] kullanan Android projeleri için Mono.Android.Exportbir başvuru içermelidir, aksi takdirde bir derleyici hatası oluşur.

sınıfının sınıfı için JSBridge HybridWebViewRenderer bir WeakReference bulundurduğunu unutmayın. Bu, iki sınıf arasında döngüsel başvuru oluşturmaktan kaçınmaktır. Daha fazla bilgi için bkz. Zayıf Başvurular.

UWP'de özel işleyici oluşturma

Aşağıdaki kod örneği, UWP için özel işleyiciyi gösterir:

[assembly: ExportRenderer(typeof(HybridWebView), typeof(HybridWebViewRenderer))]
namespace CustomRenderer.UWP
{
    public class HybridWebViewRenderer : WebViewRenderer
    {
        const string JavaScriptFunction = "function invokeCSharpAction(data){window.external.notify(data);}";

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.WebView> e)
        {
            base.OnElementChanged(e);

            if (e.OldElement != null)
            {
                Control.NavigationCompleted -= OnWebViewNavigationCompleted;
                Control.ScriptNotify -= OnWebViewScriptNotify;
            }
            if (e.NewElement != null)
            {
                Control.NavigationCompleted += OnWebViewNavigationCompleted;
                Control.ScriptNotify += OnWebViewScriptNotify;
                Control.Source = new Uri($"ms-appx-web:///Content//{((HybridWebView)Element).Uri}");
            }
        }

        async void OnWebViewNavigationCompleted(Windows.UI.Xaml.Controls.WebView sender, WebViewNavigationCompletedEventArgs args)
        {
            if (args.IsSuccess)
            {
                // Inject JS script
                await Control.InvokeScriptAsync("eval", new[] { JavaScriptFunction });
            }
        }

        void OnWebViewScriptNotify(object sender, NotifyEventArgs e)
        {
            ((HybridWebView)Element).InvokeAction(e.Value);
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                ((HybridWebView)Element).Cleanup();
            }
            base.Dispose(disposing);
        }        
    }
}

HybridWebViewRenderer sınıfı özelliğinde HybridWebView.Uri belirtilen web sayfasını yerel WebView denetime yükler ve invokeCSharpAction JavaScript işlevi web sayfası yüklendikten sonra web sayfasına yöntemiyle eklenirWebView.InvokeScriptAsync. Kullanıcı adını girip HTML button öğesine tıkladıktan sonra JavaScript invokeCSharpAction işlevi yürütülür OnWebViewScriptNotify ve yöntemi web sayfasından bir bildirim alındıktan sonra çağrılır. Buna karşılık bu yöntem, açılır pencere görüntülemek için kayıtlı eylemi çağıran yöntemini çağırır HybridWebView.InvokeAction .