Tutorial: iFrames & JavaScript

The informatics of writing for the web involves many separations. Code and display are often very separate, and in working with cascading style sheets, we see that a controling piece of code in a separate file can control the style of multiple pages. Space and distance between seemingly separate pieces of information are often collapsed in web composition.

In this tutorial, we'll work with iFrames and JavaScript. Each involves a kind of "distance" that is collapsed at the moment of display.

iFrames

Back in the '90s, many more websites were coded with what are called "frames." Sites of this kind of scroll bars breaking up sections of the page, so that one or more parts of the page scroll separately.

As of 2008, the United Nations still used frames, so they can't be all that bad. Or can they?

A page that uses frames is really two or more pages, so if someone uses a screen reader to browse the web, they only get part of what is displayed on a site using frames. Bookmarking a page that uses frames is also nutty, as you sometimes end up bookmarking only the menu page.


A few things to know about iFrames

Because iFrames syndicate content from another page, the content within the iFrame is much less visible to web browsers. So content displayed within an iFrame is often not indexed as part of the content of a page.

iFrames are particularly useful when you don't want the whole page to scroll, but only a small part of it.

JavaScript

Composing JavaScript is complicated; using it is quite easy. Like html, JavaScript is its own scripting language with its own unique syntax and rules.

In an earlier tutorial, a piece of JavaScript allowed us to move this image:

In general, pieces of JavaScript include a brief piece of code in your "head" section and a corresponding script at the point in your code where you want the item to appear. You can easily find scripts online by searching for javascript.

JavaScript allows you do do some very cool things and some very cheesy ones. Do not use JavaScript to do things like this. Please, don't.

This free script provided by
JavaScript Kit