static-page

简易静态页面集合，用于提供给后台系统通过 iframe 嵌入的单页页面（例如注单详情页面 betDetails/index.html）。

目录结构（示例）

• betDetails/index.html — 注单详情页面（iframe 嵌入）
• assets/、css/、js/ — 静态资源

说明

本仓库用于存放单页静态页面，要求页面独立、无需依赖跨页状态。建议资源使用相对路径或部署到 CDN 后使用绝对路径。

本地预览（快速）

• 使用 npx serve（推荐）

npx serve . -s -l 8080
# 访问: http://localhost:8080/betDetails/index.html

• 使用 Python（无需额外依赖）

python3 -m http.server 8080
# 访问: http://localhost:8080/betDetails/index.html

iframe 嵌入示例

<iframe
  src="https://static.example.com/betDetails/index.html?orderId=12345"
  width="100%"
  height="800"
  frameborder="0"
  sandbox="allow-forms allow-scripts allow-same-origin"
></iframe>

• 推荐通过 query 参数或 window.postMessage 做父子通信，避免依赖父页面全局变量。
• 使用 postMessage 时务必校验 origin 以保证安全。

部署建议

• 部署到静态托管或 CDN（Nginx、Netlify、Vercel、OSS 等）。
• 配置合理的缓存策略与版本控制（例如在资源 URL 上添加 hash 或版本号）。
• 若嵌入端和静态域名不同，注意配置 CORS 与 CSP。

开发与调试建议

• 保持页面无全局副作用，尽量自包含样式和脚本。
• 在嵌入场景测试窗口大小与响应式布局，避免滚动条或内容被截断。
• 使用 source map 便于线上问题定位（构建时开启）。

常见问题

• 无法在父页面中显示：检查 iframe src 是否正确、HTTP 状态与 CORS。
• postMessage 无响应：确认消息格式、目标 origin 是否匹配、事件监听已添加。

联系与维护

如需调整接口或嵌入方式，请在仓库中提 issue 或联系前端维护人员。