One of the things about JavaScript that is often overlooked is it's ability to embed and update content within your site. While Server Side Includes (SSI) is a preferred method, some hosts, especially free hosts, do not allow SSI.

So, if your host doesn't allow SSI, yet you want to update all of your pages dynamically, and all at once, without updating each page seperately....what are you to do? Well, follow along, and I'll show you.

Different Methods

There are a few different methods for doing this, as with practically anything you do in the web development industry. I will explain both. Keep in mind that each has it's benefits but one is more efficient than the other.

Method 1:

This first method is not very efficient. However, it does give you a little less to worry about, and a little less JavaScript knowledge is needed. It uses Embed Technology, and JavaScript together, to call a seperate page into your site, for navigation, header, footer, or anything that may need constant updating across your pages. The one problem with this method, is that it only works in Internet Explorer.

Step 1:

The first step in using this method is to create your updatable content page. We'll refer to a basic navigation for this example.

To begin with, you will need to create your navigation in a seperate page. Nothing fancy needs to be done to the code for this to work. So, just create a simple navigation as usual, without anything else on the page. Once you have created this, save it as navigation.html

Step 2:

Open your favorite text editor, and enter the following code:

document.write(" <object type=\"text/x-scriptlet\" width=100% height=\"20\"

data=\"navigation.html\"></object>");

Notice that I have highlighted the "data" attribute of that code. The reason I pointed this out is because it is very important that your content page be listed here. So, basically, you will enter the name of the file you created above.

Save the above code as navinclude.js

Step 3:

Now that you have these two files created, the next step is to place in all of your pages, where you want the navigation to appear, using the following line of code:

<SCRIPT language="Javascript" src="navinclude.js">
</SCRIPT>

Note:

The code used in step 2 will work by itself on your pages as well. However, after Microsoft releases it's new version of Internet Explorer, it will not work properly, without the visitor first having to accept the content.

If you would like to try and use the code directly for now, you may do so by using the following code:

<object type="text/x-scriptlet" width=100% height="20" data="navigation.html"></object>

Again, keep in mind that method 1 only works in Internet Explorer, and your navigation will not show up in other browsers.

Let's move on to the second method.