Gin框架Go项目中WebAssembly插入HTML元素不显示问题求助

一、内容无法显示的原因及修复 #

你的Wasm代码里直接用了{{.Title}}，这是Go模板引擎的语法，WebAssembly运行在浏览器端，根本无法解析这个模板变量，导致插入的是原始字符串{{.Title}}；另外如果DOM元素还没加载完成就执行Wasm代码，也会出现找不到元素的情况。

修复步骤： #

1. 在Gin模板中传递变量到浏览器全局
   修改你的outh.html模板，把Gin渲染的Title暴露给浏览器全局变量，同时确保目标DOM元素存在，并且Wasm脚本在DOM加载完成后执行：

   <!-- outh.html 片段 -->
   <div id="logindiv"></div>
   <button id="registerss">点击加载内容</button>
   
   <script>
       // 把Gin渲染的Title存到全局变量
       window.pageTitle = "{{.Title}}";
   </script>
   <!-- 将Wasm脚本放在body末尾，确保DOM已加载 -->
   <script src="/static/main.wasm.js"></script>
   

2. 修改Wasm代码获取全局变量并检查DOM元素

   package main
   
   import "syscall/js"
   
   var document = js.Global().Get("document")
   var window = js.Global().Get("window")
   
   func register(_ js.Value, _ []js.Value) interface{} {
       // 从浏览器全局变量获取Title
       title := window.Get("pageTitle").String()
       message := title + " 加载成功"
   
       // 获取目标元素并检查是否存在
       logindiv := document.Call("getElementById", "logindiv")
       if logindiv.IsUndefined() || logindiv.IsNull() {
           println("错误：未找到logindiv元素")
           return nil
       }
   
       logindiv.Set("innerHTML", message)
       return nil
   }
   
   func main() {
       // 等待DOM加载完成再绑定事件，避免找不到元素
       domLoaded := js.FuncOf(func(_ js.Value, _ []js.Value) interface{} {
           registerBtn := document.Call("getElementById", "registerss")
           if registerBtn.IsUndefined() || registerBtn.IsNull() {
               println("错误：未找到registerss按钮")
               return nil
           }
   
           registerBtn.Set("value", "0")
           registerBtn.Call("addEventListener", "click", js.FuncOf(register))
           return nil
       })
       document.Call("addEventListener", "DOMContentLoaded", domLoaded)
       defer domLoaded.Release() // 释放函数避免内存泄漏
   
       // 阻塞main函数，保持Wasm实例存活
       select {}
   }
   

3. Gin中托管静态文件
   确保你的Wasm编译后的文件（比如main.wasm和配套的JS文件）放在static目录下，并在Gin中添加静态文件路由：

   // main.go 片段
   func main() {
       r := gin.Default()
       // 托管静态文件，访问路径为/static
       r.Static("/static", "./static")
       // ... 你的其他路由
   }
   

二、插入HTML实现图片显示 #

直接在innerHTML中写入完整的img标签即可，注意图片路径要正确（相对于当前页面URL，或者使用绝对路径）。

修改Wasm的register函数示例： #

func register(_ js.Value, _ []js.Value) interface{} {
    title := window.Get("pageTitle").String()
    // 构造包含图片的HTML内容
    htmlContent := `
        <div>
            <h2>` + title + `</h2>
            <p>这是插入的图片：</p>
            <img src="/static/images/demo.jpg" alt="演示图片" style="width:200px;">
        </div>
    `

    logindiv := document.Call("getElementById", "logindiv")
    if logindiv.IsUndefined() || logindiv.IsNull() {
        println("错误：未找到logindiv元素")
        return nil
    }

    logindiv.Set("innerHTML", htmlContent)
    return nil
}

把图片放在static/images/demo.jpg路径下，Gin的静态文件路由会正确返回该图片。

内容的提问来源于stack exchange，提问作者Ivan