dynamically loading a page into HTML
<p>I have web application which is comprised of an <code>index.html</code> file which includes an <code>&lt;iframe&gt;</code>. The <code>index.html</code> file loads different pages in the <code>&lt;iframe&gt;</code>. Each of those pages is has its own independent Javascript and CSS.</p>

<p>Everything works so far.</p>

<p>I am now thinking about loading those pages using Ajax calls into a <code>&lt;div&gt;</code>in the index.html instead of loading them into an <code>&lt;iframe&gt;</code>. I have done some tests and it is possible but there is an issue that worries me and since I'm new to this technique I thought maybe some experts here can share knowledge.</p>

<p><strong>Issue #1:</strong></p>

<p>When loading those pages directly to a <code>&lt;div&gt;</code> in the <code>index.html</code> file, the new page loads into the same DOM as the <code>index.html</code> itself. Therefore there can be conflicts between element classes and IDs of the page and hosting <code>index.html</code> for example <code>$("#foo").hide();</code> from the page will actually hide the elements with class <code>foo</code> in the <code>index.html</code> file as well as the page. Is there any way, I can put the page code in some sort of sandbox preventing it from affecting <code>index.html</code>?</p>

<p><strong>Issue #2:</strong></p>

<p>When removing a page (possibly to replace it with another page), there is a risk part of its code will still stay in the memory (<a href="http://www.javascriptkit.com/javatutors/loadjavascriptcss2.shtml" rel="nofollow">as mentioned here</a>). Is there any way to prevent this effect? Of course a positive answer to the first issue will cover this one
because if the page runs in a sandbox, unloading the page should unload its javascript code as well.</p>

<p><strong>Issue #3:</strong></p>

<p>The page is a complete HTML file with its own <code>&lt;head&gt;</code>, <code>&lt;body&gt;</code> and <code>&lt;title&gt;</code>elements. That means it is going to be affected with the CCS rules from the hosting <code>index.html</code> file as well. How can I prevent these negative side effects?</p>

<p>The paged-navigation system without requiring to reload the whole page seems to be a common interaction mechanism for many modern web sites. How is it possible to load a page dynamically without those side effects (without <code>&lt;iframe&gt;</code>)?</p>
