static-page/README.md

# static-page

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

## 目录结构（示例）
- betDetails/index.html — 注单详情页面（iframe 嵌入）
- assets/、css/、js/ — 静态资源

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

## 本地预览（快速）
- 使用 npx serve（推荐）
```bash
npx serve . -s -l 8080
# 访问: http://localhost:8080/betDetails/index.html
```
- 使用 Python（无需额外依赖）
```bash
python3 -m http.server 8080
# 访问: http://localhost:8080/betDetails/index.html
```

## iframe 嵌入示例
```html
<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 或联系前端维护人员。