<iframe> 标签
一、作用：可以将一个网页页面通过iframe嵌入到另一个网页页面中；
二、基础属性：
width: 规定<iframe>的宽度；
height:规定<iframe>的高度；
name:规定<iframe>的名称；
marginheight:规定<iframe>的顶部和底部边距；【HTML5不支持】
marginwidth:规定<iframe>的左侧和右侧边距；【HTML5不支持】
src:规定被嵌入当前页面的子页面地址【*tip:src中被嵌入的子页面地址要和父页面的地址是同源的，否则，会打不开子页面】；
以上这些基础数据是常用的，剩余的一些属性如果项目需要，可以去网上查询；
三、<iframe> 页面之间的数据通信
其实分享iframe的数据传递，主要是因为，我在开发地图图层的下钻页面的时候，遇到了这样一个问题；
1、场景：当点击某个地图点位的时候，会通过iframe嵌入打开一个对应的后台管理的表格页面，记录该点位中对应的一些信息。再点击该表格中的某条信息的时候，还需要打开一个弹窗显示该表格中的某条信息的详情页面；
2、问题：当点击表格中的查看时，这个操作相当于是在后台管理的页面中的交互，如果，详情是个可移动的弹窗，会发现这个弹窗无法移出子页面；
3、弹窗无法移出子页面的原因：因为，通过iframe嵌入的子页面，其实也是一个完整的页面，它也有自己的window、document等内容。父页面iframe设置的宽高是多少，就相当于子页面的屏幕大小是多少，简单来说iframe就相当于是子页面的显示器；所以，子页面中的弹窗无法移出iframe设置的宽高；
4.怎么让子页面的详情弹窗，不受iframe的限制，能在父页面中正常拖拽移动：
我的想法是在后台管理里给有弹窗的详情页面设置路由。在后台管理里还是以弹窗的形式展示详情页面，但是，当在地图中点击 "查看" 时，将详情页面的路由拼接域名，以及要传的值，通过iframe的数据通信，传到父页面中，父页面再通过一个弹窗包裹iframe在父页面中显示详情页面的内容即可；
5.iframe中的数据通信
（1）父页面传值给子页面
① 先获取有子页面src地址的iframe标签的dom
--- 可以通过<iframe $ref="iframe">绑定;
--- 在js中通过 let iframeDom = this.$refs.iframe //获取到iframe的dom
--- 通过 let _window = iframeDom.contentWindow // 获取到被嵌套子页面的window对象
--- 通过 _window.postMessage("传给子页面的值"，"规定子页面的地址，如果为*则所有的地址都可以接收传的值")
--- 子页面需要在mounted钩子函数中通过
window.addEventListener("message"，(e)=>{ console.log(e.data) })//通过事件监听window的message事件，参考上述写法用e.data 获取到父页面传过来的值；
--- 【*tip】注意：这里在父页面传值的时候有个坑，如果，你按上述的方式传值的话，子页面在通过window.addEventListener("message")监听message事件的时候，首次打开子页面的时候，会自动触发一次该事件的监听
打印的内容为：{type:"webpackOk",data:undefined}，这是因为，我们的项目是通过webpack跑的，所以，首次通过window.addEventListener("message")监听message事件的时候，会自动触发一次；
处理这种情况，你可以在通过window.postMessage传值的时候，给第一个值以一种对象的方式传过去，对象中定义一个type。接收的页面在接收的时候，通过判断type的值，来接收所传的值，以及接受值后的一些逻辑处理；
例如： 父页面传值： window.postMessage({type:fromParent; value:"父页面传的值" }, "*")
子页面接收值: window.addEventListener("message",e=> { if(e.data.type === "fromParent"{ console.log(e.data.value ) })});
(2)子页面传值给父页面
其实子页面传值给父页面也是通过window的postMessage方法实现的，不过，这里要多考虑的一个地方是，当嵌套了几层的iframe页面的时候，我是要把值直接传给最外层页面，还是上一层页面。如果，要是传给上一层页面可以用window.parent.postMessage({type:"toParent",value:"子页面传的值"}, "*") 的方法传给上一层页面，如果想直接传给最上层的页面可以用：window.top.postMessage({type:"toTop",value:"下级页面传的值"}, "*") ，接收的页面同样也是在mounted中通过window.addEventListener() 接收；
