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

Question

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.

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

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).

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.

Below is a snippet of my xaml:

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

Another snippet of my xaml.cs:

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

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

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:

public void onPageFinished(WebView view, String url)

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

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

You can use Custom Renderer and load the CSS style in iOS.

in iOS project

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); 
        }
    }
}

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);
}

Update

In android , webview will block JS event in default . So you can enable it by using 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;

            }

        }

    }

}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 21, 2019 at 7:11

Lucas Zhang

18.9k3 gold badges14 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

OD Applications Over a year ago

Thank you very much for the answer!!! I will try it out today. Curious for the following: NSString jsStr= new NSString("xxx"); var jsString = "xxx"; The 'xxx' is where the css will be placed?

OD Applications Over a year ago

Can you give me an example of the css I would use if the primary style is: .branding { display: none; }. I am not able to get this to work on android. (I have not tested iOS yet).

OD Applications Over a year ago

I have updated the working methods for xcode and android studio. Unfortunately your solution has not been able to work for me.

Lucas Zhang Over a year ago

Did you test it on android?

OD Applications Over a year ago

Yes I tested on android, however I think the cookies and cache needed to be cleared for me to see the effect take place...? I will try again this week.

|

Collectives™ on Stack Overflow

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

1 Answer 1

in iOS project

Update

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

in iOS project

Update

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related