从 Dart 调用 javascript

Posted 2023-02-23

【中文标题】从 Dart 调用 javascript

【英文标题】：calling javascript from Dart

【发布时间】：2012-11-30 11:56:41

【问题描述】：

我能够从 dart 触发警报消息，但不知道如何从 dart 调用我在另一个 js 文件中编写的函数。如果它是直截了当的，这将是一个很好的卖点。我确实看到了this post，这让我开始了，但我觉得一定有办法，所以如果你想通了，请分享爱。

这是我所做的：

将此添加到 yaml 文件中：

依赖： js： 托管：js

在 dart 文件顶部添加 import 语句：import 'package:js/js.dart' as js;

添加这段代码以显示警报消息

js.scoped(() js.context.alert("高兴得跳起来！"); );

这是我认为应该起作用但不起作用的部分：鉴于我有一个 javascript 函数 doSomething()，我应该能够调用

js.context.doSomething();

【参考方案1】：

首先在pubspec.yaml 中添加js package 作为依赖项：

dependencies:
  js: any

然后你可以像这样使用你自己的js函数myFunc()：

import 'package:js/js.dart' as js;

main() 
  js.context.myFunc();

js.context 是 javascript window 的别名。

更多详情请见Using JavaScript from Dart: The js Library。

【讨论】：

而在导入的时候，我们应该指定上面的代码工作的前缀：import 'package:js/js.dart' as js;

js:0.0.13 是干什么用的，它与 js:any 有何不同

js.scoped 还在用吗？

js.scoped 已被删除，因为 package:js 与 dart:js 一起烘焙。

js.context 不再存在

【参考方案2】：

也许我的回答对某人来说是值得的，所以这就是为什么我要从 Dart 发布一个简单的 JS 函数调用。

添加js包依赖：

dependencies:
  js: any

创建一个JS文件，比如说example.js：

function test() 
  return 12+20;

在index.html 中添加上面的example.js 和<script src="..."> 标签。 将上述函数从 JS 互操作到 Dart：

@JS()
library t;

import 'package:js/js.dart';

@JS()
external int Test();

class MyOwn 
  int get value => Test();

并且，在 AngularDart 的 TODOLIST（默认组件可用）中：

@override
Future<Null> ngOnInit() async => print(MyOwn().value);

【讨论】：

如果我要调用的JS是NPM包怎么办？例如，github.com/polkadot-js/extension