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.