如何通过JavaScript检测iframe中嵌入的MS Form是否已提交？

由于浏览器的跨域安全策略，直接访问iframe内MS Form的DOM或状态完全不可行，以下是两种可落地的解决方案：

1. 利用MS Form提交后跳转+postMessage（推荐） #

这是最可靠的方案，完全避开跨域限制：

• 在MS Form的设置中，找到「提交后显示」选项，选择「跳转到网页」，设置一个和你的培训页面同域的空白页面（比如form-submitted.html）
• 在这个同域跳转页面中，添加代码向父页面发送提交完成的消息：

  window.onload = () => {
    // 替换为你的培训页面域名，限制消息接收范围
    window.parent.postMessage('form_submitted', 'https://your-training-site.com');
  };
  

• 在你的培训父页面中，监听message事件，收到消息后启用下一页：

  window.addEventListener('message', (event) => {
    // 验证消息来源，防止恶意消息
    if (event.origin !== 'https://your-training-site.com') return;
    if (event.data === 'form_submitted') {
      // 执行启用下一页的逻辑
      document.getElementById('next-btn').disabled = false;
    }
  });
  

2. 针对自有表单的API轮询方案（仅适用于你创建的表单） #

如果这个MS Form是你自己创建的，可以通过Microsoft Graph API实现，但存在局限性：

• 需要用户通过OAuth授权你的应用访问其MS Form数据
• 轮询表单的响应列表，判断当前用户是否已提交：

  // 示例：通过Graph API查询表单响应（需提前获取accessToken）
  async function checkFormSubmission(formId, userId) {
    const response = await fetch(`https://graph.microsoft.com/v1.0/forms/${formId}/responses`, {
      headers: { Authorization: `Bearer ${accessToken}` }
    });
    const data = await response.json();
    return data.value.some(item => item.userId === userId);
  }
  
  // 定期轮询，比如每30秒检查一次
  setInterval(async () => {
    const isSubmitted = await checkFormSubmission('你的表单ID', '当前用户ID');
    if (isSubmitted) {
      document.getElementById('next-btn').disabled = false;
    }
  }, 30000);
  

• 缺点：轮询有延迟，且需要处理用户授权逻辑，复杂度较高

关于直接向MS Form iframe发消息的说明 #

直接给MS Form的contentWindow发送消息是无效的，因为微软并未在MS Form页面中开放监听自定义消息的接口，跨域下对方无法接收和处理你的消息。

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