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

Question

如何在flutter_webview_plugin中運行Javascript文件。 我嘗試這個。

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

但是什么也沒發生。

當我嘗試運行Flutter代碼時，什么也沒顯示

我的index.Js文件包含一個簡單的警報語句

alert('hello world');

Answer 1

首先，您使用了“要求”功能。 javascript本身未實現此功能。 它是NodeJ的一部分 。 因此該功能將無法使用。

為了將js文件加載到Flutter中，您應該將其視為文本文件並正確加載。 因此，您需要將文件添加到資產文件夾，添加到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方法。