Banno Garden外部应用示例：Experian卡片返回链接处理及示例问询

以下是该卡片从触发跳转外部应用到返回Dashboard的完整实现逻辑：

1. 前端卡片结构 #

<div class="experian-card dynamic-card">
  <div class="card-body">
    <h3>Experian信用报告预览</h3>
    <p>当前信用评分：780</p>
    <button id="view-more-btn">View More</button>
  </div>
</div>

2. View More触发外部应用逻辑 #

点击按钮唤起外部应用，并存储当前Dashboard状态，用于返回时恢复体验：

document.getElementById('view-more-btn').addEventListener('click', () => {
  // 通过自定义协议唤起外部Experian应用
  window.open('experian://credit-report', '_blank');
  // 存储Dashboard当前滚动位置等状态
  sessionStorage.setItem('dashboard-session', JSON.stringify({
    scrollPosition: window.scrollY,
    activeTab: 'financial'
  }));
});

3. Back to Dashboard返回逻辑（外部应用侧） #

外部应用菜单中的返回按钮，通过应用内路由跳转回Dashboard，并恢复之前的状态：

// 外部应用内返回按钮的点击事件
document.getElementById('back-btn').addEventListener('click', () => {
  // 跳转回Garden测试应用的Dashboard页面
  window.location.href = '/dashboard';
  
  // 页面加载完成后恢复之前的状态
  window.addEventListener('load', () => {
    const savedSession = JSON.parse(sessionStorage.getItem('dashboard-session'));
    if (savedSession) {
      // 恢复滚动位置
      window.scrollTo(0, savedSession.scrollPosition);
      // 激活之前的标签页
      document.querySelector(`.tab[data-tab="${savedSession.activeTab}"]`).click();
      // 清除存储的状态
      sessionStorage.removeItem('dashboard-session');
    }
  });
});

4. 内嵌iframe场景的替代方案 #

如果外部应用是通过iframe嵌入在卡片内，返回逻辑可通过跨页面消息通信实现：

// 外部应用内的返回按钮逻辑
document.getElementById('back-btn').addEventListener('click', () => {
  // 向父页面（Dashboard）发送返回指令
  parent.postMessage({ action: 'return-to-dashboard' }, window.location.origin);
});

// Dashboard页面监听消息并处理
window.addEventListener('message', (event) => {
  if (event.data.action === 'return-to-dashboard') {
    // 隐藏iframe容器，显示Dashboard内容
    document.getElementById('external-app-iframe').style.display = 'none';
    document.getElementById('dashboard-content').style.display = 'block';
    // 恢复之前的状态
    const savedSession = JSON.parse(sessionStorage.getItem('dashboard-session'));
    if (savedSession) {
      window.scrollTo(0, savedSession.scrollPosition);
      sessionStorage.removeItem('dashboard-session');
    }
  }
});

核心工作机制总结 #

• 动态卡片通过前端交互触发外部应用唤起，同时持久化当前Dashboard的用户状态
• 返回链接通过应用内路由跳转或跨页面消息通信，回到Dashboard并恢复之前的用户上下文
• 整个流程的核心是状态的存储与恢复，保证用户在往返过程中的体验连贯性

内容的提问来源于stack exchange，提问作者Jarrod Marshall