Include html file in page without applying original pages CSS/JS

Question

firstly I am new here, so forgive me if this questions seems poorly written.

Is there any way to include a separate html file without applying the referenced CSS/JS of the original?

For instance, I have a file "index.php" with several references to external style sheets.

<!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">

<!-- Custom Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">

I then include another file navbar.html with its own external style sheet reference.

<link href="navbar.css" rel="stylesheet">

However, the CSS and JS of the original file always seem to apply to the included file, which unfortunately often leads to the included page being styled inappropriately.

Is there any way to include a page while applying only its desired CSS and JS?

Althou I find IFrames usefull, I am looking for a solution that does not use them, as they are not always browser compatible, and do not dynamically change shape. For instance if a navbar has a dropdown link it will not be shown because the iframe has a set size.

Answer 1

I think what you want to do its not possible as per my knowledge. Because when you include any file in html, in your case its navbar.html When it render on browser ultimately it consider as single html file. With all css / js applied to same html page.

So you can use different class names in your navbar.html and also in css. So it will not affect to other index.html elements.

Hope it helps you.