Javascript 文件系统中的动态网站导航（所有页面一个文件）-无Web服务器

您好，我有一个在windows文件系统中没有Web服务器的网站。 现在我将重构旧的导航，并计划在单独的文件夹中只使用一个导航文件

在导航文件夹中，应将链接设置为根文件夹的从属链接。根文件夹没有特定的名称，但在根文件夹中始终有start.html

例如

c:\test\start.html is the root file 
c:\test\foo\foo.html is another file
c:\test\bar\bar.html is another file
c:\test\bar\foobar\foobar.html is another file

所有这些文件都包括定义链接的navigation.js

     'text' : 'start',
     'a_attr' : { 'href': 'start.html'}

     'text' : 'foo',
     'a_attr' : { 'href': 'foo/foo.html'},

     'text' : 'bar',
     'a_attr' : { 'href': 'bar/bar.html'},

     'text' : 'foobar',
     'a_attr' : { 'href': 'bar/foobar/foobar.html'},

当我在start.html中包含此导航时，效果很好。所有链接都具有正确的关系

但是当我把它包含在foo.html中时，链接的关系就错了。因为start.html不在foo文件夹中

那么问题是，有没有一种通用的方法来获取根文件夹并动态设置导航链接？
或者，是否可以检查当前文件位于对start.html的深层引用的哪个文件夹中

All files in test has folder-deep 0
All files in foo has folder-deep 1
All files in bar has folder-deep 1
All files in foobar has folder-deep 2

我不能使用绝对链接，因此需要相对链接。 然后，当我使用绝对链接时，我无法将包含所有子文件夹的网站文件夹移动到另一个驱动器

---

当我使用root relative link\start.html时，则链接与驱动器相关，这也是错误的。

好的，我有一个可能的解决方案，但第一次调用页面或使用crtl+f5重新加载时，这项工作不正确

在根文件夹中，我放置一个带有特殊名称的png图像，例如start.png

现在我调用navigation.js函数检查图像是否存在

function UrlExists(url)
{
   var img = new Image();
   img.src = url;
   if (img.height!= 0){
       k = true;
   }else{k = false}
   return k;
}

function createUrl(x){
    k = "";
    while(x>0){
        k += "../";
    x=x-1;
    }
    return k;
}

var subFolderDeep = "";

x = 8;
while(x>0){
    urlLen = createUrl(x);
    if(UrlExists(urlLen + "start.png")){
        subFolderDeep = urlLen;
        break;
    }
    x=x-1;
}

alert(subFolderDeep);
startNavigation(subFolderDeep);

 'text' : 'start',
 'a_attr' : { 'href': subFolderDeep + 'start.html'}

 'text' : 'foo',
 'a_attr' : { 'href': subFolderDeep + 'foo/foo.html'},

 'text' : 'bar',
 'a_attr' : { 'href': subFolderDeep + 'bar/bar.html'},

 'text' : 'foobar',
 'a_attr' : { 'href': subFolderDeep + 'bar/foobar/foobar.html'},

但在第一次启动时，子文件夹deep甚至是“”；当我刷新页面或使用navigationlink调用新页面时，我会得到正确的子文件夹深度

当我第一次调用调试器时，我也得到了正确的结果

例如，对于bar/foobar/foobar，我得到子文件夹deep=“../../”，但在第一次调用时为=“”

通过日志，我看到了问题所在

在第一次调用时，图像的高度为0；下一次刷新时，高度为24。问题在哪里

"file:///start.png" navigation.js:6:3
0 navigation.js:7:3
"file:///start.png" navigation.js:6:3
0 navigation.js:7:3
"file:///start.png" navigation.js:6:3
0 navigation.js:7:3
"file:///start.png" navigation.js:6:3
0 navigation.js:7:3
"file:///D:/start.png" navigation.js:6:3
0 navigation.js:7:3
"file:///D:/someFolder/start.png" navigation.js:6:3
0 navigation.js:7:3
**"file:///D:/someFolder/rootFolder-test/start.png" navigation.js:6:3
0 navigation.js:7:3**
"file:///D:/someFolder/rootFolder-test/k/start.png" navigation.js:6:3
0




"file:///start.png" navigation.js:6:3
0 navigation.js:7:3
"file:///start.png" navigation.js:6:3
0 navigation.js:7:3
"file:///start.png" navigation.js:6:3
0 navigation.js:7:3
"file:///start.png" navigation.js:6:3
0 navigation.js:7:3
"file:///D:/start.png" navigation.js:6:3
0 navigation.js:7:3
"file:///D:/someFolder/start.png" navigation.js:6:3
0 navigation.js:7:3
**"file:///D:/someFolder/rootFolder-test/start.png" navigation.js:6:3
24**

---

好的，我已经解决了这个问题

预加载时间是一个因素

这就是解决办法

function preloadimages(subFolderDeep){
    var arr=[];
    arr.push(subFolderDeep + "7/e32l?.png");
    var newimages=[], loadedimages=0
    var arr=(typeof arr!="object")? [arr] : arr
    for (var i=0; i<arr.length; i++){
        newimages[i]=new Image()
        newimages[i].src=arr[i];
        i.src = arr[i];
        newimages[i].onload=function(){
            console.log(newimages[0].src);
            console.log(i);
            startNavigation(subFolderDeep);
        }
        newimages[i].onerror=function(){
        console.log(newimages[0].src);
        subFolderDeep = subFolderDeep + "../"
        preloadimages(subFolderDeep);
        }
    }
}

//sample run
preloadimages("");

函数预加载图像（子文件夹深度）{
var-arr=[]；
arr.push（子文件夹deep+“7/e32l？.png”）；
var newimages=[]，loadeImage=0
var arr=（typeof arr！=“object”）？[arr]：arr
对于（var i=0；为了满足您的所有需求，而无需绝对url，您必须为每个页面使用不同的
navigation.js
。是否还有其他方法可以检查与特定文件（例如start.html）相关的文件夹深度？我可以使用javascript进行检查吗