如何动态获取运行文件的目录

Question

我正在尝试在多个目录的页面之间切换，我目前的做法是正确的，但是一旦我有 +300 个 HTML 页面，我就不能这样了：

window.addEventListener('load', leftNav, false);

var x = location.pathname;
alert(x);

function leftNav() {
  appendUl('leftNav', 'outerUL'); 
  appendLiA('outerUL', 'offers', '/Ofertas/offers.html', 'Offers');
  appendLiA('outerUL', 'mobilecarriers', '/Ofertas/mobilecarriers.html', 'Mobile Carriers');
  appendLiA('outerUL', 'affilpixeltracking', '/Ofertas/affiliatepixel.html', 'Affiliate Pixel Tracking');
  appendLiA('outerUL', 'carrierip', '/Ofertas/carrierip.html', 'Carrier IP');
  appendLiA('outerUL', 'updtconverstats', '/Ofertas/Pag1.html', 'Update Conversion Status');
  appendLiA('outerUL', 'updtconverstats2', '/Ofertas/Pag4.html', 'Update Conversions Status - S2');
  appendLiA('outerUL', 'getconvdata', '/Ofertas/Pag2.html', 'Get Conversions Data'); 
  appendLiA('outerUL', 'getconvdata2', '/Ofertas/Pag6.html', 'Get Conversion Data - S2');
  appendLiA('outerUL', 'updtconverspr', '/Ofertas/Pag3.html', 'Update Conversions P/R'); 
  appendLiA('outerUL', 'updtconverpr2', '/Ofertas/Pag5.html', 'Update Conversions P/R - S2');
  appendLiA('outerUL', 'test', '/teste/index.html', 'Test');


function appendUl(append_to_id, ul_id) {

  var ul = document.createElement('ul');
  ul.id = ul_id;

  var appendTo = document.getElementById(append_to_id);
  appendTo.appendChild(ul);
}

function appendLiA(append_to_id, li_id, a_href, a_text, i_class) {

  var a = document.createElement('a');
  a.href = a_href;
  a.textContent = a_text;

  var li = document.createElement('li');
  li.id = li_id;
  li.appendChild(a);

  var appendTo = document.getElementById(append_to_id);
  appendTo.appendChild(li);
  }      
} 

在页面的href中，例如：“/Ofertas/offers.html”，我希望它动态获取页面的目录，我在开始时使用location.pathname。但是现在，我希望它在页面之间切换时动态插入到那个地方。有人知道怎么做吗？

Answer 1

JavaScript 无法访问文件系统（有 File API，但这对您没有帮助），因此您无法获取目录的内容。

您可以创建一些服务器端点，该端点将返回给定文件夹的内容，例如JSON，然后使用例如从 JavaScript 调用此端点XMLHttpRequest（或 $.ajax 或任何东西......）

此外，您的代码效率不高，如果没有必要，您应该避免重复调用appendChild。请改用文档片段。更多详情：https://coderwall.com/p/o9ws2g/why-you-should-always-append-dom-elements-using-documentfragments

Answer 2

我找到了一种方法。这是最终代码：

window.addEventListener('load', leftNav, false);

function leftNav() {
  var dirs=window.location.href.split('/'),
  cdir=dirs[dirs.length-2];

  var dir_ofertas = "";
  var dir_teste = "";

  if (cdir === "Ofertas") {
    dir_teste = '../teste/'; 

  }
  else if (cdir === "teste") {
    dir_ofertas = '../Ofertas/'; 

  }

  appendUl('leftNav', 'outerUL'); 
  appendLiA('outerUL', 'offers', dir_ofertas + 'offers.html', 'Offers');
  appendLiA('outerUL', 'mobilecarriers', dir_ofertas + 'mobilecarriers.html', 'Mobile Carriers');
  appendLiA('outerUL', 'affilpixeltracking', dir_ofertas + 'affiliatepixel.html', 'Affiliate Pixel Tracking');
  appendLiA('outerUL', 'carrierip', dir_ofertas + 'carrierip.html', 'Carrier IP');
  appendLiA('outerUL', 'updtconverstats', dir_ofertas + 'UpdtConvStats.html', 'Update Conversions Status');
  appendLiA('outerUL', 'getconvdata', dir_ofertas + 'GetConvData.html', 'Get Conversions Data'); 
  appendLiA('outerUL', 'updtconverspr', dir_ofertas + 'UpdtConv.html', 'Update Conversions P/R'); 
  appendLiA('outerUL', 'iptracker', dir_ofertas + 'iptracker.html', 'IP Tracker');
  appendLiA('outerUL', 'affiliates', dir_ofertas + 'Affiliates.html', 'Affiliates');
  appendLiA('outerUL', 'updateofferwhit', dir_ofertas + 'updateofferwhit.html', 'Update Offer Whitelist');
  appendLiA('outerUL', 'updateofferwhit2', dir_ofertas + 'updateofferwhit2.html', 'Update Offer Whitelist 2');
  appendLiA('outerUL', 'updateofferwhit3', dir_ofertas + 'updateofferwhit3.html', 'Update Offer Whitelist 3');
  appendLiA('outerUL', 'notdefined', dir_ofertas + 'Pag7.html', 'Not Defined'); 
  appendLiA('outerUL', 'notdefined2', dir_ofertas + 'Pag9.html', 'Not Definied 2');
  appendLiA('outerUL', 'test', dir_teste + 'index.html', 'Test');


function appendUl(append_to_id, ul_id) {

  var ul = document.createElement('ul');
  ul.id = ul_id;

  var appendTo = document.getElementById(append_to_id);
  appendTo.appendChild(ul);
}

function appendLiA(append_to_id, li_id, a_href, a_text, i_class) {

  var a = document.createElement('a');
  a.href = a_href;
  a.textContent = a_text;

  var li = document.createElement('li');
  li.id = li_id;
  li.appendChild(a);

  var appendTo = document.getElementById(append_to_id);
  appendTo.appendChild(li);
  }      
}