在具有源 URL (iOS & Android) 的 Xamarin Forms 中的 WebView 中包含 CSS

Question

我正在尝试在 xamarin 表单的 webview 中包含一些自定义 css 以便可以使用 css 样式自定义正在使用的网站，更改颜色或其他 css 样式类.

我在 Xcode 和 Android Studio 中使用本机代码之前已经完成了此操作，但是该项目使用的是 xamarin 表单和 visual studio。

我认为我们需要做的是在 android 和 ios 的自定义 webview 渲染器中包含 css。（如果有更简单的方法，也不会感到惊讶）。

我试过网上各种方法都找不到解决办法。在线搜索有一些方法，但它们不适用于 xamarin 表单。

下面是我的 xaml 的片段：

<WebView x:Name="WebView" Source="https://odapps.org/" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Navigating="WebViewTesti_OnNavigating"/>

我的另一个片段 xaml.cs:

public WebViewPage()
        {
            InitializeComponent();
            CheckConnectivity();
            WebView.Navigated += WebView_Navigated;
        }

我正在尝试在使用外部源 url 时加载内联 css 样式，例如 google.com。

对于那些好奇的人，这就是我在 xcode 和 android studio 中完成的方式，但 Xamarin Forms 需要它：

Xcode:

ViewControllers file within xCode

let cssString = "*:not(input):not(textarea) { -webkit-user-select: none; -webkit-touch-callout: none; } footer{display:none;}"

Android工作室：

public void onPageFinished(WebView view, String url)

view.loadUrl("javascript: $('.footer,#sg-smartbanner').css('display','none')");

Answer 1

您可以使用 Custom Renderer 并在 iOS 中加载 CSS 样式。

在 iOS 项目中

using xxx.iOS;
using Foundation;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(WebView), typeof(myWebRender))]

namespace xxx.iOS
{
    class myWebRender : WebViewRenderer
    {

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

            if (e.OldElement == null)
            {   // perform initial setup
                UIWebView myWebView = (UIWebView)this.NativeView;
               
            }
        }

        private void LoadFinished(object sender, EventArgs e)
        {
          //. . .

          NSString jsStr= new NSString("xxx");
          webView.EvaluateJavascript(jsStr); 
        }
    }
}

而对于Android，你只需要在表单中实现它。

webView.Navigated += WebView_Navigated;

private void WebView_Navigated(object sender, WebNavigatedEventArgs e)
{
   var webview = sender as WebView;

   var jsString = "$('.footer').css('display','none')";

   webview.Eval(jsString);
}

更新

在android中，webview默认会屏蔽JS事件。因此，您可以使用 Custom Renderer

启用它

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Webkit;
using Android.Widget;

using xxx;
using xxx.Droid;

using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(Xamarin.Forms.WebView), typeof(MyWebViewRenderer))]
namespace xxx.Droid
{
    public class MyWebViewRenderer:WebViewRenderer
    {
        public MyWebViewRenderer(Context context):base(context)
        {

        }

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

            if(Control!=null)
            {

                Android.Webkit.WebView webview =(Android.Webkit.WebView) Control;
                WebSettings settings = webview.Settings;


                settings.JavaScriptEnabled = true;

            }

        }

    }

}

在具有源 URL (iOS & Android) 的 Xamarin Forms 中的 WebView 中包含 CSS

Include CSS within WebView in Xamarin Forms with a Source URL (iOS & Android)

css

webview

xamarin

xamarin.forms

在 iOS 项目中

更新