初始化后如何修改Roomle Configurator的locale设置

方法1：通过Roomle JavaScript API（推荐） #

Roomle支持通过官方JS接口动态修改locale，只要主页面与iframe满足同域要求，或Roomle配置了跨域通信权限，就能直接操作：

• 先确保主页面已初始化Roomle通信通道或引入SDK
• 监听语言下拉框的change事件，触发时执行以下代码：

  // roomleInstance为你的Roomle实例，newLocale是选中的语言代码（如'en'、'zh-CN'）
  roomleInstance.setLocale(newLocale)
  .then(() => {
    console.log('语言设置已更新');
  })
  .catch(err => {
    console.error('更新语言失败:', err);
  });
  

• 若通过iframe嵌入，也可使用postMessage传递指令：

  // 主页面代码
  const roomleIframe = document.getElementById('roomle-iframe');
  roomleIframe.contentWindow.postMessage(
    { type: 'SET_LOCALE', locale: newLocale },
    'https://your-roomle-domain.com' // 替换为Roomle配置器实际域名，保障通信安全
  );
  
  // Roomle iframe内部监听消息（若未默认处理）
  window.addEventListener('message', (event) => {
    if (event.origin === 'https://your-main-site.com' && event.data.type === 'SET_LOCALE') {
      Roomle.locale = event.data.locale;
      Roomle.refresh(); // 刷新配置器应用新语言设置
    }
  });
  

方法2：重新加载iframe（简单但体验有限） #

如果API方式不可行，可直接修改iframe的src属性，带上更新后的locale参数重新加载：

• 监听下拉框change事件，拼接新的iframe地址：

  const roomleIframe = document.getElementById('roomle-iframe');
  const baseUrl = roomleIframe.src.split('?')[0];
  const newLocale = 'ja'; // 替换为选中的语言代码
  roomleIframe.src = `${baseUrl}?locale=${newLocale}`;
  

• 此方法会重新加载整个iframe，用户的配置进度可能丢失，适合无需保留状态的场景

注意事项 #

• 确认Roomle配置器允许跨域通信，第三方嵌入需检查官方文档是否开放postMessage支持
• 语言代码需与Roomle支持的格式一致（如en-US或简写en）

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