webview - 如何在 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 方法来实现此目的，如 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';");
  },
  ...

我使用了您代码段中的示例 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';");
  },
  ...