Flutter如何执行JavaScript

在Flutter中如何执行JavaScript代码？有没有内置的方法或者需要依赖第三方库？具体实现步骤是什么？能否提供一个简单的示例代码？另外，执行JavaScript时是否有性能或安全方面的限制需要注意？

2 回复

Flutter可通过webview_flutter插件加载WebView，在其中执行JavaScript。也可使用flutter_js引擎直接运行JS代码。前者适合嵌入网页，后者适合纯JS逻辑。

更多关于Flutter如何执行JavaScript的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中执行JavaScript代码，主要有以下几种方式：

1. 使用 webview_flutter 插件

这是最常用的方法，通过WebView加载HTML页面并执行JS代码。

添加依赖：

dependencies:
  webview_flutter: ^4.4.2

示例代码：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class JavaScriptExecutor extends StatefulWidget {
  @override
  _JavaScriptExecutorState createState() => _JavaScriptExecutorState();
}

class _JavaScriptExecutorState extends State<JavaScriptExecutor> {
  late WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadHtmlString('''
        <html>
          <body>
            <div id="result"></div>
          </body>
        </html>
      ''');
  }

  // 执行JavaScript代码
  void executeJavaScript() async {
    String result = await controller.runJavaScriptReturningResult('''
      document.getElementById("result").innerHTML = "Hello from JavaScript!";
      return "执行完成";
    ''') as String;
    
    print('JavaScript执行结果: $result');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('执行JavaScript')),
      body: WebViewWidget(controller: controller),
      floatingActionButton: FloatingActionButton(
        onPressed: executeJavaScript,
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

2. 使用 flutter_js 插件

专门用于在Flutter中执行JavaScript的插件。

添加依赖：

dependencies:
  flutter_js: ^0.7.0

示例代码：

import 'package:flutter_js/flutter_js.dart';

void executeJSWithFlutterJs() {
  final jsRuntime = getJavascriptRuntime();
  
  // 执行简单的JavaScript代码
  final result = jsRuntime.evaluate('1 + 1');
  print('计算结果: ${result.rawResult}');
  
  // 执行函数
  jsRuntime.evaluate('''
    function greet(name) {
      return "Hello, " + name + "!";
    }
  ''');
  
  final greeting = jsRuntime.evaluate('greet("World")');
  print('函数调用结果: ${greeting.stringResult}');
}

3. 注意事项

  • 性能考虑：WebView方式较重，适合需要完整浏览器环境的场景
  • 安全性：注意防范XSS攻击，不要执行不可信的JS代码
  • 平台差异：不同平台可能有细微的行为差异

选择哪种方式取决于你的具体需求。如果只是需要简单的JS计算，推荐使用flutter_js；如果需要完整的浏览器环境，则使用webview_flutter。

回到顶部