在JavaScript/ASP.NET MVC中从独立iFrame刷新外部DIV

嘿，我来帮你搞定这个问题！你之前的代码没效果，核心原因是你在iFrame的上下文里调用document.getElementById('reportContainer')，找的是iFrame内部的元素，而你要操作的是父页面里的DIV，得切换到父页面的上下文才行。下面分两种场景给你解决方案：

场景1：iFrame和父页面同域（无跨域限制） #

这种情况最简单，直接通过parent对象访问父页面的DOM即可。假设你要刷新的父页面DIV的id是reportContainer，可以在iFrame的上传成功回调里执行以下代码：

方法A：调用父页面的内容加载函数 #

如果父页面原本就有负责加载这个DIV内容的函数（比如loadReportContent()），直接调用它最方便：

// iFrame上传成功后执行的代码
parent.loadReportContent();

方法B：直接操作父页面的DIV元素 #

如果需要手动更新DIV内容，比如重新请求数据并替换：

// iFrame上传成功后执行的代码
const targetDiv = parent.document.getElementById('reportContainer');
// 示例：通过fetch重新获取内容并替换
fetch('/api/get-report-content')
  .then(res => res.text())
  .then(html => {
    targetDiv.innerHTML = html;
  });

场景2：iFrame和父页面跨域（受同源策略限制） #

这时候直接用parent操作父DOM会被浏览器阻止，得用postMessage进行跨上下文通信，让父页面自己处理刷新：

步骤1：iFrame内发送刷新消息 #

在iFrame的上传成功回调里，给父页面发送指定的消息：

// iFrame内的代码
// 第二个参数填父页面的域名（比如https://your-parent-site.com），用*的话不安全，不推荐
window.parent.postMessage('refresh_report_container', 'https://your-parent-site.com');

步骤2：父页面监听消息并执行刷新 #

在父页面的脚本里添加消息监听，验证来源后执行刷新操作：

// 父页面的代码
window.addEventListener('message', (event) => {
  // 一定要验证消息来源，防止恶意消息
  if (event.origin !== 'https://your-iframe-site.com') return;
  
  if (event.data === 'refresh_report_container') {
    // 执行你需要的刷新操作，比如调用加载函数
    const targetDiv = document.getElementById('reportContainer');
    loadReportContent(); // 替换成你实际的内容加载逻辑
  }
});

注意事项 #

• 同源策略是关键：同域下可以直接操作父DOM，跨域只能用postMessage。
• 使用postMessage时务必验证消息来源，避免安全漏洞。

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