ASP.NET Web App中强制iframe非缓存刷新的代码放置及引用方法

步骤1：给iframe添加ID #

先修改Index.cshtml里的iframe标签，新增id属性，让JavaScript能精准定位到这个iframe：

<iframe 
  id="myIframe" <!-- 新增ID用于JS定位 -->
  height="800" 
  width="1300" 
  loading="eager" 
  frameBorder="0" 
  scrolling="no" 
  seamless="seamless" 
  allowtransparency="true" 
  src="https://example.com/?page_id=436" 
  title="My site" />

步骤2：添加JavaScript代码 #

在ASP.NET项目里，你可以按以下几种方式放置代码，选适合你的即可：

方式1：直接放在Index.cshtml页面底部 #

在页面的</body>标签前插入脚本块，确保iframe加载完成后再执行代码：

<script>
  // 页面DOM加载完成时执行
  document.addEventListener('DOMContentLoaded', function() {
    const iframe = document.getElementById('myIframe');
    // 修正原代码的URL参数错误：把第二个?改成&，否则参数失效
    const [baseUrl, originalParams] = iframe.src.split('?');
    iframe.src = `${baseUrl}?${originalParams}&reload=${new Date().getTime()}`;
  });
</script>
</body>

方式2：放在外部JS文件（推荐，便于复用） #

1. 在项目的wwwroot/js目录下新建iframeReload.js，写入代码：

document.addEventListener('DOMContentLoaded', function() {
  const iframe = document.getElementById('myIframe');
  if (iframe) {
    const [baseUrl, originalParams] = iframe.src.split('?');
    iframe.src = `${baseUrl}?${originalParams}&reload=${new Date().getTime()}`;
  }
});

2. 在Index.cshtml的</body>前引用这个文件：

<script src="~/js/iframeReload.js"></script>

（注：~/是ASP.NET指向wwwroot目录的路径别名）

方式3：用布局页的@section（如果用了_Layout.cshtml） #

如果你的页面使用了布局页，把脚本放在Scripts区块里，布局页会自动把它渲染到指定位置（一般是页面底部）：

@section Scripts {
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const iframe = document.getElementById('myIframe');
      const [baseUrl, originalParams] = iframe.src.split('?');
      iframe.src = `${baseUrl}?${originalParams}&reload=${new Date().getTime()}`;
    });
  </script>
}

关键注意事项 #

• 原代码里的URL有两个?，这会导致reload参数无法被正确识别，必须改成&——URL中第一个参数用?，后续参数都用&分隔。
• 用new Date().getTime()生成唯一时间戳，浏览器会把这个带新参数的URL视为全新请求，从而绕过缓存重新加载内容。

内容的提问来源于stack exchange，提问作者Brad Y.