WordPress嵌入Bookee脚本 点击子菜单URL变更页面不刷新如何修复

问题产生原因 #

• 你使用的Elementor采用单页应用路由逻辑，点击子菜单时仅会更新浏览器地址栏的URL，不会触发整页重新加载。当前嵌入的Bookee脚本仅会在页面首次打开时执行一次，路由跳转后脚本不会自动重新运行，直接导致预约模块无法加载。
• 现有代码挂载逻辑存在错误：你虽然提前预留了id为studioyou-embed的模块容器，但实际加载脚本时将script标签插入到了页面全局body节点下，初始化Bookee实例时也没有指定挂载到预留容器中，路由切换后页面DOM更新，原有绑定的实例会直接失效。
• 代码未添加路由变化监听逻辑，URL变更后没有触发模块重新初始化的动作。

具体修复方法（无代码基础可直接操作） #

• 登录WordPress后台，打开Elementor编辑的预约排期页面，找到你之前放置Bookee嵌入代码的HTML小部件，将里面的原有代码全部清空。
• 将下方完整代码复制粘贴到该HTML小部件中：

<!-- Bookee预约模块固定挂载容器 -->
<div id="studioyou-embed"></div>
<script>
// 封装Bookee初始化逻辑，支持路由切换时重复调用
function initBookeeEmbed() {
  const embedContainer = document.getElementById("studioyou-embed");
  // 清空容器内旧内容，避免重复加载冲突
  embedContainer.innerHTML = '';
  // 移除旧的已加载脚本，防止重复加载报错
  const oldScript = document.querySelector('script[src*="onbookee.com/embed/index.js"]');
  if (oldScript) oldScript.remove();

  const timestamp = Date.now();
  const bookeeScript = document.createElement("script");
  bookeeScript.src = `https://graysanatomyacademy.onbookee.com/embed/index.js?t=${timestamp}`;
  // 脚本加载完成后，将预约模块初始化到指定容器
  bookeeScript.onload = function () {
    new StudioYouEmbed('graysanatomyacademy.onbookee.com', {
      container: '#studioyou-embed'
    });
  };
  embedContainer.appendChild(bookeeScript);
}

// 页面首次加载完成时初始化一次
window.addEventListener('load', initBookeeEmbed);
// 监听浏览器前进后退动作，触发重新初始化
window.addEventListener('popstate', initBookeeEmbed);
// 监听Elementor页面切换、弹窗展示动作，触发重新初始化
document.addEventListener('elementor/popup/show', initBookeeEmbed);
// 兼容Elementor菜单点击逻辑，等页面切换完成后重新加载模块
document.addEventListener('click', function(e) {
  if (e.target.closest('.elementor-menu-item, .elementor-item')) {
    setTimeout(initBookeeEmbed, 150);
  }
});
</script>

• 点击Elementor编辑器的「更新」按钮保存页面，之后清空WordPress站点缓存、浏览器缓存再测试即可，点击子菜单跳转时预约排期模块会正常渲染加载。
  注意：代码内的Bookee店铺地址已经和你原有配置保持一致，不需要手动修改任何参数，也无需调整Bookee后台的相关设置。

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