相对文件路径在 JavaScript 中不起作用答案

【问题标题】：Relative file path not working in JavaScript相对文件路径在 JavaScript 中不起作用
【发布时间】：2018-04-04 23:29:00
【问题描述】：

我试图通过在折叠代码上方包含内联 css 来加快页面加载速度。这适用于根目录中的页面，但我在加载子文件夹中页面末尾的其余 CSS 文件时遇到问题（即http://example.com/other/index.html）。

如果当前文件位于根文件夹中，则以下代码可以正常工作：

   <script>var cb = function() {
var l = document.createElement('link'); l.rel = 'stylesheet';
l.href = 'css/a1tg2.css';
var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);</script>

但如果当前文件位于子文件夹中，则以下代码不起作用：

 <script>var cb = function() {
var l = document.createElement('link'); l.rel = 'stylesheet';
l.href = '../css/a1tg2.css';
var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);</script>

另外，如果我尝试使用绝对路径，它也不起作用：

   <script>var cb = function() {
var l = document.createElement('link'); l.rel = 'stylesheet';
l.href = 'http://example.com/css/a1tg2.css';
var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);</script>

文件的相对位置是正确的，因为如果我在文档的头部有以下行：

<link href="../css/a1tg2.css" rel="stylesheet" type="text/css">

它也可以正常工作，但我不想使用它，因为它会减慢页面的呈现速度。我不精通 JavaScript，只是从在线关键路径 CSS 生成器中获取所需的代码。任何人都可以提供一个解决方案，因为这个网站上的类似问题都没有一个令人满意的答案。

【问题讨论】：

试试这个：href = '/css/a1tg2.css';
@Grant 不，这也不起作用
你是在网络服务器还是文件系统上运行它？
实际上，您应该重新考虑为什么不能在代码中使用链接属性。这通常不会减慢您的渲染速度...
@Grant 在网络服务器上

标签： javascript php critical-css

【解决方案1】：

检查生成的 html 文件的链接并使用相对于该页面的路径。例如：如果你的目录结构是：

 - css
    - a1tg2.css
- pages
   - header.php
   - footer.php
- index.php

如果你在 index.php 中包含 header.php，那么 header.php 中 css 文件的相对路径应该是 css/a1tg2.css 而不是 ../css/a1tg2.css

【讨论】：