I want to inject a button to HTML, then process interaction between webview and flutter

[codlin]

I want to inject a button to HTML, if user click the button , flutter should be pop a snack bar, ,how to do these? thanks.

[adammesa]

Injecting the button can be done via javascript, which in turn can inject your button.

As mentioned in the readme file of this project, the WebView is above the regular widget tree, no widgets (like a snackbar) can be displayed above the WebView. My recommendation for this would be to inject the appropriate JS, HTML, and CSS to create a pseudo snackbar within the page you're visiting.

If you wanted your button press to be registered by your flutter code (not just the sandbox of JS that you've injected), I haven't seen any good solutions yet. The only thing I've thought that may work is by encoding the response in the WebView URL. For example, your button on page page.html would link to page.html&trigger=clicked, and I assume that the URL changed function will be triggered. Listen on it, and check for the encoded response and run your own code as appropriate. If someone knows a better workaround than this, please let me know.

Javascript injection function:

  // Loads the given JS class from assets
  Future<String> loadJS(String name) async {
    var givenJS = rootBundle.loadString('path/to/declared/assets/$name.js');
    return givenJS.then((String js) {
      flutterWebViewPlugin.onStateChanged.listen((viewState) async {
        if (viewState.type == WebViewState.finishLoad) {
          flutterWebViewPlugin.evalJavascript(js);
        }
      });
    });
  }

This would evaluate your javascript located at $name.js - allowing you to use Javascript to create your button.

[charafau]

@muffinjello thanks again. adding button with js and listeing to address changes is probably the only way of doing this. closing

[codlin]

@muffinjello @charafau Great! thank you very much.