In some cases it’s useful to be able to invoke a JavaScript function inside Rust. This session showcases how this can be done, by passing along our JavaScript functions to the WebAssembly module instantiation.

First let's create a function in js:

      const appendNumberToBody = (number) => {
const text = document.createTextNode(number);
document.body.appendChild(text);
}

Wrap this function into a single object which contains 'env':

      const importObject = {
env: {
appendNumberToBody: appendNumberToBody
}
};

When we load wasm, we can pass in the object:

WebAssembly.instantiateStreaming(fetch("utils.gc.wasm"), importObject)

It return a promise, we can run the exported function return by wasm inside the promise.

Now we are going to create a function in Rust:

extern {
fn appendNumberToBody(x: u32);
} #[no_mangle]
pub extern fn run() {
unsafe { // we need to wrap with unsafe if getting the passed in value from third party
appendNumberToBody(42);
}
}

We exprot 'run' function, then we can invoke it inside promise:

      WebAssembly.instantiateStreaming(fetch("utils.gc.wasm"), importObject)
.then(wasmModule => {
wasmModule.instance.exports.run();
});

---------

Full code: Github

index.html:

<!DOCTYPE html>
<html>
<head>
<script> // pass the data from Js to Rust
const appendNumberToBody = (number) => {
const text = document.createTextNode(number);
document.body.appendChild(text);
} const importObject = {
env: {
appendNumberToBody: appendNumberToBody,
alert: alert
}
}; WebAssembly.instantiateStreaming(fetch("utils.gc.wasm"), importObject)
.then(wasmModule => {
wasmModule.instance.exports.run();
});
</script>
<head>
<body></body>
<html>

lib.rs:

extern {
fn appendNumberToBody(x: u32);
fn alert(x: u32);
} #[no_mangle]
pub extern fn run() {
unsafe {
appendNumberToBody(42);
alert(33)
}
}

[Rust] Pass a JavaScript Function to WebAssembly and Invoke it from Rust的更多相关文章

  1. [WASM] Call a JavaScript Function from WebAssembly

    Using WASM Fiddle, we show how to write a simple number logger function that calls a consoleLog func ...

  2. Understanding JavaScript Function Invocation and "this"

    Understanding JavaScript Function Invocation and "this" 11 Aug 2011 Over the years, I've s ...

  3. href="javascript:function()" 和onclick的区别

    href='javascript:function()'和onclick能起到同样的效果,一般来说,如果要调用脚本还是在onclick事件里面写代码,而不推荐在href='javascript:fun ...

  4. 关于<a href='javascript:function()'>

    <a href='javascript:function()'> 这样写是为了让这个链接不要链接到新页面转而执行一段js代码.和onclick能起到同样的效果,一般来说,如果要调用脚本还是 ...

  5. javascript function对象

    <html> <body> <script type="text/javascript"> Function.prototype.get_my_ ...

  6. JavaScript function函数种类(转)

    转自:http://www.cnblogs.com/polk6/p/3284839.html JavaScript function函数种类 本篇主要介绍普通函数.匿名函数.闭包函数 目录 1. 普通 ...

  7. JavaScript function函数种类介绍

    JavaScript function函数种类介绍 本篇主要介绍普通函数.匿名函数.闭包函数 1.普通函数介绍 1.1 示例 ? 1 2 3 function ShowName(name) {     ...

  8. 【转】onclick事件与href='javascript:function()'的区别

    href='javascript:function()'和onclick能起到同样的效果,一般来说,如果要调用脚本还是在onclick事件里面写代码,而不推荐在href='javascript:fun ...

  9. javascript:function 函数声明和函数表达式 详解

    函数声明(缩写为FD)是这样一种函数: 有一个特定的名称 在源码中的位置:要么处于程序级(Program level),要么处于其它函数的主体(FunctionBody)中 在进入上下文阶段创建 影响 ...

随机推荐

  1. perl:split函数用法

    本文和大家重点讨论一下Perl split函数的用法,Perl中的一个非常有用的函数是Perl split函数-把字符串进行分割并把分割后的结果放入数组中.这个Perl split函数使用规则表达式( ...

  2. 【php】 php-fpm 配置见解

    来源:php官方文档 Init script setup=== You will probably want to create an init script for your new php-fpm ...

  3. PAT Basic 1014

    1014 福尔摩斯的约会 大侦探福尔摩斯接到一张奇怪的字条:“我们约会吧! 3485djDkxh4hhGE 2984akDfkkkkggEdsb s&hgsfdk d&Hyscvnm” ...

  4. 几条sql语句(exists)

    通常exists后的子查询是需要和外面的表建立关联关系的,如 select count(*) from a where exists (select 'x' from b where a.id = b ...

  5. DOM、SAX、JDOM、DOM4J以及PULL在XML文件解析中的工作原理以及优缺点对比

    1. DOM(Document Object Model)文档对象模型1. DOM是W3C指定的一套规范标准,核心是按树形结构处理数据,DOM解析器读入XML文件并在内存中建立一个结构一模一样的&qu ...

  6. jquery 元素文本取值/赋值

    select元素选中option值 jq $("#select1 option:selected").text(); $("select id或class option: ...

  7. 用openrowset函数操作远程数据库

    OPENROWSET 包含访问 OLE DB 数据源中的远程数据所需的全部连接信息.当访问链接服务器中的表时,这种方法是一种替代方法,并且是一种使用 OLE DB 连接并访问远程数据的一次性的.特殊的 ...

  8. hlgoj1881

    #include <stdio.h> +]; int main(){ int l,m; int i,j; int sign; num[]=; num[]=; while(~scanf(&q ...

  9. [BZOJ1589] [Usaco2008 Dec]Trick or Treat on the Farm 采集糖果(tarjan缩点 + 记忆化搜索)

    传送门 先用tarjan缩点,再记忆话搜索一下 #include <stack> #include <cstdio> #include <cstring> #inc ...

  10. .net面试题汇总-第二篇

    本篇主要关注下,.net面试题中经常用的算法问题 1.有一群猴子,它们每天要吃桃子,它们第一天吃的数量是总量的一半再多一个,第二天吃的是第一天剩下的一半再多一个,第三天吃的是第二天剩下的一半多一个,以 ...