How to load an html page inside an existing html page

Good day!

I am creating a website that have several HTML pages. My main page is divided as follows using the div code:

I've decided that the header, the left column and the footer will be same for all pages. Without using the FRAMES in html, Is it possible that when I click the BUTTON 1 (I used hyperlink code <a href="Catalogue.jsp" class="widget" >Catalogue</a>) the page called will be loaded inside the right column? I've read this article but I don't know which is the best solution to my problem (and honestly, i don't know how to insert it in my codes because I tried this code $("#mydiv").load("myexternalfile.html"); and it didn't work.. I think i am missing something.. How can i do the code, if i click the hyperlink, show this page inside the right column...).

Also, I am wondering if it is faster or more co开发者_如何学Cmmonly used if I do this method instead of reloading the whole page everytime even though my header, leftcolumn, and footer will be the same for all of my pages. What will be the cons if i do this to all of my pages?

Thank you in advance.

---

Without using the FRAMES in html, Is it possible that when I click the BUTTON 1 (I used hyperlink code <a href="Catalogue.jsp" class="widget" >Catalogue</a>) the page called will be loaded inside the right column?

There are iframes (which are just another type of frames), and there is the simulation of frames using JavaScript (Ajax techniques) which have all the drawbacks of frames plus some extra ones on top.

$("#mydiv").load("myexternalfile.html"); and it didn't work).

i.e. that.

It is hard to say why it failed without more information though.

Also, I am wondering if it is faster

Slightly

or more commonly used

Not common at all

if I do this method instead of reloading the whole page everytime even though my header, leftcolumn, and footer will be the same for all of my pages.

HTML compresses really well, and templates save on manually duplicating the shared content. There are reasons why almost every website has distinct pages with shared meta content.

What will be the cons if i do this to all of my pages?

It breaks bookmarking, search engine indexing, link sharing, and access for users without JavaScript.

---

Use iFrame and do "display=block" conditionally or clicking on any button using javascript

<iframe src="newpage.html" width="200" height="200" frameborder="0" scrolling="auto" name="myInlineFrame" display=none></iframe>