How to load a page within a page without an iframe

Question

I want to load a page of my website within another page, but there are some problems. First of all I can't use iframe, because I need to change some styles and scripts in the loaded content. Second, I don't want the styles and scripts of the loaded content to be loaded for the parent page, just like an iframe that it's styles and scripts, don't affect the parent page.

I get the page content with XMLHttpRequest and load it to a DOM with jQuery, but I want the loaded styles and scripts only for this DOM. Is there anyway to do this?

Answer 1

Best way to do that is to use css for the included content that is restricted to that namespace.

 #sub-page h1 { font-size: 16px; }

 <div id="main-page"> <h1>big text</h1> The text below would be loaded by ajax. <div id="sub-page"> <h1>not big text</h1> <h2 style="font-size: 16px">Also not-big text</h2> </div> </div>