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 createState() {
// TODO: implement createState
return _Main();
}
}

class _Main extends State {
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?