How to set local variable to post message whenever a new one is listened

[erdemyerebasmaz]

Hello,

I can listen to post messages on browser like this but I didn't quite understand how I can set a local variable to event.data.

String script1 = 'window.addEventListener("message", receiveMessage, false);' +
                'function receiveMessage(event) {console.log(event.data);}';
widgetWebview.evalJavascript(script);

I tried

String script2 = 'var test = "Hello, World!";'+
                 'function getMessage(val) {return val;}' +
                 'getMessage(test);';
var testLocal = await widgetWebview.evalJavascript(script2);

and you can set testLocal to test but I couldn't apply it to post message.

Also, I tried setting value of test inside script1 and trigger onUrlChanged inside receiveMessage function and access it from script2. The variables in script1 were not accessible by script2.

Can we use a callback function to communicate between app & webview?

Thanks

[erdemyerebasmaz]

This is how I solved this issue:

initState() of my Flutter class where I'm using the webview widget.

...
widgetWebview.testStream.listen((value) {
      // whatever you will do with the listened data  
      });
    });
    widgetWebview.onStateChanged.listen((state) async {
      if (state.type == WebViewState.finishLoad) {
        String script = 'window.addEventListener("message", receiveMessage, false);' +
            'function receiveMessage(event) {FlutterJsInterface.getPostMessage(event.data);}';
        widgetWebview.evalJavascript(script);
      }
    });
...

Added this under WebviewManager's constructor:
webView.addJavascriptInterface(new FlutterJsInterface(), "FlutterJsInterface");
Second parameter is how it will be referenced inside javascript code.

and this inside WebviewManager.

public class FlutterJsInterface {
    @JavascriptInterface
    public void getPostMessage(String value){
        Map<String, Object> map= new HashMap<>();
        map.put("postMessage",value);
        FlutterWebviewPlugin.channel.invokeMethod("test", map);
    }
}

and created a stream inside base.dart

final _testStream = StreamController<String>.broadcast();

and added 'test' case under _handleMessages

case 'test':
        _testStream.add(call.arguments['postMessage']);
        break;

You can change the type, parse string to json object on both ends etc. Hope this was helpful.

[erdemyerebasmaz]

Changes can be seen here

[foxeveral]

Where is the WebviewManager?

[wackyapps]

I have updated the code changes in the source files. How do build this now to apply in compiled plugin.

[erdemyerebasmaz]

I have updated the code changes in the source files. How do build this now to apply in compiled plugin.

@wackyapps
If you upgrade plugins of your project and there was a change in the plugin that references it's own repo, your changes will be overridden.
That's why you fork the plugin, apply the changes and reference that repo in your projects pubspec.yaml such as:

flutter_webview_plugin:
    git:
      url: https://github.com/your_repo_name/flutter_webview_plugin.git