Wix Widget应用切换预览模式时，如何触发EDIT_MODE_CHANGE事件？

问题核心 #

切换到Wix预览模式时，承载Widget的iframe会被完全卸载并重建，原实例的事件监听器已随旧iframe销毁，因此EDIT_MODE_CHANGE事件无法传递到新实例，导致监听器从未触发。

临时解决方法 #

1. 初始化时主动获取当前模式

不要仅依赖事件监听，在组件挂载时直接调用Wix API获取当前运行模式，确保每次iframe加载都能拿到正确状态：

const [wixEditMode, setWixEditMode] = useState("editor");

useEffect(() => {
  // 初始化时主动获取当前模式
  const getCurrentMode = async () => {
    try {
      // 调用Wix SDK获取当前环境模式（以实际SDK方法为准）
      const currentMode = await Wix.getEditMode();
      setWixEditMode(currentMode);
      // 持久化到本地存储
      localStorage.setItem("wixEditMode", currentMode);
    } catch (err) {
      // 降级处理：从本地存储读取上次状态
      const savedMode = localStorage.getItem("wixEditMode") || "editor";
      setWixEditMode(savedMode);
    }
  };

  getCurrentMode();

  // 保留事件监听，处理编辑器内未重载iframe的模式切换
  const editModeChange = (e) => {
    setWixEditMode(e.editMode);
    localStorage.setItem("wixEditMode", e.editMode);
    console.log("editModeChange", e);
  };

  Wix.addEventListener(Wix.Events.EDIT_MODE_CHANGE, editModeChange);

  return () => {
    Wix.removeEventListener(Wix.Events.EDIT_MODE_CHANGE, editModeChange);
  };
}, []);

2. 利用Wix初始化上下文参数

部分Wix Widget在iframe加载时，会通过URL参数或初始化上下文传递当前模式信息。可以检查URL参数或调用SDK方法获取环境信息：

useEffect(() => {
  // 从URL参数提取模式（需根据Wix实际传递的参数调整）
  const urlParams = new URLSearchParams(window.location.search);
  const modeFromUrl = urlParams.get("editMode") || "editor";
  setWixEditMode(modeFromUrl);
  localStorage.setItem("wixEditMode", modeFromUrl);

  // 后续保留事件监听逻辑...
}, []);

3. 本地存储兜底方案

由于iframe重载时旧实例可能来不及触发unmount清理，建议在编辑器模式下实时更新本地存储，预览模式加载时优先读取：

• 在编辑器的任何状态变更时，同步写入localStorage
• 预览模式初始化时，直接读取localStorage中的值作为初始状态

注意事项 #

• 上述Wix API方法需以官方Widget SDK文档为准，不同版本可能存在方法名差异
• 本地存储的键名建议加上应用唯一标识，避免与其他Wix应用冲突
• 等待Wix工单回复期间，可先用此方案临时解决状态同步问题

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