Compose WebView Part 7 | Hide elements from web view

We can also hide elements (html's id or class) from webview loading in android. So are going to hide some elements like menu or buttons from 3rd party websites while web view on loading.

Hide elements from web view with Jetpack Compose in Android Studio | Kotlin | Jetpack Compose | Android Tutorials

We are going to hide class name (.btn) element in this website (ref below image)

In our web client object with onPageFinished()

 webViewClient = object : WebViewClient() {

                // Compose WebView Part 7 | Hide elements from web view
                override fun onPageFinished(view: WebView?, url: String?) {
                    super.onPageFinished(view, url)
                    removeElement(view!!)
                }

            }

..

Now we are going to hide id and class name in this website.

fun removeElement(webView: WebView) {

    // hide element by id : Read More button
    webView.loadUrl("javascript:(function() { document.getElementById('blog-pager').style.display='none';})()");

    // we can also hide class name : Menu buttons
    webView.loadUrl("javascript:(function() { document.getElementsByClassName('btn')[0].style.display='none';})()")
    webView.loadUrl("javascript:(function() { document.getElementsByClassName('btn')[1].style.display='none';})()")
    webView.loadUrl("javascript:(function() { document.getElementsByClassName('btn')[2].style.display='none';})()")
    webView.loadUrl("javascript:(function() { document.getElementsByClassName('btn')[3].style.display='none';})()")
    webView.loadUrl("javascript:(function() { document.getElementsByClassName('btn')[4].style.display='none';})()")
    webView.loadUrl("javascript:(function() { document.getElementsByClassName('btn')[5].style.display='none';})()")
    webView.loadUrl("javascript:(function() { document.getElementsByClassName('btn')[6].style.display='none';})()")
}

..

GET full source code on Github:

https://github.com/BoltUIX/Compose-Web-View

..