如何用JavaScript在两个ASP.NET用户控件页面间建立请求响应机制？

当然可行！iframe 之间的跨页面交互完全可以通过 HTML5 的 postMessage API 实现，这正是处理这类父子页面通信场景的标准方案。下面我会结合你的需求给出具体的实现思路和代码示例：

当 Control2 启动长任务后，只需要通过 postMessage 向父页面（Control1）发送确认消息即可，Control1 提前监听 message 事件来接收这个消息。

Control1 页面的代码 #

// 监听来自iframe的消息
window.addEventListener('message', function(event) {
  // 🔴 重要：一定要验证消息来源域名，避免恶意攻击
  if (event.origin !== 'http://your-control2-domain.com') {
    return;
  }
  
  // 处理启动确认消息
  if (event.data === 'Control2 is started') {
    console.log('收到Control2的启动确认');
    // 这里可以做UI更新，比如禁用「开始」按钮、显示任务状态等
  }
});

Control2 页面的代码 #

function startLongRunningTask() {
  // 启动你的长任务逻辑（比如异步请求、循环处理等）
  console.log('开始执行长任务');
  
  // 向父页面发送启动确认
  window.parent.postMessage('Control2 is started', 'http://your-control1-domain.com');
  
  // 示例：用定时器模拟长任务
  window.taskTimer = setInterval(() => {
    console.log('长任务正在运行...');
  }, 1000);
}

这个流程需要 Control1 先发送停止指令，Control2 处理清理后回复，Control1 根据回复决定是否关闭 iframe：

Control1 页面的代码 #

// 「停止」按钮的点击事件
document.getElementById('stopBtn').addEventListener('click', function() {
  // 获取iframe元素
  const control2Iframe = document.getElementById('control2-iframe');
  // 向Control2发送停止指令
  control2Iframe.contentWindow.postMessage('Stop', 'http://your-control2-domain.com');
});

// 继续监听message事件，处理Control2的回复
window.addEventListener('message', function(event) {
  if (event.origin !== 'http://your-control2-domain.com') {
    return;
  }
  
  if (event.data === 'Yes') {
    console.log('Control2已确认停止，关闭iframe');
    // 移除或隐藏iframe
    const control2Iframe = document.getElementById('control2-iframe');
    control2Iframe.remove();
  } else if (event.data === 'No') {
    console.log('Control2无法停止当前任务');
    // 这里可以给用户提示，比如弹窗告知
  }
});

Control2 页面的代码 #

// 监听来自Control1的停止指令
window.addEventListener('message', function(event) {
  if (event.origin !== 'http://your-control1-domain.com') {
    return;
  }
  
  if (event.data === 'Stop') {
    // 第一步：清理会话（比如清除缓存、销毁实例、重置状态等）
    cleanupSession();
    
    // 第二步：判断任务是否在运行，处理停止逻辑
    if (window.taskTimer) {
      // 停止长任务
      clearInterval(window.taskTimer);
      window.taskTimer = null;
      // 回复「Yes」表示同意停止
      window.parent.postMessage('Yes', 'http://your-control1-domain.com');
    } else {
      // 任务已经停止，回复「No」
      window.parent.postMessage('No', 'http://your-control1-domain.com');
    }
  }
});

// 会话清理函数
function cleanupSession() {
  // 示例：清除会话存储的数据
  sessionStorage.removeItem('task-session-data');
  // 其他清理逻辑：销毁全局实例、重置状态变量等
  console.log('会话已清理完成');
}

• 域名验证：一定要在 message 事件中验证 event.origin，只处理信任域名的消息，防止跨站脚本攻击（XSS）。
• 目标域名：使用 postMessage 时，第二个参数最好指定具体的目标域名，不要用 *，除非是完全信任的内部场景。
• 任务状态管理：Control2 要维护好任务的运行状态（比如示例中的 taskTimer），确保能正确响应停止指令。

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