Flutter [webview_flutter] How do javascriptChannels work with ports?

Question

Working with the flutter plugin: webview_flutter

All the examples for sending data from JS to webview_flutter have similar syntax:

Webpage:

<script>
 toFlutter.postMessage('{"name":"Hello World"}');
</script>

Flutter:

javascriptChannels: { 
   JavascriptChannel( 
       name: 'toFlutter', 
       onMessageReceived: (message) async { 
           print('Javascript: "${message.message}"'); 
       }, 
   ), 
 },

That works, except... Now that webpage gives me a JS error if viewed in a webbrowser. (preventing other JS from running)

The correct (javascript) syntax for a javascriptChannel seems to be something like:

<script>
 var toFlutter = new MessageChannel(); 
 toFlutter.port1.postMessage('{"name":"Hello World"}'); 
</script>

That works inside a webbrowser, but now webview_flutter is of course not happy.

Obviously there are ways to work around this, I'm just asking: Did I miss something in the documentation? Is there a way to specify both a channel name and a port in webview_flutter?

Facing similar issue, do let me know if you were able to solve it? — Milind Mevada, Feb 11 '22 at 14:28

score 0 · Answer 1 · answered Dec 04 '22 at 04:33

This article should be helpful:

https://medium.com/flutter-community/flutter-webview-javascript-communication-inappwebview-5-403088610949

in Short: It shows 3 method to communicate with the JS code. One of which uses the message channel just like iFrames.

That way you can reuse almost the same structure form your html-targeted dart code.

Flutter [webview_flutter] How do javascriptChannels work with ports?

1 Answers1