List local html files from another html file (with javascript/jQuery) and create links for them dynamically

Question

I plan to create a static html file intended for local use via double-click to open it in the browser (no http server running).

Inside a folder (located in the same folder as the index file), I plan to add "item" files, so that when I open the master file, it lists all the html files inside that folder, and creates some navigation list with links to the files. Later I can add some navigation between files (cross-linking) but that is another problem.

The main problem is that the index file doesn't have knowledge of how many (and which) the item files are ahead of time, but is supposed to list them dynamically when the index page is loaded, and create a list of links inside some static element in the index page.

UPDATE: a pseudo-code snippet showing more or less what I want to (not in javascript syntax) would be:

for (filename in listfiles(directory='somedirectory', filetype='html') {
    somediv.appendChild(elementType='a', href=filename)

Any idea of how to do this without server-side scripts? It is important to make clear that this is for personal use, not related to internet or web development.

Thanks for reading!

Read more about this here http://stackoverflow.com/questions/2924935/list-files-in-a-directory-using-only-javascript — Mihai Matei, Jan 10 '13 at 11:45
Have a look at Active-X. It will only work for IE, though. HTML5 seems to be another alternative: http://stackoverflow.com/questions/10234515/html5-file-system-how-to-read-directories-using-directory-reader — Johan, Jan 10 '13 at 11:52

kidwon · Answer 1 · 2013-01-10T12:07:43.100

1

Not fully understand what you're after but if you want to get content of a page and load it into another you can use http://api.jquery.com/load/ . Some browsers prevent it locally however. I've loaded content from text files so if it's able to read from the files you mention I guess you'll be able to extract what you need

edited Jan 10 '13 at 12:07

answered Jan 10 '13 at 11:55

kidwon

4,448
5
28
45

I have already loaded local html in iframe without trouble in the past, provided that I knew the filename. What I want is a way to LIST THE FILENAMES so that I can create the iframes (or links, or any other element) dynamically from this list of filenames – heltonbiker Jan 10 '13 at 13:09
I have edited the question and included a psedo-code block of what I want to do. – heltonbiker Jan 10 '13 at 13:13
1

I see but I guess this isn't possible with js. I suggest you use some language and tools of your OS to generate that list. – kidwon Jan 10 '13 at 13:18

score 1 · Answer 2 · answered Jan 10 '13 at 14:33

AFAIK, it's not possible to do that in plain JavaScript. You need some server-side code telling the browser the list of files. Probably the easiest way is making an AJAX call where the server response with the desired list of files.

That's exactly what jQuery File Tree does. It's a somewhat old code (from 2008), so maybe there are some incompatibility with current versions of jQuery, but you can get some inspiration from it. :-)

score 1 · Answer 3 · answered Sep 04 '13 at 05:20

this is a bit old question but I think many people try to find some solution. Here is one.

I created this kind of solution using NPAPI FILE IO extension. There is already compiled extension DLL's / SO's so no need to recompile if you don't want to, for example, to add new methods. You can use that library and develop an extension to firefox, chrome and perhaps together with AtiveX-components to IE. Here is how I did this for the Chrome.

1) Download the svn repo.

2) For the newer Chrome versions, edit the manifest.json-file located under test\extension-folder. Below is my manifest.json file

{
  "manifest_version": 2,
  "name": "npapi-file-io-test",
  "description": "NPAPI demo",
  "version": "1.0",
  "description": "Test extension for npapi-file-io project",
  "background": {
    "page": "background.html"
  },
  "plugins": [{"path": "npapi-file-io-32.dll", "public": true},{"path": "npapi-file-io-32.so", "public": true},{"path": "npapi-file-io-64.so", "public": true}]
}

3) Install the extension into the chrome.

4) Use the extension in pages. Below is an example that lists files in /tmp folder

<!DOCTYPE XHTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>NPAPI File IO test</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
    $(document).ready(function() {
        var fs = $('#fs')[0];
        var  dir = "/tmp";
        var files = fs.listFiles(dir);
        for (var f in files) {
            if (files[f].type == "file") {
                $('#filelist').append('<a href="file:///'+dir+"/"+files[f].name+'">'+files[f].name+'</a><br/>');
            }
        }
    });
</script>
</head>
<body>
    <embed type="application/x-npapi-file-io" id="fs">
    <div id="filelist"></div>
</body>
</html>

List local html files from another html file (with javascript/jQuery) and create links for them dynamically

3 Answers3