Frames and HTML 5 [Archive] - Dynamic Drive Forums

u0107

08-07-2010, 06:01 PM

Hello all,

My first posting in these forums.

Some 5 to 6 years ago, I developed a website where I extensively used Javascript and Perl in a 4-frames page where clicking on a menu in one frame resulted in dynamically modifying content in another frame. The content included reading backend flat files, calculating numbers and concatenating the results to dynamically display them in a different frame.

I just learned that frames and frameset tags are proposed to be made obsolete in HTML 5 standards.

I am interested in knowing how one can change content in one portion of a window when an object is clicked in another portion of a window without having to resort a complete page refresh.

Does anyone have any knowledge of any published pages or for that matter code where such dynamic content in parts of a window is accomplished without a complete page refresh?

Thank you in advance for your patience in going through this post and hopefuly providing guidance to me.

Cheers!

Uttam

djr33

08-07-2010, 07:34 PM

Frames are the only way to have two different pages within one page: that is, they are both complete pages with all of the HTML necessary to create a page-- they can be independent.

The other way to approach this is called Ajax and it involves using Javascript to load pieces of pages (just elements of the html source code) into an existing page. It's very common now.

The difference is that frames create an object that is a new page acting separately (except that it is displayed within the same window and can link to other pages) and Ajax simply modifies the source code of the existing page.

For this reason a "page" included with Ajax does not have complete source code, skipping elements like "<html>" and the whole <head> section and using instead just the immediate elements to add, like "<p>My New Content</p>".

Ajax also allows you to do anything you'd like on an existing page while still getting data from the server. In many ways it's a perfect replacement for frames/iframes.

The only problem here is that Ajax requires advanced Javascript that isn't available in all browsers. Older browsers (also those that don't support HTML 5) will fail to load anything with Ajax. Luckily, though, these are very old browsers. I'm not sure of the numbers, but I know that IE6+, FF1+, etc. support Ajax. If you're still using IE4 that might be an issue, but for most people it won't be.
The complication here is that not all devices are this advanced: with the increase of traffic from mobile devices and with many of those devices using only minimal web browsers (full browsers like Safari on the iphone are the minority), this means that there's a new wave of limited browsers hitting some sites and they may not see your content.

Removing frames entirely seems a very questionable decision to me because of this. Frames have lots of issues and perhaps shouldn't be used often, but simply removing them without a suitable replacement is a very strong position (after frames have been available for years and the vast majority of browsers do support them).

Whenever you use Javascript (including Ajax) if the content is required, there should be a fallback method available for those browsers that don't support it or for users who disable Javascript (more common than you might think). Therefore having a backup using frames is one option but probably not a great one if it won't be supported. (Technically it would probably function fine: use frames only if ajax isn't supported which means in most cases that the browser is old and won't use html 5 anyway, but it won't generate a "valid" page if that matters to you.)
The other option as a backup is just reloading the page. The simple way to do this is to have regular links that determine parts of the content (such as a link that will load "home" into the "content" div) and have Javascript intercept this (if possible) and load it via Ajax instead (if possible) and only actually reload the page via the link if something fails.