4

为了处理网站中的相对路径，我使用在每个页面中<base>添加的标签。<head>通过文档中类似相对路径加载的所有资源都已正确获取并显示，但是浏览器（我的试验中的 Chrome 和 Firefox）加载每个资产两次，一次使用真正的相对路径（给出 404 错误）和第二次<base>在它之前附加了标签。

我在每个 html 文件中手动编写了这个脚本来实现这样的标签：

<head>
    <script>
        /* Where am I? */
        here = window.location.href;
        hereIndex = here.indexOf('prd-ita'); //find path to main folder

        /* make substring from local root till prd-ita/ */
        newPathname = here.substring(0, hereIndex+10); //+8 to consdier also prd-ita/


        document.write('<base id="host" href="' +  newPathname  + '"/>');
    </script>

...
</head>

例如，为了澄清，我的文件夹结构是例如：

  • prd-ita
    • 索引.html
    • 文件夹1
      • 文件1.html
      • 图片.jpg
      • 子文件夹2
        • 文件2.html

无论加载哪个 html 文件，基本标记的生成 href 都是file:///D:/myWebsite/prd-ita/，并且在 file2.html 中我加载了一个带有 path 的资源src="folder1/pic.jpg"。
从检查工具中，我看到进行了两次加载尝试：

  1. 错误的路径（解释了真正的相对路径） file:///D:/myWebsite/prd-ita/folder1/subfolder2/folder1/pic.jpg
  2. 正确的路径（附加基本标签）file:///D:/myWebsite/prd-ita/folder1/pic.jpg

在您询问之前，我不会使用/开始我的相对路径，因为它被解释为文件所在的驱动器号，我需要主 prd-ita 文件夹的完整路径。我只想使用客户端代码（例如没有 php）。

4

1 回答 1

1

我遇到了同样的问题，对我有用的解决方案是defer在脚本元素上添加属性。不过，这可能并不理想，具体取决于您的应用程序。

来自Mozilla 文档：

此布尔属性设置为向浏览器指示脚本将在文档被解析后执行。由于所有其他主要浏览器尚未实现此功能，因此作者不应假设脚本的执行实际上会被延迟。不应该在没有 src 属性的脚本上使用 defer 属性。从 Gecko 1.9.2 开始，没有 src 属性的脚本会忽略 defer 属性。但是，在 Gecko 1.9.1 中，如果设置了 defer 属性，甚至内联脚本也会被延迟。

于 2015-09-22T21:43:12.643 回答