AI 对话助手 - iframe 嵌入示例

📋 嵌入代码示例

<!-- 基础嵌入 -->
<iframe 
    src="http://localhost:30006/pages/chat-assistant/index.html"
    width="100%"
    height="600px"
    frameborder="0"
    title="AI 对话助手"
    allow="clipboard-write"
></iframe>

<!-- 全屏嵌入 -->
<iframe 
    src="http://localhost:30006/pages/chat-assistant/index.html"
    style="width: 100%; height: 100vh; border: none;"
    title="AI 对话助手"
    allow="clipboard-write"
></iframe>

<!-- React 中使用 -->
<iframe
    src={`${process.env.REACT_APP_API_URL}/pages/chat-assistant/index.html`}
    style={{ width: '100%', height: '600px', border: 'none' }}
    title="AI 对话助手"
    allow="clipboard-write"
/>

<!-- Vue 中使用 -->
<iframe
    :src="`${apiBaseUrl}/pages/chat-assistant/index.html`"
    width="100%"
    height="600px"
    frameborder="0"
    title="AI 对话助手"
    allow="clipboard-write"
></iframe>

💡 使用建议

1. 高度设置：
   - 标准嵌入：600-800px
   - 移动端：建议 100vh 全屏
   - 桌面端：根据页面布局调整

2. 响应式处理：
   - 使用 width: 100% 自适应容器宽度
   - 移动端建议全屏或至少 500px 高度

3. 跨域问题：
   - 确保 iframe src 域名与 API 域名一致
   - 或在后端配置 CORS 允许跨域

4. 性能优化：
   - 使用 loading="lazy" 延迟加载（非首屏）
   - 考虑使用 IntersectionObserver 按需加载

5. 通信（可选）：
   - 使用 postMessage 实现父子页面通信
   - 监听 iframe 内部事件并响应
            

🤖 AI 对话助手 - iframe 嵌入示例

📋 嵌入代码示例

💡 使用建议