微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

浏览器如何解析'./'的相对位置?

如何解决浏览器如何解析'./'的相对位置?

我将许多小型的半静态单页 web 应用程序合并到一个更大的网站中。后端是很多代理,但前向服务器基本上只是让应用程序看起来像是从根文件路径移动到更具体的路径。 IE:

/
├── css
│   └── app1.css
├── index.html
└── js
    └── app1.js

将移至

/apps/app1/
├── css
│   └── app1.css
├── index.html
└── js
    └── app1.js

这种迁移相对轻松,主要是因为在应用的 html 文件中使用了 ./,因此大多数应用只是加载相对于其新位置的资源。我遇到的问题是某些应用程序以不同的方式解析 ./。对于这些故障情况,主要的 html 文件被加载;然而,./script 元素中的 style 解析为更高的文件路径(IE:我希望 ./ 解析为 /apps/app1 但是我得到 /apps)。这可能是巧合,但出现问题的应用通常有额外的非索引 HTML 文件

如何解析 ./ 的规则是什么?

解决方法

  1. 确定基本 URL
    • 这通常是 HTML 文档的 URL
    • 它可能会被 base element
    • 覆盖
    • 对于 CSS,它是样式表的 URL
      • JS 总是相对于 HTML 文档
  2. 删除 URL path 部分中最后一个 / 之后的所有内容
    • 例如https://example.com/example/foo?bar=baz#fragment 的基本 URL 是 https://example.com/example/
    • 请记住,HTML 文档可能在路径 /example/example/ 处可见,您应该通过使路径规范化来避免这种情况(我更喜欢以 {{1} }) 并从另一个重定向到它
  3. 去掉相对路径前面的 /
  4. 将第 3 步的结果附加到第 2 步的结果

一个常见的问题是将 URL 与文件路径混淆。虽然一个简单的静态站点通常在它们之间具有直接的 1:1 映射,但许多现代站点将使用路由代码(例如 for Express 用于 HTML 文档,单独的 static route 用于静态文件,如图像、js 和

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。