Xamarin.Forms：具有 CSS 转换和 JS 滑动的页面在 Android WebView 自定义渲染器中不起作用，而在 Chrome 中起作用

Question

可能是什么原因导致 HTML 页面通过 HTTPS 加载 CSS 转换和 JavaScript 使用“刷卡”在 Xamarin.Forms Android WebView 自定义渲染器？

该页面在以下环境下运行良好：Chrome Android、Xamarin.Android WebView、Xamarin.Forms WebView。

仅当在 Android according to the official tutorial 上使用 WebView 自定义渲染器时，页面才会停止工作。

具体来说，像这样的页面由于某种原因无法正常工作：https://www.irozhlas.cz/fotogalerie/7693434?fid=8301190

发现另一种类型的页面无法在 Android WebView 自定义渲染器中正确显示：https://www.irozhlas.cz/ekonomika/kalkulacka-socialni-davky-exekuce_1811280900_jab – 这让我相信这是一个 CSS 问题，而不是 JS一.

我知道这是一个相当狭窄的范围，但我相信其他人一定运行遇到过类似的问题。

我试过了：

日志中似乎没有出现相关的错误或警告。
Chrome 上的远程调试：没有任何警告或迹象表明它为什么不起作用。我无法在页面的 JS 或 CSS.
正在更新 Xamarin.Forms 包。
将 HttpClient 实现设置为 Android (AndroidClientHandler)。

以下是从其他 Stack Overflow 答案和其他地方收集的，但没有什么区别：

webView.Settings.SetAppCacheEnabled(true);
webView.Settings.DomStorageEnabled = true;
webView.Settings.DatabaseEnabled = true;
webView.Settings.LoadWithOverviewMode = true;
webView.Settings.AllowFileAccess = true;
webView.Settings.AllowContentAccess = true;

webView.Settings.UseWideViewPort = true;
webView.Settings.BuiltInZoomControls = true;
webView.Settings.DisplayZoomControls = false;
webView.Settings.SetSupportZoom(true);
webView.Settings.DefaultTextEncodingName = "utf-8";

webView.SetWebViewClient(new WebViewClient());
webView.SetWebChromeClient(new WebChromeClient());

将 Xamarin.Forms 与 WebView 的自定义渲染器一起使用应该等同于使用 Xamarin.Android，但经过进一步调查，带有 WebView 的 Xamarin.Android 项目可以正常工作页面，默认的 Xamarin.Forms WebView 也是如此，因此这似乎是 Xamarin.Forms WebView 自定义渲染器特定的问题。

Answer 1

我找到的一个解决方案是在 Android 的自定义页面呈现器中创建 Android WebView。在此示例中，带有 WebView 的页面称为 MyPage.

在其他平台上，您可以将常规 MyPage Xamarin.Forms.Page 与 Xamarin.Forms.WebView 或 WebView 自定义呈现器一起使用。如问题中所述，在 Android 上，WebView 的自定义呈现器在某些类型的页面上存在问题。

using Android.Content;
using Xamarin.Forms.Platform.Android;
using Android.Webkit;
using Android.Widget;

[assembly: Xamarin.Forms.ExportRenderer(typeof(MyPage), typeof(MyPageRenderer))]
namespace MyXamarinApp.Droid
{
    public class MyPageRenderer : PageRenderer
    {
        WebView webView;

        public MyPageRenderer(Context context) : base(context)
        {
        }

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

            if (e.OldElement != null || Element == null)
            {
                return;
            }

            webView = new WebView(this.Context);

            // If you're using AXML to “inflate” the layout, you would use something like this instead:
            //webView = FindViewById<WebView>(Resource.Id.webview);

            // Important: LayoutParameters don't do anything for the layout (because the parent Xamarin.Forms page is a FrameLayout and doesn't do any automatic layout), but leaving this out is what causes the problems
            webView.LayoutParameters = new LinearLayout.LayoutParams(LayoutParams.FillParent, LayoutParams.FillParent);

            // Here you can set the WebView settings, WebViewClient, CookieManager, AddJavascriptInterface etc.
            webView.Settings.JavaScriptEnabled = true;

            webView.LoadUrl("https://www.example.com/");

            this.AddView(webView);

            /*// The following works but breaks Xamarin.Forms:
            Activity activity = this.Context as Activity;
            activity.SetContentView(webView);*/
        }

        protected override void OnLayout(bool changed, int left, int top, int right, int bottom)
        {
            base.OnLayout(changed, left, top, right, bottom);

            webView.Layout(left, top, right, bottom); // Important because LayoutParameters doesn't have an effect
        }
    }
}

看起来遗漏行 webView.LayoutParameters = new LinearLayout.LayoutParams(LayoutParams.FillParent, LayoutParams.FillParent); 是导致 WebView 问题的原因。也许这就是 Xamarin.Forms 自定义渲染器中缺少的东西？

Xamarin.Forms：具有 CSS 转换和 JS 滑动的页面在 Android WebView 自定义渲染器中不起作用，而在 Chrome 中起作用

Xamarin.Forms: Page with CSS transformations and JS swiping doesn't work in Android WebView custom renderer, when it does in Chrome

android

custom-renderer

android-webview

xamarin

xamarin.forms