title: How to access javascript variables in dynamically-loaded html page?
body: <p>I've got a html page which loads another html page into one of its divs via Ajax.  Something like:</p>
  
  <p>Base html page:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;script type='text/javascript'&gt;
        var greeting = "Hello";
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;  
      &lt;div id="details-main-content"&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Page that gets loaded into the one above (uses django templating so whatever is placed in the 'head' block ends up in the 'head' tag of the base page):</p>
  
  <pre><code>{% block head %}
    &lt;script type="text/javascript" language="javascript"&gt;
      alert("Greeting: " + greeting);
    &lt;/script&gt;
  {% endblock %}
  &lt;div&gt;
    Hello, world!
  &lt;/div&gt;
  </code></pre>
  
  <p>The child content gets loaded when a button is clicked, via a Javascript function (using JQuery) such as this:</p>
  
  <pre><code>function loadContent(url) {
      // Load external content via AJAX. 
      $( '.details-main-content' ).load( "/foo.html", function(){        
      });
  }
  </code></pre>
  
  <p>The page loads correctly, the child content displays exactly desired, inside the templatepage.  </p>
  
  <p>Is it possible to access the JS variables in the base page from the inner page (since the inner page is nestled inside of the outer page)?  </p>
  
  <p>Any help is greatly appreciated.</p>
  
  <p>Thanks</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I think the issue I was having was due to having the following line in the  of the base html page:</p>
  
  <pre><code>var gender = null;
  var age = null;
  </code></pre>
  
  <p>Which, each time a new page would be loaded through the <code>load()</code> function,  would re-init the variables back to null.  Oops</p>