Golang中如何为另一个模板添加"open"类

Golang中如何为另一个模板添加"open"类 我正在使用Go模板，并尝试使用一个主菜单和几个子菜单。子菜单附加在窗口上。

image

通过将子菜单附加到窗口，我无法从另一个窗口发送“open”状态。

image

因为当新窗口打开时，类会被刷新。

image

“open”类将在新窗口中被重置。

有没有办法通过JavaScript向另一个模板传递参数？“全局变量”仅属于当前窗口。

欢迎任何建议或完全不同的思路！


更多关于Golang中如何为另一个模板添加"open"类的实战教程也可以访问 https://www.itying.com/category-94-b0.html

3 回复

Sibert:

从另一个窗口发送一个“打开”操作

你这是什么意思？

Go 模板与在浏览器中运行的 JavaScript 无关。

更多关于Golang中如何为另一个模板添加"open"类的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html


lutzhorn:

你这是什么意思？

Go 模板与在浏览器中运行的 JavaScript 无关。

除了使用 JavaScript 和 CSS 来“打开”一个 <div> 之外，我不知道还有其他方法。使用 Go 有其他的方式吗？

在Go模板中实现跨窗口的类状态管理，可以通过以下几种技术方案：

方案一：使用URL参数传递状态

// Go模板部分
<a href="/menu?submenu=open" target="_blank">打开子菜单</a>

// 在目标窗口模板中
{{if eq .Submenu "open"}}
<div class="submenu open">
{{else}}
<div class="submenu">
{{end}}
    <!-- 子菜单内容 -->
</div>

// Go处理程序
func menuHandler(w http.ResponseWriter, r *http.Request) {
    submenu := r.URL.Query().Get("submenu")
    tmpl.Execute(w, map[string]interface{}{
        "Submenu": submenu,
    })
}

方案二：使用localStorage同步状态

<!-- 主窗口模板 -->
<script>
function openSubMenu() {
    localStorage.setItem('submenuOpen', 'true');
    window.open('/submenu', '_blank');
}
</script>
<button onclick="openSubMenu()">打开子菜单</button>

<!-- 子菜单窗口模板 -->
<script>
window.addEventListener('load', function() {
    const isOpen = localStorage.getItem('submenuOpen');
    if (isOpen === 'true') {
        document.querySelector('.submenu').classList.add('open');
        localStorage.removeItem('submenuOpen'); // 清理状态
    }
});
</script>
<div class="submenu">
    <!-- 子菜单内容 -->
</div>

方案三：使用BroadcastChannel API（现代浏览器）

<!-- 主窗口 -->
<script>
const channel = new BroadcastChannel('menu-channel');
function openSubMenu() {
    channel.postMessage({ action: 'openSubmenu' });
    window.open('/submenu', '_blank');
}
</script>

<!-- 子菜单窗口 -->
<script>
const channel = new BroadcastChannel('menu-channel');
channel.onmessage = function(event) {
    if (event.data.action === 'openSubmenu') {
        document.querySelector('.submenu').classList.add('open');
    }
};
</script>

方案四：使用PostMessage进行窗口间通信

// 主窗口模板
<script>
let submenuWindow = null;

function openSubMenu() {
    submenuWindow = window.open('/submenu', 'submenu');
}

// 监听子菜单状态变化
window.addEventListener('message', function(event) {
    if (event.data.type === 'submenuStatus') {
        console.log('子菜单状态:', event.data.open);
    }
});
</script>

// 子菜单窗口模板
<script>
// 通知父窗口状态
window.opener.postMessage({
    type: 'submenuStatus',
    open: true
}, '*');

// 接收父窗口指令
window.addEventListener('message', function(event) {
    if (event.data.command === 'toggleMenu') {
        document.querySelector('.submenu').classList.toggle('open');
    }
});
</script>

方案五：使用WebSocket实时同步（需要后端支持）

// Go WebSocket服务器
func handleWebSocket(w http.ResponseWriter, r *http.Request) {
    conn, _ := upgrader.Upgrade(w, r, nil)
    
    for {
        messageType, p, err := conn.ReadMessage()
        if err != nil {
            return
        }
        
        // 广播消息给所有连接的客户端
        if string(p) == `{"action":"openSubmenu"}` {
            broadcastToAll(messageType, p)
        }
    }
}

<!-- 客户端模板 -->
<script>
const ws = new WebSocket('ws://localhost:8080/ws');
ws.onmessage = function(event) {
    const data = JSON.parse(event.data);
    if (data.action === 'openSubmenu') {
        document.querySelector('.submenu').classList.add('open');
    }
};
</script>

推荐方案

对于简单的跨窗口状态同步，推荐使用方案二（localStorage），因为它实现简单且兼容性好。如果需要在多个窗口间进行复杂的通信，可以使用方案四（PostMessage）。

// 完整的localStorage方案示例
func main() {
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        tmpl := template.Must(template.ParseFiles("main.html"))
        tmpl.Execute(w, nil)
    })
    
    http.HandleFunc("/submenu", func(w http.ResponseWriter, r *http.Request) {
        tmpl := template.Must(template.ParseFiles("submenu.html"))
        tmpl.Execute(w, nil)
    })
    
    http.ListenAndServe(":8080", nil)
}

这些方案都能解决跨窗口模板类状态同步的问题，具体选择取决于你的应用场景和浏览器兼容性要求。

回到顶部