Reading the contents of a directory

You are here: irt.org | Articles | JavaScript | Miscellaneous | Reading the contents of a directory

Published on: Thursday 17th April 1997 By: Martin Webb

This article will describe how it is possible to read the contents of a directory.

there are, however, certain limitations:

It uses frames.
It will not work if the directory contains an index.htm file, or anything similar that the server will return to the browser if you access the directory without specifying a filename.
It is also possible for web servers to be configured so that they will refuse to return a directory listing.
It does not work offline on Internet Explorer 3.0.

Apart from these limitations, it has plenty of potential.

The example I will demonstrate will use the following frame structure:

test.htm

main.htm

directory url

The test.htm document defines two frames:

<html>
<head>
<script language="JavaScript"><!--
function reload_main() {
  window.main.location.href = "main.htm";
}
//--></script>
</head>

<frameset rows="*,1" onLoad="reload_main()">
<frame src="blank.htm" name="main">
<frame src="../images/" name="directory">
</frameset>

</html>

The test.htm file loads a directory listing in the bottom directory frame (which in this example is the images directory on the irt.org we-site.)

The browser will actually create hypertext links to the individual files, which can then be subsequently examined using the JavaScript links array.

The reason this does not work in Internet Explorer, is that the browser does not create HTML hypertext links to the files.

To ensure that the directory frame is completely loaded, we use the onLoad() event in the FRAMESET to load the main.htm document into the main frame.

The contents of the main.htm file will then read the links array and will simply provide links to the files. This can then be easily adapted to display the data in any manner that you desire, e.g. tables, drop down menus, sorted by type, etc. The functionality of the main.htm can be enriched to provide, for example a picture browser, or a slide show. It removes the necessity to hardcode the contents of the directory within the JavaScript.

The contents of the main.htm document is as follows:

<html>
<body>
<h1>Contents of directory</h1>

<script language="JavaScript"><!--
var links_length = parent.directory.window.document.links.length;
var link = "";
for (var i = 0; i < links_length ; i++) {
  link = parent.directory.window.document.links[i].href;
  document.write(
    '<a href="'+link+'">'+link+'</a><br>'
  );
}
//-->
</script>

<p><a href="index.htm" target="_parent">Return</a>
</body>
</html>

The JavaScript finds the length of the links array. Which it then uses to walk through the links array outputing the href property within an anchor.

Why not try out the example for yourself?

Feedback on 'Reading the contents of a directory'

Reading the contents of a directory - Pierre Calinaud 04:02:56 6/19/01
Reading the contents of a directory - �yvind 06:28:46 9/06/00
Reading the contents of a directory - bill mote 10:15:05 6/08/00
Reading the contents of a directory - David G. Hunt 10:15:24 5/03/00
Reading the contents of a directory - Matthew 15:47:30 2/11/99

View the profile on Martin Webb and the list of other Articles by Martin Webb.

What's New

How to do the impossible with Google Gears

Out and About

Last Updated: 21st December 2007. Maintained by: Martin Webb
irt.org liability, trademark, document use, privacy statement and software licensing rules apply.