Vue.js站点如何检测iframe内表单提交成功并跳转至感谢页

父页面直接绑定iframe内部表单的onsubmit、onload回调无效，绝大多数是浏览器跨域安全限制导致：父页面默认无权访问跨域iframe的内部DOM与事件，需要根据你是否能控制内嵌表单的源码选择对应方案：

场景1：可控制iframe内嵌表单的源码（最稳定方案） #

推荐使用父子页面postMessage通信实现状态同步，步骤如下：

• 第一步：在iframe内嵌表单的提交成功逻辑中，向父页面发送状态通知，生产环境建议将第二个参数替换为父页面的实际域名提升安全性

// 内嵌表单提交成功后的回调逻辑中添加
window.parent.postMessage({ type: 'FORM_SUBMIT_SUCCESS' }, '*')

• 第二步：Vue父页面监听message事件，匹配到提交成功通知后跳转感谢页，记得在页面销毁时移除监听避免内存泄漏

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
// 替换为你的iframe实际部署域名，用于安全校验
const IFRAME_ORIGIN = 'https://你的iframe部署域名.com'

const handleMessage = (e) => {
  // 校验消息来源，避免恶意消息触发跳转
  if (e.origin !== IFRAME_ORIGIN) return
  if (e.data?.type === 'FORM_SUBMIT_SUCCESS') {
    router.push('/thank-you')
  }
}

onMounted(() => {
  window.addEventListener('message', handleMessage)
})

onUnmounted(() => {
  window.removeEventListener('message', handleMessage)
})
</script>

场景2：无法控制iframe内嵌表单的源码 #

方案A：监听iframe load事件判断路径特征 #

如果iframe与父页面同域，可直接在load回调中获取iframe跳转路径判断提交状态：

<template>
  <iframe 
    ref="formIframe" 
    src="内嵌表单地址"
    @load="handleIframeLoad"
  ></iframe>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const formIframe = ref()
const router = useRouter()

const handleIframeLoad = () => {
  const iframeHref = formIframe.value.contentWindow.location.href
  // 替换为你实际的表单提交成功页路径特征
  if (iframeHref.includes('submit-success')) {
    router.push('/thank-you')
  }
}
</script>

如果是跨域场景，可结合业务特征做模糊判断：比如用户完成表单平均需要30秒以上，那么页面加载30秒后触发的iframe load事件，就可以判定为表单提交成功触发的跳转，该方案存在一定误差，可根据自身业务场景调整判断规则。

方案B：服务端回调配合轮询 #

如果表单提交后会给你的业务后端发送提交通知，可以在父页面开启短轮询，定时请求后端查询当前用户的表单提交状态，收到已提交的返回后跳转感谢页。

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