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

kounex · Accepted Answer · 2019-05-17 12:45:30Z

2

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';");
  },
  ...

answered May 17, 2019 at 12:45

kounex

1,7357 silver badges14 bronze badges

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

3 Comments

Nick Over a year ago

the plugin example use _controller as shown in my updated question. I can't find _controller.evaluateJavascript? Any idea why?

Nick Over a year ago

I use your code and update my question. It doesn't find the .evaluateJavascript part.

Nick Over a year ago

Also I have this in AppBar copying from plugin example code. actions: <Widget>[ NavigationControls(_controller.future), ],

yug k · Accepted Answer · 2019-06-17 17:38:38Z

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

Vithani Ravi · Accepted Answer · 2019-05-17 13:26:29Z

-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

answered May 17, 2019 at 13:26

Vithani Ravi

1,9914 gold badges15 silver badges19 bronze badges

2 Comments

Nick Over a year ago

that plugin I am using

Nick Over a year ago

I update my code (Update-3:) do you know how to make it work the _myController.evaluateJavascript part?

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related