title: Can't load HTML into HTA file when click by link inside of the HTML
body: <p>I have one HTA file, one JS file is enqueued to the HTA file and HTML files with contents are loaded into the HTA file.</p>
  
  <p>For example this is <strong>my_hta_file.hta</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta http-equiv="x-ua-compatible" content="ie=9.0" /&gt;
  &lt;/head&gt;
  &lt;body&gt;&lt;/body&gt;
  &lt;/html&gt;
  &lt;script type="text/javascript" src="my_js_file.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>and this is <strong>my_js_file.js</strong></p>
  
  <pre><code>function getFileContent(filePath) {
      var fileStream = new ActiveXObject('ADODB.Stream');
      fileStream.Type = 2;
      fileStream.Charset = 'utf-8';
      fileStream.Open();
      fileStream.loadFromFile(filePath);
      var fileContent = fileStream.ReadText();
      fileStream.Close();
      return fileContent;
  }
  
  // initial loading of home page
  document.body.innerHTML = getFileContent('index.html');
  
  var pageLinks = document.querySelectorAll('a');
  for(i = 0; i &lt; pageLinks.length; i++) {
      var linkHref = pageLinks[i].getAttribute('href');
  
      pageLinks[i].setAttribute('href','#!'+linkHref);
      // I add this leading prefix to prevent following by the link when click by it
  
      pageLinks[i].onclick = function() {
          var page = this.getAttribute('href').substring(3);
          if(page == '') {
              var page = 'index';
          }
  
          // load HTML of the page by link path when click by the link
          document.body.innerHTML = getFileContent(page+'.html');
      }
  }
  </code></pre>
  
  <p>and my HTML files with contents are:</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;a href="/"&gt;Home&lt;/a&gt;
  &lt;a href="/second"&gt;Second&lt;/a&gt;
  &lt;a href="/third"&gt;Third&lt;/a&gt;
  &lt;div&gt;Home page content&lt;/div&gt;
  </code></pre>
  
  <p><strong>second.html</strong></p>
  
  <pre><code>&lt;a href="/"&gt;Home&lt;/a&gt;
  &lt;a href="/second"&gt;Second&lt;/a&gt;
  &lt;a href="/third"&gt;Third&lt;/a&gt;
  &lt;div&gt;Second page content&lt;/div&gt;
  </code></pre>
  
  <p><strong>third.html</strong></p>
  
  <pre><code>&lt;a href="/"&gt;Home&lt;/a&gt;
  &lt;a href="/second"&gt;Second&lt;/a&gt;
  &lt;a href="/third"&gt;Third&lt;/a&gt;
  &lt;div&gt;Third page content&lt;/div&gt;
  </code></pre>
  
  <p>When I click by a link, I need to load all the HTML content from the HTML file by the link path including the very links I click by.</p>
  
  <p>If I open my HTA file and click the link "Second", I get the second page links and content successfully.</p>
  
  <p>But after that if I click the link "Third", I get the error</p>
  
  <blockquote>
    <p>Cannot find file 'file:///D:/third' ...</p>
  </blockquote>
  
  <p>How to resolve the problem?</p>
  
  <hr>
  
  <p><strong>UPDATE 1</strong></p>
  
  <p>If I move my script to the bottom of the HTA body and add a div for loading HTML for example</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta http-equiv="x-ua-compatible" content="ie=9.0" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="body"&gt;&lt;/div&gt;
    &lt;script type="text/javascript" src="my_js_file.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and in my JS file load HTML into div i.e.</p>
  
  <pre><code>document.getElementById('body').innerHTML = ...
  </code></pre>
  
  <p>instead of</p>
  
  <pre><code>document.body.innerHTML = ...
  </code></pre>
  
  <p>the problem still remains</p>