54 lines
1.9 KiB
Markdown
54 lines
1.9 KiB
Markdown
# 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 或联系前端维护人员。
|
||
|