Run some Javascript in Flutter Webview Run some Javascript in Flutter Webview dart dart

Run some Javascript in Flutter Webview


flutterWebviewPlugin.evalJavascript('<script language="JavaScript" type="text/javascript">alert("Hello World")</script>')

expects JavaScript, not HTML

<script language="JavaScript" type="text/javascript">alert("Hello World")</script>

is HTML.

Try

flutterWebviewPlugin.evalJavascript('alert("Hello World")')


You can try my plugin flutter_inappwebview, which is a Flutter plugin that allows you to add inline WebViews or open an in-app browser window and has a lot of events, methods, and options to control WebViews.

To run some js, you can use:

  • Future<dynamic> evaluateJavascript({@required String source}): Evaluates JavaScript code into the WebView and returns the result of the evaluation.
  • Future<void> injectJavascriptFileFromUrl({@required String urlFile}): Injects an external JavaScript file into the WebView from a defined url.
  • Future<void> injectJavascriptFileFromAsset({@required String assetFilePath}): Injects a JavaScript file into the WebView from the flutter assets directory (see more here on how to load a file from the assets folder).

Full example:

import 'dart:async';import 'package:flutter/material.dart';import 'package:flutter_inappwebview/flutter_inappwebview.dart';Future main() async {  runApp(new MyApp());}class MyApp extends StatefulWidget {  @override  _MyAppState createState() => new _MyAppState();}class _MyAppState extends State<MyApp> {  @override  void initState() {    super.initState();  }  @override  void dispose() {    super.dispose();  }  @override  Widget build(BuildContext context) {    return MaterialApp(        home: InAppWebViewPage()    );  }}class InAppWebViewPage extends StatefulWidget {  @override  _InAppWebViewPageState createState() => new _InAppWebViewPageState();}class _InAppWebViewPageState extends State<InAppWebViewPage> {  InAppWebViewController webView;  @override  Widget build(BuildContext context) {    return Scaffold(        appBar: AppBar(            title: Text("InAppWebView")        ),        body: Container(            child: Column(children: <Widget>[              Expanded(                child: Container(                  child: InAppWebView(                    initialUrl: "https://www.example.org/",                    initialHeaders: {},                    initialOptions: InAppWebViewWidgetOptions(                      inAppWebViewOptions: InAppWebViewOptions(                        debuggingEnabled: true,                      ),                    ),                    onWebViewCreated: (InAppWebViewController controller) {                      webView = controller;                    },                    onLoadStart: (InAppWebViewController controller, String url) {                    },                    onLoadStop: (InAppWebViewController controller, String url) async {                      int result1 = await controller.evaluateJavascript(source: "10 + 20;");                      print(result1); // 30                      String result2 = await controller.evaluateJavascript(source: """                        var firstname = "Foo";                        var lastname = "Bar";                        firstname + " " + lastname;                      """);                      print(result2); // Foo Bar                      // inject javascript file from an url                      await controller.injectJavascriptFileFromUrl(urlFile: "https://code.jquery.com/jquery-3.3.1.min.js");                      // wait for jquery to be loaded                      await Future.delayed(Duration(milliseconds: 1000));                      String result3 = await controller.evaluateJavascript(source: "\$('body').html();");                      print(result3); // prints the body html                      // inject javascript file from assets folder                      await controller.injectJavascriptFileFromAsset(assetFilePath: "assets/myJavascriptFile.js");                    },                  ),                ),              ),            ]))    );  }}


Well, nothing happened because flutter webview does not support javascript alert function. Try writing a javascript function that changes the value of the innerText of an HTML element and then call the function using .evalJavascript to see the result.