内嵌菜单开发规范-菜单管理-有人云

#### 概述
第三方页面的引用目前主要通过iframe嵌套页面展示，我们需要提前知道iframe中页面的实际高度来初始化包裹iframe的外层dom容器的高度，否则，iframe中可能会出现滚动条，外层窗口也可能会出现滚动条。若iframe的url与引用窗口不在同一主域下，由于跨域限制策略的影响，外层获取不到iframe中的信息，因此，我们采用postMessage的方式来进行跨域通讯，我们提供的UsrPostMessage文件主要包含对主窗口的问答回应和主动上报等方法。

#### 下载文件
<a href="http://cloud.usr.cn/Public/home/js/UsrPostMessage.js" download>UsrPostMessage.js</a>
<a href="http://cloud.usr.cn/Public/home/js/detect-element-resize.js" download>detect-element-resize.js</a>

#### 文件使用
JS文件遵循UMD规范，因此您可以通过如下方式引入：

- S6模块化方式引入
```
import UsrPostMessage from 'UsrPostMessage.js'
let upm = new UsrPostMessage()
```
- script 标签方式引入
```
<script src='UsrPostMessage.js'></script>
var upm = new UsrPostMessage()
```
- 同时在header中引入“detect-element-resize.js”文件

#### 内嵌页面使用方法
- 主动上报页面高度
```
//参数说明
key[String]: 一个唯一字符串，这与事先存储的key：url 一一对应。
data[Object]:
data.height [Number]: 调用此方法时所在页面的实际高度。
//使用方法
upm.postSize('key',{
height: 500
})
```
- 通知主窗口进行路由切换
```
//参数说明
key[String]: 一个唯一字符串，这与事先存储的key：url 一一对应。
data[Object]:
data.name [String]: 需要跳转到的路由名称
data.query [Object]: 路径参数
//使用方法
upm.postRouteInfo('key',{
  name: 'ViewDeviceList',
  query: {name: 'test'}
})
```

- 通知主窗口弹窗提示
```
//参数说明
key[String]: 一个唯一字符串，这与事先存储的key：url 一一对应。
data[Object]: 与elementUI的原型方法 $message 方法保持一致。
tokenFaild[Boolean]：可选，token是否校验失败,true: 主工程会退出当前登录
//使用方法
upm.postRouteInfo('key',{
  type: 'warning',
  message: 'somethoing was wrong'
})
upm.postRouteInfo('key',{
  type: 'warning',
  message: 'token faild'
},true)
```

#### 与第三方插件开发者的相关约定
- 当使用主工程的默认样式时（如无特殊通知，此为默认设置），每个tab页对应一个url，我们会在主工程目录下主动向UsrPostMessage发起问询，后者会返回我们所需的数据，无需第三方开发者关心。
- 当样式和tab页（或当前路由的子路由）的切换交给iframe内部自己实现时，有两种情况:
	- 当前路由无其它子路由。主工程窗口会主动问询，子窗口的UsrPostMessage自动应答，无需第三方开发者关心。
	- 当前路由有其它子路由。这时我们需要开发者在每一个页面完全渲染出之后立即计算出页面的高度并通过postMessage方法发送到主窗口，由此我们就可以对外层的包裹容器进行初始化。