title: How to reload/refresh an html file from another html file using javascript when a specific condition is true?
body: <p>here I try to demonstrate my problem ,I have one <strong>main</strong> html file and two <strong>sub</strong> html files included inside the <strong>main</strong> file,the second <strong>sub</strong> html page is initially invisible .if the the value submitted on the input box of first <strong>sub</strong> html page is equal to 5 ,then the second <strong>sub</strong> html file is become visible and first <strong>sub</strong> file hided.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById('button').addEventListener('click',function(){
      //console.log(document.getElementById('input-box').value);
      if(document.getElementById('input-box').value == 5){
          document.getElementById('sub1').classList.add('none');
          //here before showing the div#sub2 part ,i would like to reload the aboutus.php or one js file aboutus.js
          document.getElementById('sub2').classList.remove('none');
      
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.none{
    display:none;
  }
  
  #main{
    width:400px;
    height:200px;
    border:1px solid #000;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  
  #main&gt;div{
    width:200px;
    height:100px;
    border:1px solid #000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="main"&gt;
    &lt;div id="sub1"&gt;
      &lt;h7&gt;page 1&lt;/h7&gt;
      &lt;input type="number" id="input-box"/&gt;
      &lt;button id="button"&gt;click&lt;/button&gt;
    &lt;/div&gt;
    &lt;div id="sub2" class="none"&gt;
      &lt;h7&gt;page 2&lt;/h7&gt;
      &lt;?php include "aboutus.html"; ?&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>what I would like to achieve is reload the second <strong>sub</strong> html page once before the second <strong>sub</strong> file is visible.because there are lot of database changes occur in the second <strong>sub</strong> file and a reload can fix this issue.</p>
  
  <p>what I have tried so far ,<code>window.onload</code>this will not work because window (second sub file)is loaded initially .<code>window.location.reload()</code> is also not working because that can be used to reload the same file.anybody have tricks to solve this ?</p>