How to display a part of the webpage using WebViewController plugin in Flutter?

Question

I have a div id as campaign-nav and class id as campaign-term-list and also

I don’t want to show a header, menu, and footer. In Android, I can do with below code: (WebViewController android code found: Display a part of the webpage on the webview android)

How can I display a part of the webpage using WebViewController plugin in Flutter?

view.getSettings().setJavaScriptEnabled(true);
        view.setWebViewClient(new WebViewClient() {

            @Override
            public void onPageFinished(WebView view, String URL)
            {
                view.loadUrl("javascript:(function() { " +
                        "var head = document.getElementsByClassName('header')[0].style.display='none'; " +
                        "var head = document.getElementsByClassName('blog-sidebar')[0].style.display='none'; " +
                        "var head = document.getElementsByClassName('footer-container')[0].style.display='none'; " +
                        "})()");

            }
        });
        view.loadUrl("your url");

UPDATE: Flutter example has;

 final Completer<WebViewController> _controller = Completer<WebViewController>();

And they use _controller as;

new WebView(
              initialUrl:
                  'h****s://mysite.com/campaing/',
              javascriptMode: JavascriptMode.unrestricted,
              onWebViewCreated: (WebViewController webViewController) {
                _controller.complete(webViewController);
              },
              javascriptChannels: <JavascriptChannel>[
                _toasterJavascriptChannel(context),
              ].toSet(),

              onPageFinished: (String url) {
                print('Page finished loading: $url');

                //Here is I put a boolean variable so I can show a progress indicator
                setState(() {
                  _loadedPage = true;

                });
              },
            ),

Update-2: In my web page I have footer as shown below.

<div id="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="footer-menu">

I put your code inside below _controller.complete(webViewController); part. But still shows the footer.

onWebViewCreated: (WebViewController webViewController) {
                _controller.complete(webViewController);
                webViewController.evaluateJavascript("document.getElementsByClassName('footer-menu')[0].style.display='none';");
              },

When I try to put webViewController.evaluateJavascript inside onPageFinished part it doesn't find the ".evaluateJavascript" part.

Update-3: Full code:(not working)

new WebView(
              initialUrl: 'https://stackoverflow.com',
              javascriptMode: JavascriptMode.unrestricted,
              onWebViewCreated: (controller){
                _myController = controller;
              },
              javascriptChannels: <JavascriptChannel>[
                _toasterJavascriptChannel(context),
              ].toSet(),
              onPageFinished: (url){
                print('Page finished loading: $url');
                _myController.evaluateJavascript("document.getElementsByClassName('header')[0].style.display='none';");
                setState(() {
                  _loadedPage = true;
                });
              },
            ),

Answer 1

I loaded google website and customizing the UI and it was working, but when i want to customize microsoft power apps in my webview of mobile it was not working, but when i tested in my mac chrome browser, i am able to customize in console by typing the javascript style commands. 

The below code is working for customizing the mobile webView    

return WebView(
          initialUrl: "https://www.google.com/",
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _controller.complete(webViewController);
            _myController = webViewController;


          // ignore: prefer_collection_literals
          javascriptChannels: <JavascriptChannel>[
            _toasterJavascriptChannel(context),
          ].toSet(),
          navigationDelegate: (NavigationRequest request) {
            if (request.url.startsWith('https://www.youtube.com/')) {
              print('blocking navigation to $request}');
              return NavigationDecision.prevent;
            }
            print('allowing navigation to $request');
            return NavigationDecision.navigate;
          },
          onPageFinished: (String url) {
            print('Page finished loading: $url');

_myController.evaluateJavascript("document.getElementsByClassName(\"zGVn2e\")[0].style.display='none';");
          },
        );
      }),
    );
  }

Read below article for complete tutorial: https://medium.com/@yugandhar0189/flutter-ios-android-customize-the-ui-inside-the-webview-e72fbe51dd44

Answer 2

Flutter plugin that provides a WebView widget.

On iOS the WebView widget is backed by a WKWebView; On Android the WebView widget is backed by a WebView.

Use this lib here you can use this lib

Answer 3

I haven't done it myself so far but as stated in the official API from the webview_flutter package, you should be able to achieve this by calling the evaluateJavascript method provided by the WebViewController as seen here.

WebView(
  initialUrl: 'https://stackoverflow.com',
  javascriptMode: JavascriptMode.unrestricted,
  onWebViewCreated: (controller) {
    // here you can access the WebViewController
    controller.evaluateJavascript("document.getElementsByClassName('header')[0].style.display='none';");
  },
  ...

I used the example JavaScript code from your snippet as a reference. As stated in the API you might need to wait until the WebView has run all JavaScript code from the website before you run your own to make sure everything is loaded and the element you try to find is present. To do so there is a onPageFinished callback provided by the WebView:

...
WebViewController _controller;
...

WebView(
  initialUrl: 'https://stackoverflow.com',
  javascriptMode: JavascriptMode.unrestricted,
  onWebViewCreated: (controller) {
    _controller = controller;
  },
  onPageFinished: (url) {
    _controller.evaluateJavascript("document.getElementsByClassName('header')[0].style.display='none';");
  },
  ...