已落地的多种项目形式
- 富文本编辑器-结合业务的输出
- 公式编辑器
跨部门团队协作
- XXX-客户端,嵌入iframe
- 报告对接
- 中台系统-业务模块输出
什么时候用?怎么用?
基础点
iframe
hack
- 基于iframe的src,提供下载资源功能
通信
postMessage
- https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
线上问题处理
CSP
- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
- Specifies valid parents that may embed a page using ,
1 |
|
nginx
如果一个域名xxx.xxx.xxx /abc/ 路径下部署了前端服务
- iframe 里面嵌入 xxx.xxx.xxx/abc
- 如果是xxx.xxx.xxx/abc 会被重定向,nginx , 这样会有问题,请求https,会被转为http
- Nginx 内部重定向规则会被启动,例如,当 URL 指向一个目录并且在最后没有包含“/”时,Nginx 内部会自动的做一个 301 重定向
- 需要xxx.xxx.xxx/abc/ ,这样才能匹配到,从而不被重定向
视频自动播放问题
https://developer.chrome.com/blog/autoplay/#iframe-delegation
如果是跨域的站点,又希望能自动播放,需要再加上这个属性