# iframe-sdk

[![mui version][mui-version-image]][mui-url]
[![owner][owner-image]][mui-url]

[owner-image]: https://img.shields.io/badge/owner-桐谷-blue.svg
[mui-version-image]: https://img.shields.io/badge/mui-4.2.26-blue.svg
[mui-url]: http://mui.tmall.net/detail/mui/iframe-sdk

核心功能是让iframe页面表现的像普通页面一样。主要功能：

- iframe页面和iframe标签高度同步，页面动态增高时，不会出现滚动条。
- 封装postMessageAPI，用简单的on和emit方式实现父子页面通讯

[ATA介绍](http://www.atatech.org/articles/60742)

已接入iframe-sdk的项目
- 国际供应链平台对接菜鸟
- 小电数码供应链平台对接菜鸟
- 供销对接零售通
- 供销对接新零售
- 直营供应链

### 快速开始
现在有一个container页面，需要在里面嵌套一个iframe页面：

#### iframe页面
```
<script src="//g.alicdn.com/mui/iframe-sdk/4.2.26/iframeSDK.umd.js"></script>
<script>
    iframeSDK.emit('自定义事件', {
      content: 'what ever~'
    })
</script>
```

#### container页面
```
<script src="//g.alicdn.com/mui/iframe-sdk/4.2.26/iframeContainerSDK.umd.js"></script>
<script>
  //Container需要初始化
  let container = new IframeContainerSDK({
    originFilter: () => true
  })
  container.on('自定义事件', data => {
    console.log(data)
  })
</script>
<iframe src="iframe页面url">
```

### CMD方式引入

```
//iframe script
var iframe = require('mui/iframe-sdk/index').iframe

//container script
var Container = require('mui/iframe-sdk/index').Container
```

### [高级用法](http://gitlab.alibaba-inc.com/mui/iframe-sdk/blob/master/doc/detail.md)