Extend webview with javascript interface functionality

[DipoAreoye]

This could help support webapps, and enable cross communication between our flutter app and the webview as is possible with the native webview. Is this achievable?

[lejard-h]

Probably possible, we should be able to create a bridge between the native class and the flutter code

[fujinjun]

I have implemented on android ,sample code here: add webView.addJavascriptInterface(new FlutterJsInterface(), "Android"); after webView.setWebChromeClient in WebviewManager.java , the FlutterJsInterface class is `class FlutterJsInterface {

    @JavascriptInterface
    public void toService() {
        System.out.println("toservice");
        FlutterWebviewPlugin.channel.invokeMethod("toService", null);
    }
}

` in flutter ,

static const platform = const MethodChannel('flutter_webview_plugin'); platform.setMethodCallHandler((call) { if (call.method == "toService") { Navigator.of(context).push(WebViewRouter(builder: (context) { return new KefuPage(); })); } }); and the WebViewRouter is

` class WebViewRouter extends MaterialPageRoute { var plugin = FlutterWebviewPlugin(); WebViewRouter({ @required WidgetBuilder builder, RouteSettings settings, bool maintainState = true, bool fullscreenDialog = false, }) : super( builder: builder, settings: settings, maintainState: maintainState, fullscreenDialog: fullscreenDialog); @override TickerFuture didPush() { plugin.hide(); return super.didPush(); }

@override bool didPop(result) { plugin.show(); return super.didPop(result); } } `

sorry for the format ,this is my first comment with code

[charafau]

@fujinjun maybe you could create PR? Since you already have code.

[fujinjun]

@charafau I do not have much time on this,but you can see code in my fork https://github.com/fujinjun/flutter_webview_plugin

[sakinaboriwala]

Is this implemented? I need to add JavaScript communication on my webview

[heinzan]

@fujinjun I clone your code and i have been implement at my proj but don't work ,This is my code.

void main() => runApp(MyApp());

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

class _Main extends State<MyApp> { final _webviewPlugin = FlutterWebviewPlugin(); static const platform = const MethodChannel('flutter_webview_plugin'); StreamSubscription _onDestroy;

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

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

platform.setMethodCallHandler((call) {
  if (call.method == "toService") {
    print('fblogin');
  }
});

_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: selectedUrl, appCacheEnabled: true, withLocalStorage: true, withJavascript: true, supportMultipleWindows: true, hidden: true, withZoom: true, ), ), ); } }

don't continue to starting webpage. Pause at handler method.Pls help me

this is javascriptinterface code..

class FlutterJsInterface {

    @JavascriptInterface
    public void loginFacebook() {
        System.out.println("toservice");
        FlutterWebviewPlugin.channel.invokeMethod("toService", null);
    }
}

loginFacebook() is name of javascript from backend

[NTMS2017]

In android we an do this as shown below code: In Flutter WebViewController plugin how can I hide header, footer or show only part of the page that has div id and class id?

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");

[charafau]

@sakina1403 you can communicate with javascript using eval function on webview

[rinlv]

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

[mkbsugita]

addJavascriptInterface didn't use the plugin?