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

Question

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

该页面适用于：Android 上的 Chrome、Xamarin.Android WebView、Xamarin.Forms WebView。

只有根据官方教程在 Android 上使用 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 自定义渲染器特定的问题。

标签： androidxamarinxamarin.formsandroid-webviewcustom-renderer

Answer 1

我发现的一种解决方案是在 Android 的自定义页面渲染器中创建 Android WebView。在这个例子中，带有 WebView 的页面被称为MyPage.

在其他平台上，您可以将常规MyPageXamarin.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 自定义渲染器中缺少的东西？