How listen javascript funciton name from flutter

[heinzan]

how listen Javascriptinterface function name from flutter here is myCode.
Webviewmanager.java
@JavascriptInterface
public void loginFacebook() {
src.main.java.com.flutter_webview_plugin.FlutterWebviewPlugin.channel.invokeMethod("fbLogin" , null);
}

I want to know how listen that function from flutter.
void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
@OverRide
State createState() {
// TODO: implement createState
return _Main();
}
}

class _Main extends State {
final _webviewPlugin = FlutterWebviewPlugin();
StreamSubscription _onDestroy;

@OverRide
void initState() {
super.initState();

_webviewPlugin.onUrlChanged.listen((String url) {
  print(url);
});

_webviewPlugin.onDestroy.listen((_) => SystemNavigator.pop());

}

void dispose(){
_webviewPlugin.dispose();
super.dispose();
}

@OverRide
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
theme: new ThemeData(primaryColor: Colors.deepOrange),
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: PreferredSize(
child: Container(),
preferredSize: Size.fromHeight(0.0),
),
body: WebviewScaffold(
url: selectUrl,
appCacheEnabled: true,
withLocalStorage: true,
withJavascript: true,
supportMultipleWindows: true,
hidden: true,
withZoom: true,
),
),
);
}
}

[rinlv]

I solved this problem with dynamic channel name for Android and iOS #523 . Hope it's helpful

[heinzan]

I don't clear.I will explaing again.
This is my html simple code

   <div>
      <p style="margin: -20px 0px 0px 30px;font-size:14px;">Read <a style= "text-decoration: none;" 
  href="" onclick='return check()'>Prohibited ads</a>
    <script type='text/javascript'>

  function check()
  {
      alert("aa");
  }

This my dart file

import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
 import 'dart:async';
 import 'dart:convert';


 class LoadRules extends StatefulWidget {
   @override
   State<StatefulWidget> createState() {
 // TODO: implement createState
     return _LoadRulesState();
   }
 }

     class _LoadRulesState extends State<LoadRules> {
   final flutterWebViewPlugin = FlutterWebviewPlugin();
   @override
   Widget build(BuildContext context) {
     return FutureBuilder<String>(
       future: _loadLocalHTML(),
       builder: (context, snapshot) {
     if (snapshot.hasData) {
       return WebviewScaffold(
         appBar: AppBar(title: Text("Rules")),
         withJavascript: true,
         appCacheEnabled: true,
         url: new Uri.dataFromString(snapshot.data, mimeType: 'text/html' , encoding: utf8)
             .toString(),
         );
       } else if (snapshot.hasError) {
          return Scaffold(
           body: Center(
             child: Text("${snapshot.error}"),
           ),
         );
       }
        return Scaffold(
          body: Center(child: CircularProgressIndicator()),
        );
       },
    );
  }
 }

   Future<String> _loadLocalHTML() async {
     return await rootBundle.loadString('assets/html/rules.html');
   }

I want if i click Prohibited ads Link in webview to go new dart page.

[heinzan]

I solved this problem with dynamic channel name for Android and iOS #523 . Hope it's helpful

see my commnet again.Thanks.

[rinlv]

Hi @heinzan, your HTML should be using the channel name post message to communicate with flutter like this: <CHANNEL_NAME>.postMessage();

Eg: Prohibited.postMessage("");

In this case, "Prohibited" is the <CHANNEL_NAME> and is the empty string. Next, in dart code, you have to declare code to listen to your channel like this:

final Set<JavascriptChannel> jsChannels = [
  JavascriptChannel(
      name: 'Prohibited',
      onMessageReceived: (JavascriptMessage message) {
        //handle message here
        print(message.message);
      }),
].toSet();

----------------------------------------------------------------------------
//declare with webview
WebviewScaffold(
            javascriptChannels: jsChannels,
           ...
)

Here is sample