iframe与页面通信

最近在做公司项目的时候，要做一个视频播放器显示，由于公司集成开发了一个OCX控件，由于项目需要，得引入这个控件，但由于ocx控件需要引入object标签，类似flash控件，且ocx层级太高，基本上是在此窗口是最顶层，其他元素都会被它覆盖，故项目的很多对话框是基于当前窗口生出div的这种方法会被遮挡，如下图

image.png

此问题，想来想去有两种解决方法
1 用iframe模拟弹窗，iframe是类似新开窗口，它的层叠顺序是一层一层往上叠的，故iframe的层级是最高的，自然也就在ocx控件视图之上
2 iframe与div可以互相遮挡，先用iframe进行遮挡ocx控件视图，再进行div往上叠加遮挡iframe

先说第一种方法，此方法也是应用到项目中的
1 iframe显示：项目集成vue，将iframe插入页面，设置好一些基本样式，进行显示，如下代码，有个很关键的，要想iframe的层级更高，需要对其的position设置为absolute，z-index需要设置比当前更高，如2，还要设置top属性，设置完这iframe就可以显示在最高层了，之后根据自身的需要进行样式调整即可

image.png
image.png
2 iframe进行地址值引入：如上设置一个iframe可能你会发现没有任何内容显示，无论你是在iframe里面写多少html代码，是因为iframe是进行窗口引入的，需要引入一个地址，也就是说你需要将静态页面的地址进行引入到iframe内才能显示你想要的，也就是这一行
image.png
3 父页面传值进入iframe：当前vue项目决定我们只能引入静态页面，那么进行显示信息就需要传值进去iframe里面了，引入的iframe跟当前的页面可以说还在同一个大的作用域里面，当前页面的window上的变量iframe是可以取到的，根据这个特性，在进行iframe引入的时候，将要传的数据封装赋值到全局变量中，之后在iframe的作用域下进行取即可
当前页面下：
image.png
iframe进行取值：
itemInfo = window.parent.itemInfo;
当然这个方式不是动态的，如果当前页面有任何的数据改变，并不能立即通知到iframe窗口中，此时需要通过postMessage进行页面通信
4 postMessage窗口通信方式：当需要主页面动态向iframe窗口传递数据的时候，需要将要传递的数据，进行postMessage（具体使用方法自行百度）

而在iframe中取数据，需要监听message数据有没有传入进来，有的话进行获取
image.png
当然iframe进行传递数据给父页面，也需要进行postMessage一下，只是对象换成了它的父页面了，之后再父页面中监听message传入取到数据进行相应操作
image.png

最终效果如下：

image.png
image.png

注意： 使用iframe做模拟弹窗的时候，在IE下当设置的宽高比实际使用的宽高要多的时候，会出现一个背景色灰色的底色，没办法去除，可以说是IE给iframe自动添加了底色，此时需要开发者进行一点点像素去匹配，确定好实际使用的宽高，固定。而在火狐和谷歌下这种情况不存在

第二种方法
与第一种方法类似，讲下大体思路，就是将iframe设置好宽高固定好具体的位置，进行显示，再给于一个div叠加显示，div的z-index需要设置，位置也需要于iframe一样，显示后，当前的div可以不用这么麻烦用postMessage进行通信，但此方法最大的缺点就是显示的时候先显示底层的iframe，IE下像先有一个黑块，之后div才显示出来，用户体验不佳，所以最后项目也弃用了这种方法。