從另一個html文件（使用javascript/jQuery）列出本地html文件，併爲它們動態創建鏈接

我打算通過雙擊在瀏覽器中打開它來創建一個本地使用的靜態html文件（無需http服務器運行）。從另一個html文件（使用javascript/jQuery）列出本地html文件，併爲它們動態創建鏈接

在一個文件夾（與索引文件位於同一文件夾中）內，我計劃添加「項目」文件，以便在打開主文件時列出該文件夾內的所有html文件，並創建一些導航列表與鏈接到文件。後來我可以在文件之間添加一些導航（交叉鏈接），但這是另一個問題。

主要問題是索引文件不知道項目文件有多少（以及哪個）提前，但應該在加載索引頁時動態列出它們，並創建一個列表索引頁面中某些靜態元素內部的鏈接。

UPDATE：僞代碼片段顯示或多或少是我想做的（而不是在JavaScript語法）爲：

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

如何做到這一點沒有服務器端腳本任何想法？清楚地表明這是爲了個人使用，而不是與互聯網或網絡開發相關是很重要的。

感謝您的閱讀！

來源

2013-01-10 heltonbiker

在此處瞭解更多信息http：// stackoverflow。com/questions/2924935/list-files-in-a-directory-using-only-javascript –

看看Active-X。但它只適用於IE。 HTML5似乎是另一種選擇：http://stackoverflow.com/questions/10234515/html5-file-system-how-to-read-directories-using-directory-reader – Johan

不完全理解你的內容，但如果你想獲得一個頁面的內容並將其加載到另一個頁面中，可以使用http://api.jquery.com/load/。但是，有些瀏覽器會在本地阻止它。所以如果它能夠從文件中讀取你提到我已經加載文本文件中的內容我想你能夠提取你所需要的

來源

2013-01-10 11:55:20 kidwon

我已經加載在iframe中的本地HTML沒有麻煩過去，只要我知道文件名。我想要的是一種列出FILENAMES的方法，以便我可以從這個文件名列表中動態地創建iframe（或鏈接或任何其他元素）。 – heltonbiker

我編輯了問題幷包含了我想要的psedo代碼塊做。 – heltonbiker

我明白了，但我想這對js來說是不可能的。我建議你使用你的操作系統的一些語言和工具來生成這個列表。 – kidwon

AFAIK，這是不可能做到這一點在普通的JavaScript。您需要一些服務器端代碼告訴瀏覽器文件列表。可能最簡單的方法是在服務器響應期望的文件列表的情況下進行AJAX調用。

這正是jQuery File Tree所做的。這是一個有點舊的代碼（從2008年開始），所以也許與當前版本的jQuery有些不兼容，但是你可以從中得到一些啓發。 :-)

來源

2013-01-10 14:33:36

這是一個有點老問題，但我想很多人試圖找到一些解決方案。這是一個。

我使用NPAPI FILE IO擴展名創建了這種解決方案。已經編譯過擴展DLL的/ SO，所以如果你不想重新編譯，例如添加新的方法。您可以使用該庫並開發擴展到Firefox，Chrome和可能與AtiveX組件一起的IE。這是我爲Chrome做的。

1）下載svn回購。

2）對於較新的Chrome版本，請編輯manifest.json-文件位於test\extension-文件夾下。以下是我的manifest.json文件

{ 
    "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）將擴展安裝到chrome中。

4）在頁面中使用擴展名。以下是列出/ tmp文件夾中的文件的示例：

<!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>

來源

2013-09-04 05:20:26 iiro

從另一個html文件（使用javascript/jQuery）列出本地html文件，併爲它們動態創建鏈接

回答

相關問題