iframe组件是网页设计中的一个常见元素,主要用于将站点外的内容纳入到页面中,支持配置样式和交互动作。本文介绍iframe组件的配置和使用方法。

前提条件

参考以下操作完成Web应用创建。
  1. 创建普通项目
  2. 创建Web应用

操作步骤

本文主要介绍组件样式的个性配置。有关组件样式的通用配置,请参见样式配置

  1. 在Web可视化编辑页面,单击最左侧的组件图标组件
  2. 在画布左侧组件下拉列表,选择基础组件,并展开基础列表。
  3. 拖拽一个iframe组件到画布中,单击右侧样式关联数据对应配置
    iframe组件
  4. 在配置链接面板中,配置组件展示内容要关联的URL地址。
    配置链接
    配置项 说明
    链接内容 URL地址,可配置为静态值、变量、组件值或URL参数。
    • 变量:选择在当前应用中,已创建的变量作为参数值来源。创建变量,请参见变量管理
    • 组件值:选择当前应用中,已配置的表单组件作为参数值来源。
    • URL参数:以最终发布页面上的某个参数作为该接口的请求参数值。常用于嵌入页面时,由宿主页提供动态参数,如将传入的产品型号作为当前接口的请求参数。
    URL参数 可选配置。单击URL参数可添加URL参数键值对。支持配置参数来源变量、组件值、URL参数和登录账号。

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

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

    鼠标移动到URL参数右侧的帮助图标,可查看URL键值对配置说明。

  5. 设置是否显示组件边框。
    默认显示,支持设置边框粗细、颜色和样式。

    颜色支持绑定接口数据源进行使用,粗细和样式支持绑定设备和接口数据源进行使用。

    • 颜色:支持的数据格式为RGB颜色的JSON。

      格式如下:

      {
        "r": 255,
        "g": 255,
        "b": 255
      }

      或者

      {
        "r": 255,
        "g": 255,
        "b": 255,
        "a":0
      }
      说明 其中a表示颜色透明度,取值范围为0~1。
    • 粗细:支持的数据格式为整数(1~100)。
    • 样式:支持的数据格式为整数(0~2),其中映射关系为(同下拉列表顺序):
      • 实线:0
      • 虚线:1
      • 点线:2
    说明 有关设备和接口数据源的详细配置操作,请参见接口设备
  6. 可选:在Web可视化编辑页面,选中目标组件的交互页签,配置事件和交互动作。详细配置指导请参见交互配置
  7. 单击页面右上方的预览,查看或调试组件的展示数据。