# IFrame 嵌套页面
标准 iframe 组件，用于嵌入其它页面
* 嵌入页面 [iframe](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe)
* 跨页面通信 [postMessage](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage)
```js
import { IFrame } from 'amos-framework';
```
## 案例演示
### 基本使用
---demo
```js
import { IFrame } from 'amos-framework';
ReactDOM.render((
), _react_runner_);
```
---demoend
### 启用加载动画&页面间通信
---demo
```js
import { IFrame, NestedSpin, Spin } from 'amos-framework';
class Demo extends Component {
constructor(props) {
super(props);
this.state = {
loading: true
};
}
handleMessage = (data) => {
console.log(data);
if (data.loaded){
this.setState({
loading: false
});
}
}
handleCreated = (ifrDoc, ifr) => {
this.ifrDoc = ifrDoc;
this.ifr = ifr;
// 主窗口向iframe窗口发送信息
// this.ifr.contentWindow..postMessage('from main window', '*');;
}
handleLoaded = () => {
const me = this;
const loading = me.ifrDoc.getElementById('startload');
loading && loading.remove();
}
render() {
return (
}
>
);
}
}
ReactDOM.render(, _react_runner_);
```
---demoend
- test.html
```html
测试
```
## props
| params | type | default | description |
|--------- |-------- |--------- |-------- |
| url | String | - | 页面地址,设置应被加载到框架中的文档的 URL |
| id | String | - | html attr id |
| className | String | - | 自定义样式名 |
| width | `String or number` | `100%` | 定义 iframe 的宽度。 |
| height | String | `100%` | 规定 iframe 的高度。 |
| position | String | `absolute` | 定位属性 |
| display | String | `block` | display 属性 |
| name | String | '' | 规定 iframe 的名称，设置框架的名称 |
| allowFullScreen | bool | false | display 属性 |
| target | String | `_parent` | target 属性 |
| frameBorder | number | 0 | 设置是否显示框架周围的边框 |
| scrolling | string | `no` | 设置框架是否可拥有滚动条。 可选值 `yes, no, auto` |
| onCreated | `func: (ifrDocumemt, ifr) => {}` | - | 组件加载完成之后的回调 |
| onMessage | `func: (data) => {}` | - | 接收消息，仅接收 `type='af-iframe'` 类型数据 |
| onLoaded | `func: (evt, ifr)` | - | iframe 页面 onLoad 回调 |
