监听到iframe发送的成功消息后如何实现父页面重定向？

你需要在现有message事件回调逻辑中补充可信来源校验、成功消息匹配和跳转逻辑即可实现需求，注意必须加来源校验避免恶意站点发送伪造消息触发不安全跳转。

完整修改后代码 #

<script>
document.addEventListener('DOMContentLoaded', function () {
  // 替换为你实际要跳转的目标地址
  const REDIRECT_URL = 'https://website.com/successful'
  // 替换为你嵌入的iframe对应的可信域名，比如iframe加载的是xxx.com的页面就填https://xxx.com
  const TRUSTED_ORIGIN = 'https://你的iframe实际域名'

  window.addEventListener('message', function (e) {
    // 非可信来源直接终止逻辑，规避安全风险
    if (e.origin !== TRUSTED_ORIGIN) return

    const data = JSON.parse(e.data);
    console.log(data.message);

    // 匹配到成功消息后触发父页面跳转
    if (data.message === 'Successful') {
      window.location.href = REDIRECT_URL
    }
  });
});
</script>

补充的核心逻辑说明 #

• 新增了可信域名校验：过滤所有非iframe所属域名发送的消息，避免安全漏洞
• 新增了消息匹配逻辑：当收到的消息内容为Successful时触发跳转
• 使用window.location.href实现父页面的重定向操作

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