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 progressindicator
                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

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

到目前为止，我还没有自己做过，但是正如webview_flutter包中的官方API所述，您应该可以通过调用{{1 }}，如here。

evaluateJavascript

我使用了摘录中的示例WebViewController代码作为参考。如API中所述，您可能需要等到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代码之后再运行自己的代码，以确保所有内容均已加载并且您要查找的元素存在。为此，WebView提供了一个JavaScript回调：

onPageFinished

Answer 3

提供WebView小部件的Flutter插件。

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

使用此库 here you can use this lib

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

3 个答案: