如何每隔几秒刷新本地网页中iframe内的文本文件？

问题背景 #

本地搭建网页用于在专用显示器展示多个文本文件内容，当前使用<meta http-equiv="refresh">整页刷新导致页面闪烁，需要仅刷新iframe内的文本文件，不刷新整个页面，且不想在iframe中加载额外HTML文件。

解决方案 #

步骤1：移除全局整页刷新 #

删除<head>中的<meta http-equiv="refresh" content="10"/>，避免整页刷新引发的闪烁。

步骤2：为所有iframe添加唯一ID #

给每个iframe设置唯一ID，方便JavaScript精准定位：

<iframe id="activeOrders" frameBorder="0" width="968" height="370" src="file:///J:/noah-files/AvionicsTV/WorkOrders.txt"></iframe>
<iframe id="completedOrders" frameBorder="0" width="968" height="292" src="file:///J:/noah-files/AvionicsTV/CompletedWorkOrders.txt"></iframe>
<iframe id="ifrs" frameBorder="0" width="363" height="185" src="file:///J:/noah-files/AvionicsTV/IFRs.txt"></iframe>

步骤3：添加JavaScript实现局部刷新 #

在<body>末尾插入脚本，实现定时刷新单个iframe，同时添加时间戳参数避免浏览器缓存文本文件：

<script>
// 刷新指定iframe的函数
function refreshIframe(iframeId) {
  const iframe = document.getElementById(iframeId);
  // 保留原地址，添加时间戳参数强制绕过缓存
  const originalSrc = iframe.src.split('?')[0];
  iframe.src = `${originalSrc}?t=${new Date().getTime()}`;
}

// 定时刷新所有iframe，间隔10秒（可自行调整）
setInterval(() => {
  refreshIframe('activeOrders');
  refreshIframe('completedOrders');
  refreshIframe('ifrs');
}, 10000);
</script>

完整修改后的HTML代码 #

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Avionics</title>
  <link href="Avionics.css" rel="stylesheet">
</head>

<body>

<div style="width:1453px;">
  <div id="shapeWORKORDERS" style="float:left; border-radius: 20px">
    <center><h1>ACTIVE WORK ORDERS</h1></center>
    <iframe id="activeOrders" frameBorder="0" width="968" height="370" src="file:///J:/noah-files/AvionicsTV/WorkOrders.txt"></iframe>

    <center><h1>COMPLETED WORK ORDERS</h1></center>
    <iframe id="completedOrders" frameBorder="0" width="968" height="292" src="file:///J:/noah-files/AvionicsTV/CompletedWorkOrders.txt"></iframe>
  </div>

  <div id="shapeIFR" style="float:right; border-radius: 20px">
    <center><h1>IFR's</h1></center>
    <iframe id="ifrs" frameBorder="0" width="363" height="185" src="file:///J:/noah-files/AvionicsTV/IFRs.txt"></iframe>
  </div>

<script>
function refreshIframe(iframeId) {
  const iframe = document.getElementById(iframeId);
  const originalSrc = iframe.src.split('?')[0];
  iframe.src = `${originalSrc}?t=${new Date().getTime()}`;
}

setInterval(() => {
  refreshIframe('activeOrders');
  refreshIframe('completedOrders');
  refreshIframe('ifrs');
}, 10000);
</script>
</body>
</html>

注意事项 #

• Firefox在file://协议下可能限制脚本操作iframe，需调整设置：在地址栏输入about:config，找到security.fileuri.strict_origin_policy，设置为false，允许本地脚本访问同域iframe。
• 时间戳参数?t=${new Date().getTime()}用于强制浏览器重新请求文本文件，避免使用缓存的旧内容。

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