title: Load a SPA webpage via AJAX
body: <p>I'm trying to fetch an entire webpage using JavaScript by plugging in the URL.  However, the website is built as a Single Page Application (SPA) that uses JavaScript / <a href="http://backbonejs.org/" rel="noreferrer">backbone.js</a> to dynamically load most of it's contents after rendering the initial response.</p>
  
  <p>So for example, when I route to the following address:</p>
  
  <pre class="lang-none prettyprint-override"><code>https://connect.garmin.com/modern/activity/1915361012
  </code></pre>
  
  <p>And then enter this into the console (after the page has loaded):</p>
  
  <pre class="lang-js prettyprint-override"><code>var $page = $("html")
  console.log("%c✔: ", "color:green;", $page.find(".inline-edit-target.page-title-overflow").text().trim());
  console.log("%c✔: ", "color:green;", $page.find("footer .details").text().trim());
  </code></pre>
  
  <p>Then I'll get the dynamically loaded activity title as well as the statically loaded page footer:</p>
  
  <p><img src="https://i.stack.imgur.com/ZYcde.png" alt="Working Screenshot"></p>
  
  <hr>
  
  <p><strong>However</strong>, when I try to load the webpage via an AJAX call with either <a href="https://api.jquery.com/jquery.get/" rel="noreferrer"><code>$.get()</code></a> or <a href="http://api.jquery.com/load/" rel="noreferrer"><code>.load()</code></a>, I only get delivered the initial response (the same as the content when over view-source):</p>
  
  <pre class="lang-none prettyprint-override"><code>view-source:https://connect.garmin.com/modern/activity/1915361012
  </code></pre>
  
  <p>So if I use either of the the following AJAX calls:</p>
  
  <pre class="lang-js prettyprint-override"><code>// jQuery.get()
  var url = "https://connect.garmin.com/modern/activity/1915361012";
  jQuery.get(url,function(data) {
      var $page = $("&lt;div&gt;").html(data)
      console.log("%c✖: ", "color:red;",   $page.find(".page-title").text().trim());
      console.log("%c✔: ", "color:green;", $page.find("footer .details").text().trim());
  });
  
  // jQuery.load()
  var url = "https://connect.garmin.com/modern/activity/1915361012";
  var $page = $("&lt;div&gt;")
  $page.load(url, function(data) {
      console.log("%c✖: ", "color:red;",   $page.find(".page-title").text().trim()    );
      console.log("%c✔: ", "color:green;", $page.find("footer .details").text().trim());
  });
  </code></pre>
  
  <p>I'll still get the initial footer, but won't get any of the other page contents:</p>
  
  <p><img src="https://i.stack.imgur.com/iU0iN.png" alt="Broken - Screenshot"></p>
  
  <hr>
  
  <p>I've tried the <a href="https://stackoverflow.com/a/8279719/1366033"><strong>solution</strong> here</a> to <code>eval()</code> the contents of every <code>script</code> tag, but that doesn't appear robust enough to actually load the page:</p>
  
  <pre class="lang-js prettyprint-override"><code>jQuery.get(url,function(data) {
      var $page = $("&lt;div&gt;").html(data)
      $page.find("script").each(function() {
          var scriptContent = $(this).html(); //Grab the content of this tag
          eval(scriptContent); //Execute the content
      });
      console.log("%c✖: ", "color:red;",   $page.find(".page-title").text().trim());
      console.log("%c✔: ", "color:green;", $page.find("footer .details").text().trim());
  });
  </code></pre>
  
  <p><strong><em>Q: Any options to fully load a webpage that will scrapable over JavaScript?</em></strong></p>