Last Updated:

JavaScript for indexing pages along with frames

In general, it is best to refrain from using frames. If the use of frames can not be avoided, then you have to somehow solve these problems. That's what we're going to do now.

Problems when using frames: indexing by search robots, recreating the frame structure when directly accessing the page.

Preparing the site for indexing

Let's start with a simpler one - preparing a site that uses frames for indexing by search robots.

What's the problem? Search engine crawlers are special programs that are able to navigate through links ranging from some root page. When you try to enter your page into a search engine database, you are usually asked to enter the address of the main page of the site. And from that moment on, the robot queues your request. After some time, he will follow the specified link and carefully analyze the entire page, pulling out keywords, a brief description and other useful information from it. All this he carefully saves in his database. After the main page is indexed, the robot will follow the links that are indicated on it, and will enter into the database all the pages encountered along the way. The depth of indexing is usually limited to 3 levels of hierarchy within the domain on which the site is located. Which, in principle, is correct, otherwise the indexing of the site would never have come to its logical conclusion.

Thus, ordinary sites are indexed, and since the first page usually has links to all the main sections of the site, the indexing is successful. In the case of frames, this is not the case. That is, the robot tries to honestly index the site according to its own rules, but unfortunately, it does not succeed. If you created pages using frames, you know that frames are described in a special container page. And, as a rule, only frames and the files that form them are described. There are simply no links to the outside world on this page (!). So what's going on? The robot finds such a page, saves it in its database and... he has nowhere else to go - he believes that the work is finished, and moves on to indexing the next site. And we get a completely unindexed site! And, therefore, our page will not be able to find with the help of search engines!

For the sake of justice, it should be noted that the most "advanced" search engines are already trying to index sites with frames and complicate their robot programs.

Well, how to prepare a site with frames for proper indexing? As mentioned above, the problem lies in the lack of links to the main sections of the site on the container page. So we just need to add those links ourselves. And we will put them in the section, which, by the way, was specially invented for such cases. Note also that this method allows us to make the site accessible to browsers that do not support frames.

And here is an example of the correct code that does all of the above:

<html> <head> <title>Example of a document with frames</title> </head> <frameset cols="180,*"> <frame src="menu.htm" name="menu"> <frame src="content.htm" name="content"> </frameset> <noframes> <a href="content.htm">Site content</a> <a href="page_1.htm">Page #1</a> <a href="page_2.htm">Page #2 </a> <a href="page_3.htm">Page #3</a> </noframes> </html>

In this fragment, I omitted the description of META-tags to simplify the presentation, but you will need to add them before starting to register the site in search engines. Details on how to do this, you can find here on this page.

Solving the problem with the formation of the frame structure

Well, now let's deal with the most difficult problem - the formation of a frame structure when referring to one of the internal pages of the site. The problem, in general, is not in the formation of the structure of frames, but in the display in one of the windows of the very page requested by the user.

But let's first look at the origins of the problem. Oddly enough, they are associated mainly with search engines - now not in the context of registration, but directly when analyzing search results. If the site is correctly indexed, it means that the database has a "passport" to any page of this site and, therefore, as a result of the request, we can get a link to one of the internal pages. Clicking on the link, as you can guess, will open us only the internal page of the site without any frames. And, therefore, no one will see the whole painstakingly made design. Okay design, but after all, getting to other pages of the site will be possible only by editing the contents of the address bar.

How can this be avoided? Let's find out now. To begin with, let's look at simple ways that will allow us to do without the use of JavaScript. In general, there is only one way, and it lies in the fact that at the bottom of each page you need to make a link to the main page of the site (which, as you remember, is also a container). This simple trick will allow visitors to get to the top of your site without resorting to tricks such as editing the address bar. And, it is quite possible that he will find other useful materials on the site.

The use of JavaScript gives us much more powerful tools and allows us to fully form the entire frame structure and display the page in one of the frames.

I will not yet fully list the entire code of the script, but first I will consider a few techniques, each of which does the work we need. Let's start with an automatic transition to another page. This is done using the following design:

<script language="JavaScript"> <!-- location.href="anotherpage.htm"; --> </script>

The href property of the location object contains the address of the current page, which, by the way, can be read at any time. And if we use a script to put the address of any other page in this variable, the browser will immediately make the transition.

The second technique is to pass parameters to the script using the address bar (the so-called GET method). This is done by adding a '?' sign to the page address (question) and listing after it all the necessary variables and their values. If there are several variables, they are separated from each other using the sign '&' (ampersand). Here are some examples of passing parameters through the GET method:

You have probably seen similar constructions on the sites of online stores and when search engines are queried.

For our case, this technique means the following - we can give the main page, which forms frames, the address of the page to which the user got. And on the container page, process this address and create the necessary frames.

<script language="JavaScript"> <!-- location.href="index.htm?" +location.pathname; --> </script>

The code below should be placed at the beginning of each internal page that is displayed in the frame:

Note that the design is somewhat more complex than I described above. As an address parameter, I used the pathname property of the location object, which contains the full path of the current page from the site root (for the curious - location.href - contains the absolute address of the page, including the protocol name and domain name).

If we think about it a bit, we will understand that before automatic redirecting to a new page, it is necessary to check whether the page is open in the frame? Otherwise, we will get the effect of an endless redirect, when the pages will be opened all the time until the computer freezes due to lack of resources. The final code should look like this:

That is, we read the number of frames on the parent page and if this value is zero (i.e. there is no parent), then we make the transition. Otherwise, the page is loaded in a frame and there is no need for a redirect.

 <script language="JavaScript"> <!-- if (window.parent.frames.length == 0) { location.href="index.htm?" +location.pathname; } //--> </script>

Okay, we gave the main page-container the address of the page to which the user got, now you need to create the necessary frame structure. Since we don't know in advance which page will be in the inner frame, we can't write code to organize the frames directly. This will have to be done using JavaScript commands:

<script language="JavaScript"> <!-- document.write('<frameset cols=\"180,*\">'); document.write('<frame src=\"menu.htm\" name=\"menu\">'); document.write('<frame src=\"content.htm\" name=\"content\">'); document.write('</frameset>'); --> </script>

Now we are slightly modifying this script so that the main frame is loaded not with the default page (content.htm), but with our internal page. But first you will have to find out from the address bar which page to upload.

To handle the variables passed in the address bar, JavaScript provides us with the search property of the location object (right, a very convenient object - without its help, we would not be able to do what we do :). This property stores the address of the query string, which is located immediately after the '?' character. That is, it contains the address of our internal page (!). But it is too early to use this value, because the query string also contains the initial question mark. Therefore, to begin with, we need to cut it off:

var string =;
var current_page=string.substring (1, string.length);

And now I will give a complete, modified version of the script:

<script language="JavaScript"> <!-- var string =; var current_page=string.substring (1, string.length); document.write('<frameset cols=\"180,*\">'); document.write('<frame src=\"menu.htm\" name=\"menu\">'); if ( == "") { document.write('<frame src=\"content.htm\" name=\"content\">'); } else { document.write('<frame src=\"' + current_page + '\" name=\"content\">'); } document.write('</frameset>'); --> </script>

In addition to the formation of the frame in which our page will be loaded, which is provided by the following fragment:

we also track the case of loading an index file when it is not given the address of the internal page (for example, the user immediately typed the main address of the site), and in this case we upload a regular page by default (content.htm).

That's pretty much it - we've dealt with the problem of internal pages. It remains only to make a few comments and explanations.

Using the GET method to pass the address of the inner page makes it difficult to use other variables that we also want to pass with the GET method. To implement this effect, the script will become even more complicated, because we will have to track all the variables that we pass, and, accordingly, form a more complex line for the redirect. In addition, if these variables are intended for the internal page, then a similar mechanism for passing variable values will have to be implemented in the index file when forming frames.

document.write('<frame src=\"' + current_page + '\" name=\"content\">');

A careful reader may notice that I am not using the classical form of parameter passing (i.e. value=param), but the abbreviated form - immediately passing the desired value. This is possible in simple scripts and makes them somewhat easier to write. However, this method does not allow us to pass more than one variable.

We form the main index file using JavaScript constructs. And what happens if a person with a browser that does not support JavaScript comes to the site? In this case, we will not see anything at all, because there will be no one to form frames. So to solve this problem, we will use tags, inside which we will place the usual description of the frames.

Let me, dear reader, once again fully quote the code of the index page, which takes into account all these necessary trifles and features:

 <html> <head> <title>The example of a document with frames</title> </head> <script language="JavaScript"> <!-- var string =; var current_page=string.substring (1, string.length); document.write('<frameset cols=\"180,*\">'); document.write('<frame src=\"menu.htm\" name=\"menu\">'); if ( == "") { document.write('<frame src=\"content.htm\" name=\"content\">'); } else { document.write('<frame src=\"' + current_page + '\" name=\"content\">'); } document.write('</frameset>'); --> </script> <noscript> <frameset cols="180,*"> <frame src="menu.htm" name="menu"> <frame src="content.htm" name="content"> </frameset> <noframes> <a href="content.htm">Site content</a> <a href="page_1.htm">Page #1</a> <a href="page_2.htm">Page #2</a> <a href="page_3.htm">Page #3 </a> </noframes> </noscript> </html> 

How to put a link to the internal page?

There is only one problem left. The one that is indicated in the title. We have already analyzed the mechanism for forming a frame structure when linking to an internal page, so there will be no problems with a link to an internal page. But how can a user bookmark the desired page?

The simplest, but quite effective way is to place a link to a page without frames at the beginning or at the end of the page. Of course, this can not be done on all pages, but only on those that are of independent interest - for example, articles. By the way, you can combine the link with the version of the page for printing - it will be very successful.

And the second way is again to use JavaScript, but it is unfortunately limited only to versions of Internet Explorer above 5.0. At least not yet.

As you can see, overcoming the shortcomings of frames is a rather troublesome and unintuitive process. So decide for yourself - use your frames or look for other, more convenient ways that will solve your problems.