在Flutter Webview中运行一些Javascript

Run some Javascript in Flutter Webview

如何在flutter_webview_plugin中运行Javascript。我尝试这个。

1
2
3

onPressed: () {
flutterWebviewPlugin.evalJavascript('<script language="JavaScript" type="text/javascript">alert("Hello World")');
},

但是什么也没发生。

我用flutterWebviePlugin.evalJavascript可以在Webview中运行Javascript。
我有错吗？

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

需要JavaScript，而不是HTML

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

是HTML。

尝试

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

相关讨论

您可以使用我的插件flutter_inappwebview，它是Flutter插件，允许您添加内联WebView或打开应用程序内浏览器窗口，并具有许多事件，方法和选项来控制WebView。

要运行一些js，可以使用：

Future evaluateJavascript({@required String source})：将JavaScript代码评估到WebView中并返回评估结果。
Future injectJavascriptFileFromUrl({@required String urlFile})：从定义的URL将外部JavaScript文件注入WebView。
Future injectJavascriptFileFromAsset({@required String assetFilePath})：从flutter资产目录将JavaScript文件注入WebView(有关如何从Assets文件夹加载文件的更多信息，请参见此处)。

完整示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

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.injectCSSFileFromAsset(assetFilePath:"assets/myJavascriptFile.js");
},
),
),
),
]))
);
}
}