How to dynamically get the directory of the file r

问题:

I am trying to switch between pages from multiple directories, what I have currently is right but once I have +300 HTML pages, I can't have it like this:

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);
  }      
} 

In the href of the pages, for example: "/Ofertas/offers.html", I want it to dynamically get the directory of the page which I am sort of doing at the beginning with the location.pathname. But now, I want it to insert in that place dynamically when changing between pages. Anyone knows how to do it?

回答1:

JavaScript cannot access file system (there is File API but that would not help you) so you cannot get content of direcotry.

You can create some server endpoint that would return content of given folder in e.g. JSON and then call this endpoint from JavaScript using e.g. XMLHttpRequest (or $.ajax or anything...)

Moreover your code is not very efficient, you should avoid calling repetitively appendChild if not really necessary. Use document fragment instead. More details: https://coderwall.com/p/o9ws2g/why-you-should-always-append-dom-elements-using-documentfragments

回答2:

I found a way to do it. Here's the final code:

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);
  }      
}