Is it possible to actively change HTML text using JavaScript without having to reload a page? I can do it with images by using the images[].src property. Is there something similar for text? Also, is it possible to read a text file from the server and use it to define variables without referring to it as a .js command file?
Although JavaScript makes it possible to change a document's images, it does not let you selectively update the document's source. The next best thing, however, isn't a bad alternative. Netscape Navigator 4 features support for a new concept called "layers." Netscape layers make it possible to show multiple "content flows" within a single document. For example, with layers you can display an image in a document, and then display text on top of the image in a new layer.
In many ways, the <layer> tag works much like the <img> tag: Both let you display external content directly in your document, and both can be changed after the document is loaded. However, the similarities stop there. You can do a lot more with layers than you will ever dream of doing with images.
Unlike frames, layers do not require you to partition your browser space into separate regions. Instead, layers appear directly in the document, just like the images. And just as you can use JavaScript to change an image to something other than what was initially displayed, you can update the content of layers, too.
Shown below is a layer whose source was loaded directly from Yahoo!'s web site. On top is another layer containing buttons. Clicking on the buttons updates the search layer.
Note: You cannot see the layers mentioned in the previous paragraph because you are not using a layers-capable browser. Come back to this page with Netscape 4!
The purpose of this article is not to show you how to set up layers. (That's a big job, which I prefer to let the Web Pro handle!) I merely wanted to demonstrate that layers, combined with JavaScript, make it possible to display changing textual content in your documents.
For a complete overview of layers and how they work, read Part 2 of Netscape's tutorial, Dynamic HTML in Communicator.
Here's the source for the example above:
<script> function update_searchlayer (domain) { document . searchlayer . src = "http://" + domain; } </script> <layer id=searchlayer src="http://www.yahoo.com" clip="1000,300"> </layer> <layer> <form> <center> <input type=button value="Alta Vista" onClick="update_searchlayer ('www.altavista.digital.com');"> <input type=button value="Yahoo!" onClick="update_searchlayer ('www.yahoo.com');"> </center> </form> </layer>
The key to this example is the update_searchlayer () function, which is called when either of the two buttons from the buttons layer is pushed. Note how it assigns a new URL string to the document's searchlayer object. This is all that needs to be done in order to update the layer's content.
Layer objects are very similar to Document objects. For the most part, whatever you can do to the document, you can do to the layer, also. Therefore, in addition to assigning new URLs to layers, you can also rewrite the layer's content using its write () method. Be warned, however, that calling the write () method erases all of the layer's previous content.
For more information on how to use the write () method, read my tutorial, How can a script in one frame write text into another frame?, contained elsewhere in this site.
Charlton Rose
28 August 1997