• 教程八 在Go中使用Energy创建跨平台GUI应用 - Go执行JS函数

     

    教程-示例-文档

    介绍

    Energy Go代码中如何执行Web端的JS函数和代码。

    在一些情况下，我们可以通过Go来执行指定窗口的JS代码，达到通过Go操作JS的目的，该操作只针对JS的代码或函数执行，不会影响到Go的结果。

    运行此示例，需要安装好Go和Energy开发环境：教程一 环境安装

    此示例中采用了内置http服务访问内嵌资源: 内置http服务

    使用方式

    Go中调用JS

    参数说明：

    参数1 js代码或函数

    1. 示例参考，根据实现场景中使用
    2. JS代码
    3. `
    4. var demo = document.getElementById('demo');
    5. demo.innerHTML = 'energy gui';
    6. `
    7.  
    8. `
    9. document.title;
    10. `
    11.  
    12. JS函数
    13. `alert('energy');`
    14.  
    15. JS中已定义的函数
    16. `
    17. demo('参数1', '参数2');
    18. `

    参数2 可为空，或script URL

    参数3 默认0，脚本开始执行行号

    Chromium().ExecuteJavaScript("cript: code or function", "script url", code start line)
    1. //获得主窗口
    2. info := cef.BrowserWindow.MainWindow()
    3. //调用js中定义的函数GoExecuteJSFunc,并传递参数，但没有返回值
    4. var jsFunc = fmt.Sprintf("GoExecuteJSFunc(%d, '%d')", 9999, time.Now().Second())
    5. info.Chromium().ExecuteJavaScript(jsFunc, "", 0)

    完整示例

    Go代码示例

    示例中在主进程启动之后开启一个1秒执行一次的协程函数，并在函数里执行了JS函数GoExecuteJSFunc

    GoExecuteJSFunc函数接收2个参数，可通过Go字符串拼接传递参数

    ExecuteJavaScript 函数无法接收函数返回值，如想接收返回值需使用事件机制：参考教程九

    1. package main
    2.  
    3. import (
    4. 	"embed"
    5. 	"fmt"
    6. 	"github.com/energye/energy/cef"
    7. 	"github.com/energye/energy/common/assetserve"
    8. 	"time"
    9. )
    10.  
    11. //go:embed resources
    12. var resources embed.FS
    13.  
    14. func main() {
    15. 	//全局初始化 每个应用都必须调用的
    16. 	cef.GlobalCEFInit(nil, &resources)
    17. 	//创建应用
    18. 	cefApp := cef.NewApplication(nil)
    19. 	//指定一个URL地址，或本地html文件目录
    20. 	cef.BrowserWindow.Config.DefaultUrl = "http://localhost:22022/execute-javascript.html"
    21. 	cef.BrowserWindow.Config.Title = "Energy - execute-javascript"
    22. 	cef.BrowserWindow.Config.Icon = "resources/icon.ico"
    23. 	//内置http服务链接安全配置
    24. 	cef.SetBrowserProcessStartAfterCallback(func(b bool) {
    25. 		fmt.Println("主进程启动 创建一个内置http服务")
    26. 		//通过内置http服务加载资源
    27. 		server := assetserve.NewAssetsHttpServer()
    28. 		server.PORT = 22022
    29. 		server.AssetsFSName = "resources" //必须设置目录名
    30. 		server.Assets = &resources
    31. 		go server.StartHttpServer()
    32. 		//定时执行web js
    33. 		go timeTask()
    34. 	})
    35.  
    36. 	//运行应用
    37. 	cef.Run(cefApp)
    38. }
    39.  
    40. //定时执行web js
    41. func timeTask() {
    42. 	var param0 = 0
    43. 	for {
    44. 		//每1秒钟执行一次
    45. 		time.Sleep(time.Second)
    46. 		info := cef.BrowserWindow.MainWindow()
    47. 		param0++
    48. 		//调用js中定义的函数GoExecuteJSFunc,并传递参数，但没有返回值, 也无法接收返回值
    49. 		var jsFunc = fmt.Sprintf("GoExecuteJSFunc(%d, '%d')", param0, time.Now().Second())
    50. 		fmt.Println("GoExecuteJSFunc:", jsFunc)
    51. 		info.Chromium().ExecuteJavaScript(jsFunc, "", 0)
    52. 	}
    53. }

    html代码示例

    定义了GoExecuteJSFunc函数，在Go中调用传递2个参数。

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>execute-javascripttitle>
    6.     <script type="application/javascript">
    7.         function GoExecuteJSFunc(param, param1) {
    8.             let message = document.getElementById("message");
    9.             message.innerHTML = message.innerHTML + "param0: " + param + "  param1: " + param1 + "
      "
    10.             if (param % 2 === 0) {
    11.                 message.style.color = "red"
    12.             } else {
    13.                 message.style.color = "blue"
    14.             }
    15.         }
    16.     script>
    17. head>
    18. <body style="overflow: hidden;margin: 0px;padding: 0px;">
    19. execute-javascript:<br>
    20. <div id="message">
    21.  
    22. div>
    23. body>
    24. html>

  • 相关阅读:
    JavaScript学习笔记
    Navicat Premium 15 for Mac/Win 中文安装包下载
    信息检索 | 国内外综合性信息检索系统一览
    【数据说第四期】篮球比赛中的投篮选择
    论文阅读笔记(六)——基于改进深度学习方法的股骨x线骨折自动检测与定位
    前后端接口设计与配置中心系统＜二十九＞-------HiAbility SDK开发2【 APP分享功能设计与实现】
    【项目管理】原则之四--聚焦于价值
    C语言趣味代码（一）
    数据安全出境系列——数据追溯能力
    (Linux学习一)：Mac安装vmWare11.5,centOS 7安装步骤教程
  • 原文地址：https://blog.csdn.net/snxamdf/article/details/128074644