---------1 场景
***在当前项目里调用子页面(iframe)里面的方法 , iframe是一个 ppt页面 ，里面暴露出了ppt切换到下一帧的方法
***简单介绍一下项目 ，这是一个在线授课的项目 当前这个页面是学生端听课页面 ， 老师授课时 切换ppt至下一帧 ， 学生端调用iframe里的方法同步切换(通过socket链接)
---------2 环境
***iframe页面已经部署到服务器上 （ppt 地址）
***当前项目还在本地开发
---------3 接下来就是调用iframe以及iframe里面的方法了
//ppt的相关操作pptSyncAnim(current){let currentArr = current.split(',');//ppt帧动画切换 syncAnim 是ppt页面暴露出来的方法 ， 接收一个当前帧参数//pptIframe 是iframe的name值window.pptIframe.syncAnim(currentArr[3][0]); }
调用iframe里的方法报错 ，报错原因是因为 不能再跨域的情况下调用iframe 里的方法，本地项目在8000端口上,而iframe已经部 署在服务器环境下 ，所以我在本地就没办法调试
为了解决这个问题，使用了nginx代理，把本地项目 和iframe页面代理到同样的域 ，同样的端口下，这样就能解决跨域的问题 ，我在本地也就能开始调试 。 (ps: 其实h5的window.postmessage可以不受跨域影响，但是得改变iframe源码 ，所以我选择放弃了，这个iframe页面有其他端在调用 ， 已经统一了一套传输方案 )
---------4 nginx代理
mac 安装nginx以及基本命令
输入 nginx -V (可以查看到nginx安装路径)
输入 vi /usr/local/etc/nginx/nginx.conf (修改nginx配置文件 ，nginx安装位置得先找到)
输入 i (开始修改)
说明：
nginx启动在80端口
location里配置转发 ， 请求 localhost:80/的时候会转发到 localhost:8000（我的本地项目），请求localhost:80/ 会转发到我的iframe项目上 ， 这样两个项目都启动在localhost 80上 ， 就不存在跨域的问题了
server {listen 80;server_name localhost;location / {proxy_pass http://localhost:8000;}location /ppt {proxy_pass /t/mizhu/web/course/previewPpt;}#charset koi8-r;#access_log logs/host.access.log main#error_page 404 /404.html;# redirect server error pages to the static page /50x.html#error_page 500 502 503 504 /50x.html;location = /50x.html {root html;}
依次按下esc :wq 保存nginx配置
启动nginx服务
sudo nginx
---------5 修改iframe src地址为localhost:80后 ，就不会出现错误了 ，本地也能开心的调试了
<div className="boardCantainer"><canvas ref='canvas'></canvas>{boardType == 2 && <div className={'ppt'}><iframe name='pptIframe' src={`http://localhost:80/ppt${_ppt[currentInPage.index - 1].board.ppt.slice(_ppt[currentInPage.index - 1].board.ppt.indexOf('?'))}`}></iframe> </div>}</div>
