CODEWITHSUNDEEP
web-applications
lala
lala

Reputation: 2082

How do websites change content without refreshing the whole page?

For instance, on most blogs you can click on an article and it will take you to the article without refreshing the banner at the top or the navigation bar. I always thought that this was done with javascript, but I found that these websites still work even when I disable javascript.

Similar questions were asked here and here and the answers are all about javascript. But how are websites (Wordpress, for example) doing this when I have javascript disabled?

Upvotes: 1

Views: 1196

Answers (5)

Tokk
Tokk

Reputation: 4502

As a WordPress user I can assure you that it is JavaScript.

Upvotes: 0

Tristan
Tristan

Reputation: 3885

iFrames with hidden borders is normally how this is done.

They can be programatically refreshed, and are simpler when the data you need to display can just be grabbed from a whole different page

Upvotes: 2

Peter
Peter

Reputation: 14508

In some cases this behavior is just the browser caching the layout of the website. If everything remains the same on the next page except for one article, it will seem to the eye as if only this article is refreshed. This is because it takes milliseconds to load the images from your harddrive while it takes seconds to load an image from the web. This is why you don't see them loading again, while they actually are. It just goes too fast.

To figure it out if this is it, you could clear your temporary internet files and click on another link again you should see that the website actually completely loads again.

As others have said, iframes can be the cause too but I don't think they are used very often anymore. They aren't used on the wordpress.com website anyway. (View Source > Find iframe)

Upvotes: 3

Hans
Hans

Reputation: 3523

If you have javascript disabled, it may be a flash animation that can update without using js.

Upvotes: 0

Lekensteyn
Lekensteyn

Reputation: 66395

It is done with frames. This is a very basic code for accomplishing that:

index.html:

<frameset rows="100,*">
   <frame src="header.html"></frame>
   <frameset cols="300,*">
      <frame src="menu.html"></frame>
      <frame src="content.html" name="content"></frame>
   </frameset>
</frameset>

menu.html:

<a href="page.html" target="content">This will be opened in the content frame</a>

Upvotes: 2

Related Questions