iframe

介绍

iframe 组件允许将外部页面嵌入到当前页面中。

API

Props

参数名	描述	类型	默认值
url	地址。指定要嵌入的网页地址	string	-
autoHeight	自定义高度。嵌入内容在页面中的显示高度	boolean	false
baseStyle	自定义样式	string	-
customClass	类名绑定	string	-
opacity	不透明度 , 布局容器背景色透明度	string	-
display	显示,设置组件的显示布局模式	Display	-
boxStyle	盒模型 ， margin,border,padding 设置	BoxStyle	-
background	背景样式	Background	-
boxShadow	阴影	BoxShadow	-
uniqueKey	唯一标识 , 组件的唯一标识	string	-
loop	循环数据 , 循环渲染设置	Loop	-

Events

事件名	描述	参数
onIframeLoaded	iframe 挂载完成后调用	ctx:PangeaContext

注意:

如需触发onIframeLoaded事件，需在嵌入页面中执行window.parent.postMessage("onIframeLoaded","*")

Methods

方法名	描述	参数	返回值
postMessage	主动向嵌入页面发送数据	any	-

Type

//样式-显示
type Display = {
  type:"block"|"inline-block"|"inline"|"flex",
  // type选择flex可配置以下属性
  flex:{
    flexDirection:"row"|"column"|"row-reverse"|"column-reverse",
    alignItems:"flex-start"|"center"|"flex-end"|"stretch"|"base-line",
    justifyContent:"flex-start"|"center"|"flex-end"|"space-between"|"space-around"
  }
}

// 盒模型
type BoxStyle = {
  "marigin": [string|string|string|string],
  "border": [string|string|string|string],
  "padding": [string|string|string|string],
}

// 背景样式
type Background = {
  "color": string,
  "size": "cover"|"contain"|"length"
  "width": {
    "unit": "px"|"%",
    "value": number
  }
  "height":{
    "unit": "px"|"%",
    "value": number
  }
}

// 阴影
type BoxShadow = {
  "color":string,
  "hShadow":string,
  "vShadow":string,
  "blur":number,
}

// 循环
type Loop = {
  "data": any[],
  "paramName": string,
  "indexName": string,
  "key": string
}

// 循环变量数据参数
type LoopParams = {
  "indexName":string,
  "paramName":string,
  "ref":ComputedRefImpl, // 全部的循环变量数据
  "row":any,
  "rowIndex":number
}[]

常见场景配置

向嵌入页面发送数据

1. 在iframe挂载完成后调用事件中，执行以下方法：

ctx.triggerEvent(key, "postmessage", data);

其中key为iframe组件的唯一标识，data为要发送的数据。

2. 在接收数据的页面中，执行以下方法接收数据：

window.parent.postMessage("onIframeLoaded", "*");
window.addEventListener("message", function (event) {});

其中event为接收的的数据。