Xamarin/Android webview hide website element/class

I'm trying to make a little android app showing a webview loading a website. I got it to show it with the following code snippets. But what I need now is to hide some elements on the header and the footer(a menu for example). I thought I could do it not loading some classes from the webpage, but I'm not sure how to properly do it. Do anyone have some experience on this to share some light? :)

Thanks in advance.

protected override void OnCreate(Bundle savedInstanceState)
        {


            base.OnCreate(savedInstanceState);
            SetContentView(Resource.Layout.activity_main);
            Android.Support.V7.Widget.Toolbar toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
            SetSupportActionBar(toolbar);

            FloatingActionButton fab = FindViewById<FloatingActionButton>(Resource.Id.fab);
            fab.Click += FabOnClick;

            DrawerLayout drawer = FindViewById<DrawerLayout>(Resource.Id.drawer_layout);
            ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawer, toolbar, Resource.String.navigation_drawer_open, Resource.String.navigation_drawer_close);
            drawer.AddDrawerListener(toggle);
            toggle.SyncState();

            NavigationView navigationView = FindViewById<NavigationView>(Resource.Id.nav_view);
            navigationView.SetNavigationItemSelectedListener(this);

            wbv = FindViewById<WebView>(Resource.Id.webView1);
            wbv.SetWebViewClient(new ExtendWebViewClient());
            WebSettings webSettings = wbv.Settings;
            webSettings.JavaScriptEnabled = true;
            wbv.LoadUrl(txtUrl);


        }

internal class ExtendWebViewClient : WebViewClient
        {
            public override bool ShouldOverrideUrlLoading(WebView view, string url)
              {

                view.LoadUrl(url);
                return true;
              }
        }

edit: Just to reflect the changes to the second class

public class ExtendWebViewClient : WebViewClient
    {
        public override void OnPageFinished(WebView view, string url)
        {
            base.OnPageFinished(view, url);
             string js = "var myElements = document.getElementsByClassName('fusion-main-menu');" +
              " myElements[0].style.display = 'none'; ";
            if (Build.VERSION.SdkInt >= BuildVersionCodes.Kitkat)
            {
                view.EvaluateJavascript(js, null);
            }
            else
            {
                view.LoadUrl(js);
            }
        }

    }

1 answer

  • answered 2018-11-14 13:35 Wasif Mahmood Mustafa

    Since you have enabled javascript, there will be a function to run the script in the webview.

    This is the code of WebView using Xamarin.Forms.WebView and this is how you can hide any element of webview using it's id.

     var hide = await webview.EvaluateJavaScriptAsync("document.getElementById('UserName').style.display = 'none';");