Refresh locally hosted webpage text file in iframe every few seconds

I am hosting a very basic webpage on my local machine. I use it to display the contents of several text files that are shows on a dedicated monitor.

I want to refresh the contents of the iframes only, namely JUST reload the text files, not refresh the entire webpage (which is what I have right now, which causes flickering). I've tried several different approaches from multiple sources, but none either work correctly, or at all.

To be clear, I have Firefox and Chrome to work with. Firefox is what I use the most.

This is my main HTML:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Avionics</title>
  <meta http-equiv="refresh" content="10"/>
  <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="iframe1" frameBorder="0" width="968" height="370" src="file:///J:/noah-files/AvionicsTV/WorkOrders.txt"></iframe>

    <center><h1>COMPLETED WORK ORDERS</h1></center>
    <iframe 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 frameBorder="0" width="363" height="185" src="file:///J:/noah-files/AvionicsTV/IFRs.txt"></iframe>
  </div>

</body>
</html>

This is my CSS:

body
{
   background-color: #95AFC2;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 10px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}

h1 {
    height: 0px;
}

#shapeWORKORDERS {
  border: solid black;
  border-width: 5px 5px 5px;
  background-image: url('file:///J:/noah-files/AvionicsTV/abstract_wallpaper_1.jpg');
  -moz-transform: scale(1.10);
  -moz-transform-origin: 0 0;
  -webkit-transform: scale(1.10);
  -webkit-transform-origin: 0 0;
  position:relative;
  top:5px;
  left:5px;
}

#shapeIFR {
  border: solid black;
  border-width: 5px 5px 5px;
  background-image: url('file:///J:/noah-files/AvionicsTV/abstract_wallpaper_2.jpg');
  position:relative;
  top:5px;
  left:5px;
}

Tried various javascript methods, and so far none of them have done anything, or mutilated the page after a load. To be clear, I don't want to load another html file into the iFrame, just a text file that is already referenced.

My HTML is a bit rusty, so I'm working through it.

Solution

You can do it by reloading it using js like in this question. But make it that it refreshes each minute this is an example:

function reload(){
   var iframes = document.getElementsByTagName("iframe");
   for (var i = 0; i < iframes.length; i++) {
      iframes[i].src = iframe[i].src;
   }
}
let timerId = setInterval(reload, 60000);

I hope this helps :)