通过从另一个HTML页面调用在另一个HTML页面的div中加载HTML页面

Question

Suppose I have three html pages those are index.html , page1.html and page2.html .

Currently I am on page2.html and have a list of items with each hyperlinking to some pages. Say one links to page1.html .

Is it possible to load page1.html in a div which is in index.html from page2.html ?

Any help will be appreciated.

Answer 1

You can use jQuery .load() for this

$('#div').load('pageUrl');

Or if you need any callback then you can use

$('#div').load('pageUrl', function(){
    // your code here
});

For detail reference you can click here

Answer 2

Yes it is possible,

You can request index.html using jQuery ajax as follows:

$.ajax({
    url: "/index.html"
}).done(function(htmlData) {
    var htmlContent = $.parseHTML(htmlData).find("div"); // Here you pass the div reference of content you want to load
    $("div.targetDiv").html(htmlContent);
});