amis2/docs-old/renderers/iFrame.md
2020-07-28 10:03:53 +08:00

2.6 KiB
Raw Blame History

iFrame

如果需要内嵌外部站点,可用 iframe 来实现。

{
    "type": "iframe",
    "src": "raw:http://www.baidu.com",
    "height": 300
}

如何和 iframe 通信

amis 向 iframe 通信

在 iframe 页面中添加message事件监听器,在 iframe 初始化、更新或者接收到其他组件发送数据的时候,会通过 postMessage 发送当前数据域数据iframe 页面的事件监听器中可以通过e.data进行获取:

window.addEventListener('message', e => {
  // e.data 获取当前数据域数据,进行使用
});

e.data 格式及参数说明:

{
  "type": "amis:init", // 当前事件类型
  "data": {
    //... 当前数据域数据
  }
}
  • type: 当前事件类型
    • amis:init初始化的时候触发
    • amis:update组件更新时触发
    • amis:receive组件通过 target 接收到其他组件发送来数据的时候
  • data:当前数据源数据

如果是 webpack 开发环境,注意过滤掉webpackOk类型消息

iframe 页面向 amis 通信

  1. 首先在 amis 的 iframe 配置项中配置 events 对象,指明 iframe 需要触发的 amis 行为
{
  "type": "iframe",
  "src": "http://www.xxx.com",
  "events": {
    "detail": {
      "actionType": "dialog",
      "dialog": {
        "title": "弹框",
        "body": "iframe 传给 amis 的 id 是:${iframeId}"
      }
    }
  }
}

上面 events 对象中配置了detail事件,该行为会触发 amis 弹框行为,并在弹框中渲染"iframe 传给 amis 的 id 是:${iframeId}"这段模板。

那么要如何触发该事件和传递数据呢?

  1. iframe 页面中,获取父级 window并使用postMessage传递数据,格式如下,:
window.parent.postMessage(
  {
    type: 'amis:detail',
    data: {
      iframeId: '111'
    }
  },
  '*'
);

message格式:

  • type: 标识要触发的 amis 行为,请使用 amis:xxx 的格式,这里我们设置为配置好的detail事件
  • data: 传给 amis 的数据amis 会将该数据与当前数据域进行合并进行使用

这样 amis 弹框中就会渲染内容:iframe 传给 amis 的 id 是111

设置高度自适应

默认 amis 中只支持给 iframe 配置固定高度,我们可以通过上面说到的通信机制实现高度自适应。

  1. 首先在 iframe 页面中获取到页面高度
  2. 通过amis:resize事件,将高度信息发送给 amis
window.parent.postMessage(
  {
    type: 'amis:resize',
    data: {
      height: 400
    }
  },
  '*'
);

这样就可以动态设置 iframe 组件高度