title: Trigger.io load page dynamically
body: <p>So I was using trigger.io to create a page where there's a custom menu at the bottom and each button loads an external HTML page into main container. I had to hack around to make this work so I was wondering if there's a better way of doing it.</p>
  
  <p>I started using the <code>$('.main').load('pages/test.html')</code> and it doesn't work. Instead I had to do:</p>
  
  <pre><code>forge.file.getLocal('pages/test.html', function (file) {
    forge.file.string(file, function (str) {
      $('.main').html(str);
    });
  });
  </code></pre>
  
  <p>which is kinda messy.</p>
  
  <p>Also if the <code>str</code> HTML content as a <code>img</code> tag, the img doesn't show since the <code>src</code> attribute gets messed up. So I had to do another hack:</p>
  
  <pre><code>forge.file.getLocal('pages/test.html', function (file) {
    forge.file.string(file, function (str) {
      var $main = $('.main');
      $main.html(str);
  
      //Hack to resolve img src
      var imgPath;
      $main.find('img').each(function () {
        var $this = $(this);
        // First 8 chars is "file:///"
        imgPath = $this.prop('src').substr(8);
        forge.file.getLocal(imgPath, function (file) {
          $this.prop('src', file.uri);
        });
      });
    });
  });
  </code></pre>
  
  <p>Any better way of purely loading an external HTML page without all the hassle?</p>
  
  <p>Thanks!</p>