CODEWITHSUNDEEP
javascriptjqueryhtmlclient-sidestatic-html
heltonbiker
heltonbiker

Reputation: 27605

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

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!

Upvotes: 3

Views: 5840

Answers (3)

iiro
iiro

Reputation: 3118

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>

Upvotes: 1

C&#233;sar Garc&#237;a Tapia
C&#233;sar Garc&#237;a Tapia

Reputation: 3376

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. :-)

Upvotes: 1

kidwon
kidwon

Reputation: 4524

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

Upvotes: 1

Related Questions