如何创建可突破iframe限制的Domo返回按钮？

Domo的卡片资产默认嵌入在iframe中，你的返回按钮无法正常工作主要是代码存在语法错误，且没有正确调用顶层窗口的历史回退方法。以下是修正后的完整解决方案：

修正HTML代码 #

先修复a标签的语法错误（原代码中引号和逗号混用导致属性失效）：

<html>
  <head>
    <link rel="stylesheet" href="app.css" />
    <base target="_parent">
  </head>
  <body>
    <a id="back-button" href="#" target="_parent"><span>&#8592;</span> Back</a>

    <script src="app.js"></script>
    <script src="domo.js"></script>
  </body>
</html>

修正JavaScript代码 #

需要给按钮绑定点击事件，调用顶层窗口的历史回退方法，同时阻止a标签的默认跳转行为：

const backButton = document.getElementById("back-button");
backButton.addEventListener('click', function(e) {
  // 阻止a标签默认跳转，避免干扰回退逻辑
  e.preventDefault();
  // 调用顶层窗口的历史回退，突破iframe限制
  window.top.history.back();
});

核心要点 #

• window.top指向Domo的主页面（最顶层窗口），通过它调用history.back()才能实现真正的页面回退，而不是在iframe内部无效回退。
• 必须阻止a标签的默认行为，否则空链接的跳转会抵消回退操作。
• 确认Domo资产的权限设置允许子页面访问顶层窗口（默认配置支持，若有异常可检查资产的安全设置）。

内容的提问来源于stack exchange，提问作者Audris Torres