在Flutter Webview中运行一些Javascript文件，例如index.js

Question

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

flutterWebViewPlugin.evalJavascript("require('./index.js');");

但是什么也没发生。

当我尝试运行Flutter代码时，什么也没显示

我的index.Js文件包含一个简单的警报声明

alert('hello world');

Answer 1

首先，您使用了“require”功能。这个函数没有在 javascript 中实现。它是 NodeJs 的一部分。所以该功能将无法工作。

为了将js文件加载到flutter中，您应该将其视为文本文件并正确加载。因此，您需要将文件添加到assets文件夹中，添加到pubspec文件中，然后加载它。在这里阅读完整答案

其次，您使用了 evalJavascript。该功能可以在许多不同的情况下使用。但只有当你有一个视图面板时它才有效。

检查下面的例子：

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

main() async {
  String jsCode = await rootBundle.loadString('assets/javascript.js');

  runApp(new MaterialApp(
    home: LunchWebView(jsCode),
  ));
}

class LunchWebView extends StatelessWidget {
  final String text;
  LunchWebView(this.text);

  @override
  Widget build(BuildContext context) {
    final FlutterWebviewPlugin flutterWebviewPlugin = FlutterWebviewPlugin();
    flutterWebviewPlugin.launch('https://www.google.com');
    flutterWebviewPlugin.evalJavascript(text);
    return Container();
  }
}

注意：：我没有处理重新加载和其他异常。您应该检查是否有任何 webview 对象打开，然后调用 Lunch 方法。