如何在 Flutter 中使用 WebViewController 插件显示网页的一部分？

Question

我有一个 div id 作为campaign-nav 和一个class id 作为campaign-term-list 以及

我不想显示页眉、菜单和页脚。在 Android 中，我可以使用以下代码：（找到的 WebViewController android 代码：Display a part of the webpage on the webview android）

如何在 Flutter 中使用 WebViewController 插件显示网页的一部分？

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");

更新： Flutter 例子有；

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

                });
              },
            ),

更新 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”部分。

更新 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

到目前为止，我自己还没有完成，但正如 webview_flutter 包中的官方 API 中所述，您应该能够通过调用 WebViewController 提供的 evaluateJavascript 方法来实现这一点，如 @987654322 所示@。

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

我使用了来自您的 sn-p 的示例 JavaScript 代码作为参考。如 API 中所述，您可能需要等到 WebView 运行网站上的所有 JavaScript 代码，然后再运行您自己的代码，以确保所有内容都已加载并且您尝试查找的元素存在。为此，WebView 提供了一个 onPageFinished 回调：

...
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 2

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 3

提供 WebView 小部件的 Flutter 插件。

在 iOS 上，WebView 小部件由 WKWebView 支持；在 Android 上，WebView 小部件由 WebView 支持。

使用这个库 here you can use this lib