是<script src="file.js"> the same as <script src="./file.js">?

Question

在 HTML 文件中，以下两个脚本在功能上是否相同？

索引.html

  <script src="file.js"></script>

和

  <script src="./file.js"></script>

据我所知，当文件被解析时：

(1)默认使用HTML文件的当前目录来解析相对路径，

(2) 所以“file.js”和“./file.js”是使用HTML文件的路径/目录来解析的。

当我对此进行试验时，它们在我的测试浏览器/服务器中的工作方式相同，但是当它位于带有路由的 nginx 负载均衡器后面时，它就会失败。 但我认为这是一个不同的问题，这将是一个完全不同的问题。

编辑： PATH 环境变量的值和可执行文件查找规则与 HTML <script src="file.js">的处理方式无关。

Answer 1

虽然脚本的 MDN 文档没有帮助，但这篇文章http://brianvanderplaats.com/2017/01/16/understanding-relative-urls/涵盖了这个问题并解释了如何处理相对路径。

这个怎么运作

处理脚本的方式不是由服务器决定，而是由浏览器决定。 浏览器解析元素并发出 HTTP GET 请求以请求 javascript 文件。

例如，如果打开以下浏览器页面http://host.com/app/dir1/index.html并找到以下脚本元素：

    <script src="file.js"></script>

在 Chrome 的 devtools 中检查时，我看到发送到服务器的文件的 HTTP GET。

http://host.com/app/dir1/file.js

标准怎么说

4.3.1 中的HTML 标准script 元素说：

如果元素具有 src 属性，则必须相对于元素解析该属性的值，如果解析成功，则必须从元素文档的来源获取指定的资源。

这意味着相对于 index.html 文件，然后通过文档的来源（即document.location.origin进行请求。 注意：从技术上讲，元素指的是 DOM 元素，但我保持简单。

如果我们更改 index.html 文件以包含一个点，那么我们会看到发出了相同的 HTML GET。 所以这：

    <script src="./file.js"></script>

还导致发出相同的 HTTP GET：

http://host.com/app/dir1/file.js

希望这清楚地表明src="file.js"在功能上与src="./file.js" 。

使用`<base>`元素时电流会改变

值得注意的是，如果<base>元素存在，那么将使用它而不是当前位置。 例如，

<html>
  <head>
    <base href="https://just-a-test/dir1/">
    <script src="./file33.js"></script>
  </head>
  <body>... rest not shown

然后浏览器会发出一个 HTTP GET 请求

https://just-a-test/dir1/file33.js

另一个有趣的情况是，相对路径使用子目录或点-点语法来访问父目录../images/img1.png 。

在这两种情况下，浏览器都会为它认为是正确名称的资源解决名称和问题以及 HTTP GET 请求。 所以

<html>
  <head>
    <base href="https://just-a-test/dir1/">
  </head>
  <body>
    <img src="../images/img1.png"></script>
  </body>
</html>

导致对以下文件的 HTTP GET 请求。

 https://just-a-test.com/images/img1.png

`<base>`可以包含文件名

最后， <base>元素可以包含一个文件名，例如：

<html>
  <head>
    <base href="https://just-a-test/dir1/index.html">
  </head>
  <body>
    <img src="img44.png"></script>
  </body>
</html>

发生这种情况时，文件名将被删除，只使用剩余的路径，因此在这种情况下，会为此文件发出 HTTP GET 请求。

 https://just-a-test.com/dir1/img44.png

而不是文件https://just-a-test.com/dir1/index.html/img44.png 。

我提出这个案例是因为一个常见的错误是去掉尾部斜杠并想知道为什么事情不起作用。 例如，

<html>
  <head>
    <base href="https://just-a-test/dir1">
  </head>
  <body>
    <img src="img44.png"></script>
  </body>
</html>

导致 HTTP GET 请求到

https://just-a-test.com/img44.png

这可能会让您认为它不起作用。 发生这种情况是因为dir1与前面示例中的index.html一样被查看，并且在发出 HTTP GET 请求时被忽略。

<base>文档

base 的 MDN 文档在这里， <base>的 HTML5 标准在这里。 我的亮点是：

如果文档没有元素，则浏览器使用 location.href。 基础可以包括文件名。
如果使用多个元素，则仅遵循第一个 href 和第一个目标——所有其他元素都将被忽略。
基本元素必须具有 href 属性、目标属性或两者兼有。
基本元素必须放在<head>元素中。
基本元素没有结束标记。

Answer 2

从 Web 浏览器的角度来看，两者之间没有区别。

然而，在* nix系统，例如外壳， file.js将搜查$PATH ，而./file.js会在当前目录中搜索。

是<script src="file.js"> the same as <script src="./file.js">?

问题描述

2 个解决方案

解决方案1
1 2021-04-16 01:52:41

这个怎么运作

标准怎么说

使用`<base>`元素时电流会改变

`<base>`可以包含文件名

解决方案2
0 2021-04-15 02:32:50

是<script src="file.js"> the same as <script src="./file.js">?

问题描述

2 个解决方案

解决方案1 1 2021-04-16 01:52:41

这个怎么运作

标准怎么说

使用<base>元素时电流会改变

<base>可以包含文件名

解决方案2 0 2021-04-15 02:32:50

解决方案1
1 2021-04-16 01:52:41

使用`<base>`元素时电流会改变

`<base>`可以包含文件名

解决方案2
0 2021-04-15 02:32:50