Customer SupportGet Expert Help
Skip to main content

Iframe 配置文件管理指南

概述​

SimpleDynamicIframe 组件支持通过配置文件来管理iframe地址，这样可以：

  • 🎯 统一管理 - 所有iframe地址集中在一个配置文件中
  • 🔧 易于维护 - 修改地址只需编辑配置文件，无需修改代码
  • 🧪 便于测试 - 支持URL参数临时覆盖配置
  • 🛡️ 安全可控 - 可以控制哪些地址被允许嵌入

配置文件位置​

配置文件位于：static/config.json

配置格式​

{
  "ANALYTICS_URL": "https://your-analytics-dashboard.com",
  "DOCS_EMBED": "https://your-docs-site.com",
  "MONITORING": "https://your-monitoring-tool.com",
  "STATUS_PAGE": "https://your-status-page.com",
  "USER_GUIDE": "https://your-user-guide.com"
}

配置键命名规范​

建议使用以下命名规范：

  • *_URL - 通用页面地址
  • *_EMBED - 嵌入内容地址
  • *_DASHBOARD - 仪表盘地址
  • *_API - API文档地址
  • *_FORM - 表单页面地址

使用方法​

1. 基础用法​

<SimpleDynamicIframe 
  configKey="ANALYTICS_URL"
  height="600px"
  title="分析页面"
/>

2. 带备用地址​

<SimpleDynamicIframe 
  configKey="DOCS_EMBED"
  fallbackSrc="https://fallback-site.com"
  height="500px"
  title="文档嵌入"
/>

3. 禁用跨域访问​

<SimpleDynamicIframe 
  configKey="MONITORING"
  allowCrossOrigin={false}
  height="400px"
  title="系统监控"
/>

优先级顺序​

组件会按以下优先级查找URL：

  1. URL参数 (最高优先级)

    • ?embed=https://custom-site.com
    • ?iframe=https://test-site.com

  2. 直接属性

    • 组件传入的 src 属性

  3. 全局配置

    • window.siteConfig.customFields[configKey]

  4. 配置文件

    • /config.json 文件中的配置

  5. 备用地址 (最低优先级)

    • fallbackSrc 属性

测试和调试​

使用URL参数测试​

# 测试覆盖分析页面
https://yoursite.com/?embed=https://test-analytics.com

# 测试覆盖监控页面
https://yoursite.com/?iframe=https://test-monitoring.com

查看配置来源​

组件会在页面底部显示配置来源信息：

来源: https://example.com • 配置键: ANALYTICS_URL • 来源: 配置文件

安全考虑​

1. 跨域访问控制​

// 推荐：禁用跨域访问
<SimpleDynamicIframe 
  configKey="ANALYTICS_URL"
  allowCrossOrigin={false}
/>

// 谨慎使用：允许跨域访问
<SimpleDynamicIframe 
  configKey="TRUSTED_SITE"
  allowCrossOrigin={true}
/>

2. 沙箱限制​

组件会自动添加沙箱限制：

  • allowCrossOrigin={false}: sandbox="allow-scripts"
  • allowCrossOrigin={true}: sandbox="allow-scripts allow-same-origin"

3. 推荐的安全配置​

<SimpleDynamicIframe 
  configKey="ANALYTICS_URL"
  allowCrossOrigin={false}
  showConfigInfo={true}
  height="600px"
  title="分析页面"
/>

常见问题​

Q: 如何添加新的配置键？​

A: 在 static/config.json 中添加新的键值对：

{
  "NEW_FEATURE_URL": "https://new-feature.com"
}

然后在组件中使用：

<SimpleDynamicIframe configKey="NEW_FEATURE_URL" />

Q: 如何修改现有地址？​

A: 直接编辑 static/config.json 文件中的对应值：

{
  "ANALYTICS_URL": "https://new-analytics-dashboard.com"
}

Q: 配置不生效怎么办？​

A: 检查以下几点：

  1. 配置文件路径是否正确 (static/config.json)
  2. 配置键名是否拼写正确
  3. URL格式是否有效 (必须以 http:// 或 https:// 开头)
  4. 浏览器控制台是否有错误信息

Q: 如何临时测试不同的地址？​

A: 使用URL参数：

https://yoursite.com/?embed=https://test-site.com

最佳实践​

  1. 使用有意义的配置键名

    • ✅ ANALYTICS_DASHBOARD_URL
    • ❌ URL1, SITE_A

  2. 提供备用地址

    <SimpleDynamicIframe 
      configKey="PRIMARY_SITE"
      fallbackSrc="https://backup-site.com"
    />

  3. 设置合适的高度

    <SimpleDynamicIframe 
      configKey="DASHBOARD"
      height="600px"  // 根据内容调整
    />

  4. 添加描述性标题

    <SimpleDynamicIframe 
      configKey="MONITORING"
      title="系统监控仪表盘"
    />

  5. 定期审查配置

    • 检查URL是否仍然有效
    • 移除不再使用的配置键
    • 更新过期的地址

配置文件模板​

{
  "ANALYTICS_URL": "https://analytics.yourcompany.com",
  "DOCS_EMBED": "https://docs.yourcompany.com",
  "MONITORING": "https://monitoring.yourcompany.com",
  "STATUS_PAGE": "https://status.yourcompany.com",
  "USER_GUIDE": "https://guide.yourcompany.com",
  "DEMO_PAGE": "https://demo.yourcompany.com",
  "TEST_FORM": "https://test.yourcompany.com",
  "API_DOCS": "https://api-docs.yourcompany.com"
}

通过这种方式，你可以轻松管理所有iframe地址，实现统一维护和灵活配置。