iframe组件是网页设计中的一个常见元素,可通过配置URL地址,将站点外的内容纳入到页面中。本文介绍iframe组件的详细配置方法。

步骤一:添加组件

  1. 创建Web应用。具体操作,请参见创建Web应用
  2. 在Web应用编辑器中,单击最左侧的组件图标组件
  3. 在画布左侧组件列表上方,输入iframe,找到该组件,然后将组件拖拽到中间画布。

    有关组件添加的更多信息,请参见添加组件

    iframe组件

步骤二:配置数据源

  1. 在右侧样式中,单击关联链接对应配置
  2. 在配置链接面板中,配置组件展示内容要关联的URL地址。
    配置链接
    配置项说明
    链接内容URL地址,可配置为静态数据或动态数据(页面变量、组件值或URL参数)。
    • 页面变量:选择在当前应用中,已创建的页面变量作为参数值来源。创建页面变量,请参见页面变量管理
    • 组件值:选择当前应用中,已配置的表单组件作为参数值来源。
    • URL参数:以组件所属应用最终发布页面的URL地址中的某个URL参数(key=value)作为此处的URL参数。配置URL来源时,URL参数与key一致,页面运行时,链接内容会自动获取页面中对应URL参数的value值。
    URL参数可选配置。单击URL参数可添加URL参数键值对。支持配置参数来源页面变量、组件值、URL参数和登录账号。页面变量和组件值说明参见配置项链接内容的描述。
    • URL参数:鼠标指针移动到URL参数右侧的帮助图标,可查看URL键值对配置说明。

      如果选中自动更新复选框,当参数变化时,数据源更新。如果不选中此项,您可以通过交互动作触发数据源更新。

    • 登录账号:在开启应用账号鉴权的情况下,配置数据分析服务自定义接口服务开发工作台接口时,可以选择登录的账号信息做为请求参数,以完成一些界面或功能的定制需求。使用方法请参见账号数据

步骤三:配置样式

  1. 在右侧样式中,设置是否显示组件边框。
    如果显示边框,可设置边框粗细、颜色和样式,且3个配置项均支持配置数据源,可选设备接口。其中,颜色仅支持配置接口数据源。

    不同配置项支持的数据格式不同,数据源返回数据需与要求的数据格式保持一致。

    配置项数据格式
    颜色RGB颜色的JSON格式。
    {
      "r": 255,
      "g": 255,
      "b": 255
    }

    或者

    {
      "r": 255,
      "g": 255,
      "b": 255,
      "a":0
    }
    说明 其中a表示颜色透明度,取值范围为0~100。
    粗细 整数,取值范围为0~100。
    样式 整数,取值范围为0~2。

    对应线样式的映射关系为(同下拉列表顺序):

    • 实线:0
    • 虚线:1
    • 点线:2
  2. 调整组件在页面中的最终位置。有关组件通用样式配置的更多信息,请参见样式配置

步骤四:配置交互动作

  1. 选中组件的交互页签,配置事件和交互动作。具体操作请参见交互配置
    例如,iframe的页面加载完成,执行动作调用其他服务,配置服务接口,实现接口调用获取数据。
  2. 单击页面右上方的预览,预览和调试组件展示的数据和效果。