Question

I’m working on a web page that calls another page with great jquery ajax abilities. My problem is : there is a css file in ajax page. The page which is called needs it but I don’t want to see sub page’s css styles in my main page.

Here is a summary of how I call my sub page :

<script>
$.ajax({
type: "GET",
    url: "subpage.html",
    success: function(msg){
       $('#box').html(msg);
    }
});
</script>

<div id='box'>
</div>

So, subpage.html is a kind of interface to another module of my project and it has its OWN CSS FILES. Any great knowledge or tricks to prevent that css file from my main page? PHP solutions are also acceptable.

Answer 1

You can use iframes (W3C reference, MDN reference). To load a specific page in an iframe using JavaScript, use something like this, HTML:

<iframe id = "iframeID" height = "300px" width = "300px"></iframe>

Then, when you want to load the page:

document.getElementById("iframeID").src = "subpage.html";