How can I remove a certain parts of a webpage in WebView in Xamarin.Forms

Viewed 502

In my mobile application, I'm loading a website using WebView as below,

webBrowser1.Source = "https://overwatchleague.com/en-us/news/22482778/world-cup-bangkok-s-standout-players";
InitializeNewsPageAsync();


public async void InitializeNewsPageAsync()
{
    webBrowser1.Navigated += async (o, s) =>
    {
       await webBrowser1.EvaluateJavaScriptAsync(@"element.parentNode.removeChild(document.getElementById('Navbar is-compact is-auto is-custom-logo'));");
       await webBrowser1.EvaluateJavaScriptAsync(@"element.parentNode.removeChild(document.getElementById('c-Header js-header'));");
       await webBrowser1.EvaluateJavaScriptAsync(@"element.parentNode.removeChild(document.getElementById('u-verticalNavPadding'));");
       await webBrowser1.EvaluateJavaScriptAsync(@"element.parentNode.removeChild(document.getElementById('ContentModule ContentModule-background--white'));");
       await webBrowser1.EvaluateJavaScriptAsync(@"element.parentNode.removeChild(document.getElementById('BuyCTA'));");
       await webBrowser1.EvaluateJavaScriptAsync(@"element.parentNode.removeChild(document.getElementById('TexturedBackground TexturedBackground--dark'));");
       };
}

I want to remove certain parts of the page so that I can only show the main content. Like a reader in smartphone browsers. However, neither webBrowser1.Eval() nor webBrowser1. EvaluateJavaScriptAsync() worked. I also tried 2 different JavaScripts,

document.getElementByClassName('Navbar is-compact is-auto is-custom-logo').style.display = 'none';

and

element.parentNode.removeChild(document.getElementById('Navbar is-compact is-auto is-custom-logo'));

None of them worked. The main content I only want to show is in div tag

<div class="u-horizontalPadding--medium" id="main-news-section"> ... </div>

I have tried loading only the content of that div tag using XPath and HtmlWebViewSource but that only loads the basic HTML without CSS nor JavaScript. In pictures, this is what I want to achieve

iwant

and this is what the page looks like without manipulation.

whatisee

0 Answers
Related