Tauri中appWindow无法监听Webview emit事件的问题排查

核心问题 #

你遇到的问题源于对Tauri窗口事件传递机制的误解，以及对appWindow和WebviewWindow实例差异的混淆：

1. 事件传递机制误解 #

调用webview.emit("my-event")时，事件只会发送给该WebviewWindow实例对应的目标窗口，并非广播给所有窗口。你原来的代码里：

• 点击按钮的窗口（窗口A）的appWindow.listen监听的是窗口A自身的事件，不会收到发给新窗口（窗口C）的事件
• 新窗口（窗口C）的appWindow.listen本应收到事件，但可能因为窗口未完全加载就发送事件，导致监听代码还未执行，所以没捕获到

2. appWindow与WebviewWindow的差异 #

• appWindow：是当前运行代码的窗口的专属实例，每个窗口的appWindow仅指向自身，用于监听自身收到的事件、控制自身窗口状态等，无需指定窗口标签。
• WebviewWindow：是用于创建新窗口或获取已有窗口的引用，通过窗口标签唯一标识目标窗口，操作的是指定的外部窗口（给目标窗口发事件、控制目标窗口等）。

修复代码示例 #

方案1：确保新窗口加载完成后再发送事件 #

替换原来的setTimeout，改为监听窗口加载完成事件：

import { WebviewWindow, appWindow } from "@tauri-apps/api/window";

console.log(`setting up listener`);
appWindow.listen("my-event", function (f) {
  console.log(`event hit!:`, f);
});

render(<button onClick={async ()=>{
            // 先检查窗口是否已存在，避免重复创建
            let webview = WebviewWindow.getByLabel("newWindow");
            if (!webview) {
              webview = new WebviewWindow("newWindow", {
                url: "index.html",
                title: "newWindow"
              });
            }

            // 等待窗口加载完成后再发送事件
            webview.once("tauri://loaded", async () => {
              console.log(`fire my-event`);
              await webview.emit("my-event", "jjjjjj");
            });

}} />, document.querySelector("#demo"));

方案2：给所有窗口广播事件 #

如果需要让所有打开的窗口都收到事件，可以遍历所有窗口实例逐个发送：

// 在按钮点击事件中替换emit逻辑
const allWindows = await WebviewWindow.getAll();
allWindows.forEach(async (window) => {
  await window.emit("my-event", "jjjjjj");
});

额外注意事项 #

• 窗口标签（如"newWindow"）必须唯一，重复的标签会导致创建窗口失败，返回已存在的窗口实例
• 确保所有窗口加载的index.html都正确执行了appWindow.listen的监听代码

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