在商品详情页嵌入问卷首选iframe方式，需配置无头嵌入、跨域支持及固定高度；轻量反馈可用fetch提交；弹层须按用户行为触发并设冷却期；后端必须校验字段类型、长度及XSS防护。

在商品详情页嵌入问卷，用 iframe 最稳

直接往 HTML 商品页里手写表单容易和现有样式冲突、提交逻辑难维护，还可能被 CSP 策略拦截。用 iframe 嵌第三方问卷（如腾讯问卷、问卷星、Typeform）是最快落地且兼容性最好的方式。

关键点：确保问卷平台支持「无头嵌入」（即隐藏顶部导航栏），并开启「允许跨域加载」；商品页的容器

需设固定高度或使用 min-height 防止布局塌陷。

• 问卷链接后加 ?embedded=1 或 &hide_title=1（依平台文档而定）可隐藏非必要 UI
• 不要用 width: 100% + height: 100% 给 iframe，移动端易出现横向滚动条；推荐 width: 100% + height: 600px（或 JS 动态适配）
• 若问卷需带商品 ID 作埋点，把 itemId=123456 拼进 iframe 的 src 查询参数里，后端或问卷平台能自动捕获

fetch 提交轻量级满意度评分，避免跳转

如果只要一个 1–5 星评分 + 一句话反馈，没必要上完整问卷。用原生 fetch 调后端 API 更轻、更快、更可控。

注意：必须在用户点击「提交」后禁用按钮，防止重复提交；服务端要校验 Referer 或加简单 token 防刷；前端别存敏感字段（如用户手机号）在 localStorage 里等提交。

• 评分组件建议用 + CSS 自定义，比 canvas 或 SVG 更语义化、无障碍友好
• 接口地址建议走同域，如 /api/v1/item/123456/survey，避免跨域预检失败
• 响应成功后清空输入框、恢复按钮状态，并用 alert() 或 toast 提示「已收到，感谢反馈」——别静默提交

问卷弹层触发时机别乱设，否则影响转化率

用户刚进商品页就弹问卷，90% 会直接关掉，还可能误点「不感兴趣」反向污染数据。必须结合行为信号判断是否弹出。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 推荐条件组合：页面停留 ≥ 60s + 滚动深度 ≥ 70% + 未触发加购/下单（用 performance.now() 和 IntersectionObserver 可较准判断）
• 同一用户 24 小时内只弹 1 次，用 localStorage 存时间戳，别依赖 cookie（iOS ITP 限制多）
• 关闭按钮必须显眼（右上角 ×），且点击后 30 天内不再触发——这是 GDPR 和国内《个人信息保护法》隐含要求

后端接收问卷数据时，Content-Type 和字段校验不能省

前端发过来的数据，后端不校验类型和长度，很快就会收一堆 null、空字符串、超长文本甚至 XSS 片段。

比如用户填「非常满意！！！！！???」，后端字段没设 max_length=200，数据库可能报错；又比如传了 score: "five"，但后端只接受整数，就会存成 NULL。

• 必须检查 Content-Type: application/json，拒绝 text/plain 或未设置类型的请求
• score 字段强制转为 int 并限定范围 1–5；feedback 做 XSS 过滤（至少 strip_tags() + htmlspecialchars()）
• 记录 user_agent 和 referrer，方便后续分析是 App 内嵌 WebView 还是 PC 浏览器提交，不同渠道的满意度分布常差很大

真实项目里最容易被跳过的，是「用户关闭弹层后的冷却期控制」和「后端对非数字 score 的强转处理」——这两个点一漏，数据质量当天就不可信。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！