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

Posted 2023-03-07

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

【英文标题】：Run some Javascript file like index.js in Flutter Webview

【发布时间】：2019-10-08 22:10:04

【问题描述】：

如何在 flutter_webview_plugin 中运行 javascript 文件。我用这个试试。

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

但什么也没发生。

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

我的index.Js 文件包含一个简单的警报语句

alert('hello world');

【参考方案1】：

首先，您使用了“require”功能。此功能未在 javascript 本身中实现。 it's a part of NodeJs。所以该功能将不起作用。

为了将 js 文件加载到 Flutter 中，您应该将其视为文本文件并正确加载。因此，您需要将文件添加到 assets 文件夹，添加到 pubspec 文件中，然后加载它。 read the full answer here

第二，你使用了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 对象打开，然后调用午餐方法。