一个关于iframe需要注意的小问题
说实话,这是上个星期在开发中遇到的一个相当神奇的问题,
用Vue3做文件预览的时候(移动端),整体的一个需求是需要预览文件、预览视频、预览图片、当然文件就已经包括市面上常见的一些文件类型。
我们都知道，文件其实就是后端返回的url前端在做点击，前端点击后只能是下载在做观看,PC可能还好但是移动端就会显得不是那么友好,然后通过后端处理呢还是做到了可以直接预览的效果。
但是事情并没有结束,关于视频和图片我都是自己写的一套来实现的预览,但是文件那些因为都要转换成PDF预览而且还要打水印,所以就没办法只能去依赖后端来完成这一过程。所以这一套预览我是靠着标签iframe来解决的。
前期可能还好都是可以去看的,但是后面在第二次版本升级的时候，文件的预览性质变了，每个文件的预览加入了权限限制，也就是说预览的文件我都需要经过签名后才能观看,然后没办法，我只能把自己的写的图片和视频预览去搭载到后端提供的接口上来完成预览,(此时我还是嵌套的iframe)。问题到这里就出现了,因为后端在视频预览的时候使用的是第三方库来实现,但是一旦嵌入到iframe里面,视频文件就会显得格外的大，也就是不适应了，我当时的思路就是直接通过原生的方法赖获取到iframe里面的信息在做修改,也就是直接去修改iframe里面的元素 万万没想到就在这里出现了跨域的问题(同源政策),
"#document" 嵌入式的iframe会有一个这个属性在html上，要想要新修改里面的元素,就得拿到这个#document然后在用原生方法往里拿到自己想要修改的元素,
然后拿到了#document但是他下面就不会显示iframe的一些html信息,........ 真的就操作的很烦,然后又发现了一个可以解决的方式叫"postMessage" 这个方法需要在是iframe的界面里去写接受信息的方法,但是我这的iframe是后端返回的接口呈现的html....人家凭啥接收呢，最后就直接是最大化的那样展示了，因为无法拿到里面的元素。
其实解决方法也是有的就是让后端在写一套签名接口重新返回一段，我可以直接预览的url给到我,这样我就可以控制了,但是后端说要统一.....因为PC也在用预览的接口,就搞得我很难受...
希望看到这篇文章的朋友如果有很好的想法也可以推荐推荐，分享一个日常让开发者少踩一点坑。
