在Xamarin表单中的WebView中将CSS包含在具有源URL(iOS& Android)的地方 [英] Include CSS within WebView in Xamarin Forms with a Source URL (iOS & Android)

问题描述

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

I am trying to include some custom css within a webview on xamarin forms so the website being used can be customized with css styles, changing colors or other css style classes.

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

I have done this before using native code in Xcode and Android Studio, however this project is using xamarin forms and visual studio.

我相信我们需要做的是在用于Android和ios的自定义Webview渲染器中包含CSS. (如果有更简单的方法，也不会感到惊讶).

I believe what we need to do is include css within a custom webview renderer for android and ios. (would not be surprised if there was an easier way).

我尝试了各种在线显示的方法，但找不到解决方案.在线搜索有一些方法，但是不适用于xamarin形式.

I have tried various methods being shown online and can not find a solution. Searching online there are some methods however they are not for xamarin forms.

以下是我的xaml的代码段:

Below is a snippet of my xaml:

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

我的xaml.cs的另一段代码:

Another snippet of my xaml.cs:

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

我正在尝试使用google.com之类的外部源URL加载内联CSS样式.

I am trying to have inline css styles load while using an external source url like google.com.

对于那些好奇的人，这是我在xcode和android studio中完成的操作，但对于Xamarin Forms则需要它:

For those curious, this is how I have done it in xcode and android studio, but need it for 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 Studio:

Android Studio:

public void onPageFinished(WebView view, String url)

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

推荐答案

您可以使用自定义渲染器并在iOS中加载CSS样式.

You can use Custom Renderer and load the CSS style in 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而言，您只需要以表格的形式实现它即可.

And for Android , you just need to implement it in forms.

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事件.因此，您可以使用自定义渲染器

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;

            }

        }

    }

}

这篇关于在Xamarin表单中的WebView中将CSS包含在具有源URL(iOS& Android)的地方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！