how to load content of one html file into another html file with all its scripts and styles?

Question

i know that this question is asked many times here and i have read those answers but my question is bit longer than this. suppose there are two files: a.html and b.html, now:

• a.html contains all the scripts and styles that are common throughout the project and <div> tag for content.

• b.html contains only the codes required to load in the div tag of a.html file.

• there are some other scripts and styles required only for b.html.

  so, how do i load that page specific js and css with the page's content into the div of a.html??? and how to remove them when i call another c.html file's content with its own js and css files?? Any suggestions or hints would be appreciated. Thanks.

Answer 1

use Jquery Ajax to load page 2 into the div ( follow below example)

page 1(HTML)

<div id="loadepage2here" ></div>
<div id="loadepage3here" ></div>

page 1(js)

$(document).ready(function()
{
  $.get('/locationOfPage2.html',function(data){
     $("#loadepage3here").empty();
     $("#loadepage2here").html(data);
   });
 $.get('/locationOfPage3.html',function(data){
     $("#loadepage2here").empty();
     $("#loadepage3here").html(data);
   });
});

Edit: as asked how to use only div for multiple page

page 1(HTML)

<div id="loadepagehere" ></div>
<button onClick="loadPage('page1.html')" >Page 1</button >
<button  onClick="loadPage('page2.html')" >Page 2</button >

page 1(js)

loadPage(location)
{
    $.get(location,function(data){
       $("#loadepagehere").empty();
       $("#loadepagehere").html(data);
     });
}

Answer 2

You can use angular.js to achieve this. Below is the code snippet to achieve this.

    var dynamicHTML = $('#divLoadHTML');
    dynamicHTML.load('/Pages/Common/b.html')
    $compile(dynamicHTML.contents())($scope);

divHTML is a div on a.html page.