Как я могу отобразить часть веб-страницы с помощью плагина WebViewController во Flutter?

Question

У меня есть div id в качестве навигатора кампании и идентификатор класса в качестве списка условий кампании, а также

Я не хочу показывать заголовок, меню и нижний колонтитул. В Android я могу сделать с помощью нижеприведенного кода: (Обнаружен код Android для WebViewController: Отображение части веб-страницы на веб-просмотре Android )

Как отобразить часть веб-страницы с помощью плагина WebViewController во 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: Пример флаттера имеет;

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

И они используют _controller как;

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 progressindicator
                setState(() {
                  _loadedPage = true;

                });
              },
            ),

Update-2: На моей веб-странице есть нижний колонтитул, как показано ниже.

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

Я поместил ваш код ниже _controller.complete (webViewController); часть. Но все равно показывает нижний колонтитул.

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

Когда я пытаюсь поместить webViewController.evaluateJavascript в часть onPageFinished, он не находит часть «.evaluateJavascript».

Update-3: Полный код: (не работает)

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

Прочитайте статью ниже для полного урока: https://medium.com/@yugandhar0189/flutter-ios-android-customize-the-ui-inside-the-webview-e72fbe51dd44

Answer 2

До сих пор я сам этого не делал, но, как указано в официальном API из пакета webview_flutter , этого можно добиться, вызвав метод evaluateJavascript, предоставленный WebViewControllerкак видно здесь .

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

Я использовал пример кода JavaScript из вашего фрагмента в качестве ссылки.Как указано в API, вам может потребоваться дождаться, пока WebView запустит весь код JavaScript с веб-сайта, прежде чем запускать свой собственный, чтобы убедиться, что все загружено и элемент, который вы пытаетесь найти, присутствует.Для этого существует onPageFinished обратный вызов, предоставляемый 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';");
  },
  ...

Answer 3

Плагин Flutter, который предоставляет виджет WebView.

В iOS виджет WebView поддерживается WKWebView;На Android виджет WebView поддерживается WebView.

Используйте эту библиотеку , здесь вы можете использовать эту библиотеку