是<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