如何使用iframe将React开发的聊天机器人嵌入HTML网站并实现宽高自适应

核心思路是通过postMessage实现iframe内部页面和父页面的跨域通信，内部聊天窗口状态变化时主动通知父页面对iframe尺寸做动态调整，兼容同域/跨域场景。

1. 改造React聊天机器人（iframe内部）代码 #

在聊天按钮的开关逻辑里，新增向父页面发送尺寸变更通知的逻辑：

const [chatOpen, setChatOpen] = useState(false);

const toggleChatWindow = () => {
  const newOpenState = !chatOpen;
  setChatOpen(newOpenState);

  // 自定义不同状态对应的iframe尺寸，可根据实际设计调整
  const sizeConfig = newOpenState 
    ? { width: "400px", height: "650px" } // 聊天窗口展开尺寸
    : { width: "60px", height: "60px" }; // 仅展示聊天按钮的收起尺寸

  // 向父页面发消息，生产环境建议把*替换为父站点的实际域名，提升安全性
  window.parent.postMessage({
    type: "CHAT_IFRAME_RESIZE",
    ...sizeConfig
  }, "*");
};

如果聊天窗口内部内容高度会动态变化（比如加载历史消息、展开多轮选项），可以额外加ResizeObserver监听聊天容器的尺寸变化，实时同步给父页面。

2. 改造嵌入iframe的父页面代码 #

首先在HTML中定义iframe，默认设置为收起状态的尺寸：

<iframe 
  id="chat-bot-iframe"
  src="你的React聊天机器人部署地址"
  frameborder="0"
  style="position: fixed; bottom: 24px; right: 24px; width: 60px; height: 60px; border-radius: 50%; overflow: hidden;"
></iframe>

然后添加消息监听逻辑，接收iframe的尺寸变更通知，动态调整iframe样式：

window.addEventListener("message", (event) => {
  // 校验消息来源，避免恶意请求，替换为你的React聊天机器人实际部署域名
  if (event.origin !== "https://你的聊天机器人部署域名") return;

  if (event.data.type === "CHAT_IFRAME_RESIZE") {
    const iframe = document.getElementById("chat-bot-iframe");
    if (!iframe) return;

    const { width, height } = event.data;
    iframe.style.width = width;
    iframe.style.height = height;
    // 可选：收起状态保持圆形按钮样式，展开状态改为常规圆角
    iframe.style.borderRadius = width === "60px" ? "50%" : "16px";
  }
});

额外注意事项 #

• 同域部署场景下也可以直接在父页面通过iframe.contentDocument.body获取内部元素尺寸调整，但postMessage方案兼容性更强，无跨域限制。
• 生产环境一定要把postMessage的目标域名和父页面的消息来源校验都替换为实际的业务域名，避免安全风险。

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