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.