打开链接

概述

在客户端打开一个URL地址

参数配置

参数	说明
打开方式	链接打开的展示方式。支持在应用内打开，在新窗口打开，在当前页面打开，在弹窗打开
地址	打开的链接地址。可使用表达式获取上下文变量指定动态内容
标题	打开方式为在弹窗打开时，弹窗的标题，可使用表达式获取上下文变量指定动态内容
距顶距离	打开方式为在弹窗打开时，显示对话框距顶距离。可使用表达式获取上下文变量指定动态内容
宽度	打开方式为在弹窗打开时，显示对话框的宽度。可使用表达式获取上下文变量指定动态内容
高度	打开方式为在弹窗打开时，显示对话框的高度。可使用表达式获取上下文变量指定动态内容
隐藏关闭按钮	打开方式为在弹窗打开时，隐藏打开弹窗的关闭按钮
允许点击背景遮罩关闭窗口	打开方式为在弹窗打开时，允许点击背景遮罩关闭窗口
允许按下 ESC 关闭窗口	打开方式为在弹窗打开时，允许按下 ESC 关闭窗口
交互执行	打开方式为在弹窗打开时，打开的网站页面是否具有用户交互能力

返回值

参数	类型	说明
返回值	Object	页面设置的返回值，此返回值仅在开启交互且网站页面调用设置返回值后才能获得

使用说明

隐藏关闭按钮后，页面的关闭，可调用平台提供的跨Iframe调用关闭。可参考
javascript
```
systemService.close();
```
开启交互执行后，页面向平台传递数据后，恢复自动化执行。data需要为对象类型数据
javascript
```
systemService.payload(data);
```

使用场景

个性化渲染平台内的表单数据，表单填写完成提交后恢复调用自动化
调用自动化切换数据后，重新打开当前页面刷新数据

使用示例

在应用内打开

注意事项

使用系统路由打开链接，此种方式不会刷新整个页面。地址仅支持使用相对路径。

变量	表达式
地址	/app/${Context.appId()}/table/re2j3n7lkyzm6

在新窗口打开

注意事项

地址仅支持使用相对路径和全路径。使用相对路径时，系统将自动使用当前地址栏信息作为地址前缀

变量	表达式
相对路径地址	/app/${Context.appId()}/table/re2j3n7lkyzm6
全路径地址	${Misc.host()}app/${Context.appId()}/table/re2j3n7lkyzm6

在当前页面打开

注意事项

地址仅支持使用相对路径和全路径。使用相对路径时，系统将自动使用当前地址栏信息作为地址前缀

变量	表达式
相对路径地址	/app/${Context.appId()}/table/re2j3n7lkyzm6
全路径地址	${Misc.host()}app/${Context.appId()}/table/re2j3n7lkyzm6

在弹窗打开

注意事项

地址仅支持使用相对路径和全路径。使用相对路径时，系统将自动使用当前地址栏信息作为地址前缀

变量	表达式
相对路径地址	/app/${Context.appId()}/table/re2j3n7lkyzm6
全路径地址	${Misc.host()}app/${Context.appId()}/table/re2j3n7lkyzm6

典型使用示例

假定我们需要这样一个场景，自动化打开一个我们自行编写的表单页面，用户填写完成后在自动化内获取用户提交的表单数据。这里需要我们了解平台通过Iframe方式嵌入第三方页面时，被嵌入页面与平台页面实现数据交互实现方式。

示例实现

html


<html>

<head>
  <title>用户表单</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
  <style>
    * {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }

    .form {
      padding: 20px 10px;
    }

    .form-item {
    }

    .form-item input {
      height: 32px;
      width: 100%;
    }

    .form-item + .form-item {
      margin-top: 15px;
    }

    .form-item-label {
      margin-bottom: 10px;
    }

    .form-submit-button {
      height: 32px;
      width: 44%;
      cursor: pointer;
    }

    .form-submit-button + .form-submit-button {
      margin-left: 10%;
    }
  </style>
</head>

<body>
<form id="form" action="#" class="form">
  <div class="form-item">
    <div class="form-item-label">
      姓名
    </div>
    <div class="form-item-content">
      <input name="name" placeholder="请输入姓名" required/>
    </div>
  </div>
  <div class="form-item">
    <div class="form-item-label">
      地址
    </div>
    <div class="form-item-content">
      <input name="address" placeholder="请输入地址" required/>
    </div>
  </div>
  <div class="form-item" style="margin-top: 40px">
    <button id="cancel" class="form-submit-button" type="button">取消
    </button>
    <button class="form-submit-button" type="submit">提交
    </button>
  </div>
</form>
</body>

<script src="/js/postmessage-rpc.js"></script>
<script src="/js/rpc.js"></script>
<script>
  var form = document.getElementById('form');
  var cancelBtn = document.getElementById('cancel');
  form.addEventListener('submit', function (e) {
    event.preventDefault();
    const formData = new FormData(form);
    systemService.payload({
      name: formData.get('name'),
      address: formData.get('address')
    }).then(function () {
      systemService.close();
    });
  });
  cancelBtn.addEventListener('click', function () {
    systemService.close();
  });
</script>

</html>

打开链接 ​

概述 ​

参数配置 ​

返回值 ​

使用场景 ​

使用示例 ​

在应用内打开 ​

在新窗口打开 ​

在弹窗打开 ​

典型使用示例 ​

示例实现 ​

打开链接

概述

参数配置

返回值

使用场景

使用示例

在应用内打开

在新窗口打开

在弹窗打开

典型使用示例

示例实现