文件系统中的动态网站导航(一个文件用于所有页面）—无需Web服务器

Dynamic website-navigation (one file for all pages) in a filesystem - without webserver

本文关键字：服务器 无需 用于 Web 一个 动态 网站导航 文件系统 文件      更新时间：2023-09-26

你好，我有一个在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

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

当我使用根相对链接''start.html时，链接与驱动器相关，这也是错误的。

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

在根文件夹中，我放置了一个带有特殊名称的png imgage，例如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'},

但在第一次启动时，subFolderDeep甚至是"；当我刷新页面或使用navigationlink调用新页面时，我会得到正确的subFolderDeep；

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

例如bar/foobar/foobar，我得到subFolderDeep="../../"，但在第一次调用时="；

根据日志，我看到问题了。

在第一次调用时，图像的高度为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("");

我正在寻找特别的7/e32l？。png在我的根目录中。当图像可以加载时，我有从活动文件到根目录的相对深度。这个相对深度必须包含在导航中，然后我可以对所有文件使用一个导航。

相关文章：