从GO WebAssembly调用JavaScript事件

huangapple
go评论114阅读模式
英文:

Calling JavaScript event from GO WebAssembly

问题

在JavaScript中，事件非常常见，可以通过以下方式调用：

  1. <p id="p_id">
  2. </p><button id="some_id">Click me</button>
  4. var element=document.querySelector("#some_id")
  5. var listener=element.addEventListener('click',function(event){  
  6.      document.querySelector("#p_id").innerHTML = "Hello World";                   
  7.  });
  9. // 或者
  10. <p id="p_id">
  11. <button onclick="some_function()">Click me</button>
  13. <script>
  14. function some_function() {
  15.   document.querySelector("#p_id").innerHTML = "Hello World";
  16. }

我知道在GO中，可以使用js.Global().Get().Call()和js.Global().Get().Invoke()来调用典型的JS函数，如下所示：

  1. //go:build js && wasm
  3. package main
  5. import (
  6. 	"syscall/js"
  7. )
  9. var (
  10. 	document js.Value
  11. )
  13. func init() {
  14. 	document = js.Global().Get("document")
  16. }
  18. func main() {
  19. 	c := make(chan int) // channel to keep the wasm running, it is not a library as in rust/c/c++, so we need to keep the binary running
  20. 	
  21.     alert := js.Global().Get("alert")
  22. 	alert.Invoke("Hi")    
  23.     
  24.     h1 := document.Call("createElement", "h1")
  25. 	h1.Set("innerText", "This is H1")
  26. 	h1.Get("style").Call("setProperty", "background-color", "blue")
  28. 	<-c
  29. }

要在GO中添加eventListner，可以按照以下方式进行：

  1. var cb js.Func
  2. cb = js.FuncOf(func(this js.Value, args []js.Value) interface{} {
  3. 	fmt.Println("button clicked")
  4. 	cb.Release() // release the function if the button will not be clicked again
  5. 	return nil
  6. })
  7. js.Global().Get("document").Call("getElementById", "myButton").Call("addEventListener", "click", cb)

我正在寻找的是，如何在GO中对由JavaScript触发的事件进行响应。

更新

总结一下，我如何编写一个go代码来完成下面的JavaScript代码所做的事情（使用IndexedDB API）：

  1. function remove() {
  2.     var request = db.transaction(["employee"], "readwrite")
  3.     .objectStore("employee")
  4.     .delete("00-03");
  5.     
  6.     request.onsuccess = function(event) {
  7.        alert("Kenny's entry has been removed from your database.");
  8.     };
  9.  }

有什么想法吗？

英文:

In JavaScript events are vey common that can be called as:

  2. <p id="p_id">
  3. </p><button id="some_id">Click me</button>
  5. var element=document.querySelector("#some_id")
  6. var listener=element.addEventListener('click',function(event){  
  7.      document.querySelector("#p_id").innerHTML = "Hello World";                   
  8.  });
  10. // OR
  11. <p id="p_id">
  12. <button onclick="some_function()">Click me</button>
  14. <script>
  15. function some_function() {
  16.   document.querySelector("#p_id").innerHTML = "Hello World";
  17. }

I aware with typical JS functions, we can use js.Global().Get().Call() and js.Global().Get().Invoke() in GO, as:

  1. //go:build js && wasm
  3. package main
  5. import (
  6. 	"syscall/js"
  7. )
  9. var (
  10. 	document js.Value
  11. )
  13. func init() {
  14. 	document = js.Global().Get("document")
  16. }
  18. func main() {
  19. 	c := make(chan int) // channel to keep the wasm running, it is not a library as in rust/c/c++, so we need to keep the binary running
  20. 	
  21.     alert := js.Global().Get("alert")
  22. 	alert.Invoke("Hi")    
  23.     
  24.     h1 := document.Call("createElement", "h1")
  25. 	h1.Set("innerText", "This is H1")
  26. 	h1.Get("style").Call("setProperty", "background-color", "blue")
  28. 	<-c
  29. }

To add eventListner from GO, I know we can do it as:

  1. var cb js.Func
  2. cb = js.FuncOf(func(this js.Value, args []js.Value) interface{} {
  3. 	fmt.Println("button clicked")
  4. 	cb.Release() // release the function if the button will not be clicked again
  5. 	return nil
  6. })
  7. js.Global().Get("document").Call("getElementById", "myButton").Call("addEventListener", "click", cb)

What I'm looking for, is how to response from GO to the even that is triggered in JavaScript.

UPDATE

To wrap up, how can I write a go code to do the same of the JavaScript code below (Which is using IndexedDB API):

  1. function remove() {
  2.     var request = db.transaction(["employee"], "readwrite")
  3.     .objectStore("employee")
  4.     .delete("00-03");
  5.     
  6.     request.onsuccess = function(event) {
  7.        alert("Kenny's entry has been removed from your database.");
  8.     };
  9.  }

Any thought?

答案1

得分: 1

如果你的事件是一个可归因的变量（例如 request.onsuccess = function() { ... }），你可以使用 Set 来定义一个 js.FuncOf，以处理结果，就像处理一个 JavaScript 函数一样，类似于：

  1. req := js.Global().Get("db").Call("transaction").Call("objectStore").Call("delete")
  2. var f js.Func
  3. f = js.FuncOf(func(this js.Value, args []js.Value) interface{} {
  4.     defer f.Release()
  6.     js.Global().Call("alert", "Kenny's entry has been removed from your database.")
  7.     return nil
  8. })
  9. req.Set("onsuccess", f)

别忘了在完成后释放函数（Release）;)

英文:

If your even is an attributable variable (e.g. request.onsuccess = function() { ... }) you can use Set to define a js.FuncOf to handle the result as a javascript function would, something like:

  1. req := js.Global().Get("db").Call("transaction").Call("objectStore").Call("delete")
  2. var f js.Func
  3. f = js.FuncOf(func(this js.Value, args []js.Value) interface{} {
  4.     defer f.Release()
  6. 	js.Global().Call("alert", "Kenny's entry has been removed from your database.")
  7. 	return nil
  8. })
  9. req.Set("onsuccess", f)

Don't forget to Release the function once you're done 从GO WebAssembly调用JavaScript事件

huangapple
  • 本文由 发表于 2021年11月15日 18:35:56
  • 转载请务必保留本文链接：https://go.coder-hub.com/69972999.html
  • go
  • webassembly
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定