如何始终解析相对于我的 Web 应用程序根目录的 URL？答案

【问题标题】：How to always resolve URLs relative to my web applications root?如何始终解析相对于我的 Web 应用程序根目录的 URL？
【发布时间】：2012-03-26 03:34:09
【问题描述】：

我有一个 Web 应用程序，它是一个 JavaScript 文件，下面的代码行：

var arrowimages = { down: ['downarrowclass', 'images/AppNavDownArrow.gif', 23], right: ['rightarrowclass', 'images/AppNavRightArrow.gif'] }

当我位于 Web 应用程序的根目录时，对图像的引用按预期工作。当我浏览到我的应用程序中的子文件夹时，它会将相同的子文件夹添加到图像 URL 并且它不会加载。

当我在应用程序的子文件夹中时，如何修改代码使其指向创建图像路径？

【问题讨论】：

标签： javascript asp.net url reference

【解决方案1】：

您应该使用/ 引导路径。这样，路径将始终从域根目录解析。

var arrowimages = { down: ['downarrowclass', '/images/AppNavDownArrow.gif', 23], right: ['rightarrowclass', '/images/AppNavRightArrow.gif'] }

否则，它们将被解析为 relative 到当前 URL；通过将路径添加到当前文件夹的末尾（除非您使用的是 <base/ > tag（如果是，请将其删除）。

如果您的应用程序位于子文件夹中（例如 http://example.com/myapp），那么您需要在路径前加上 myapp 前缀，例如； /myapp/images/AppNavDownArrow.gif.

对于便携式解决方案，您可能需要考虑使用配置参数来存储应用的根目录（例如 root = /myapp/）。然后，您可以在 JavaScript 中的 config 对象中将此参数输出为 explained in my other answer。您的 URL 将如下所示；

var arrowimages = { down: ['downarrowclass', config.base + '/images/AppNavDownArrow.gif', 23], right: [config.base + '/rightarrowclass', '/images/AppNavRightArrow.gif'] }

【讨论】：

那行不通。我的应用程序 URL 是 http://www.mydomain.com/myapp，我的应用程序中图像文件夹的 URL 是 http://www.mydomain.com/myapp/images。当我将/ 添加到 URL 的开头时，它会返回到网站根目录而不是我的应用程序根目录
请将这些细节添加到您的原始问题中，以便更好地解释您的需求
@MichaelKniskern：查看我的更新。您必须在 URL 中包含 /myapp，或者更高级的内容，如我更新的答案所解释的。
谢谢。我将此解决方案与您在链接中提供的用于便携式解决方案的组合结合使用。
这正是我想要的。我希望我早点知道路径开头的 / 解析为域根目录。谢谢！

【解决方案2】：

使用/images/AppNavDownArrow.gif 代替images/AppNavDownArrow.gif。

【讨论】：

【解决方案3】：

虽然您可以在路径前加上“/”以映射到域根目录，但在 ASP.NET 中，域根目录并不总是等于应用程序根目录。如果您的开发环境的结构与您的生产环境不匹配，它还会使您的脚本变得脆弱。

改为：

var arrowImages = { down: ['downarrowclass', '<%= Page.ResolveClientUrl("~/images/AppNavDownArrow.gif") %>', 23], right: ['rightarrowclass', '<%= Page.ResolveClientUrl("~/images/AppNavRightArrow.gif")  %>'] }

这将确保您的路径指向 IIS 中当前应用程序上下文的根目录，无论是域根目录还是虚拟目录。

如果您不想将脚本放在页面上并将其保存在 .js 文件中，请在您的 masterpage/layout/whatever 中创建一个指向您的应用程序根目录的变量，然后在您的脚本文件：

<script type="text/javascript">
        var configuration = {
            applicationRoot: '<%= Page.ResolveClientUrl("~/") %>',
                currentPath: '<%= HttpContext.Current.Request.Path %>'
            }
</script>

在您的脚本文件中：

var arrowImages = { down: ['downarrowclass', configuration.applicationRoot +'/images/AppNavDownArrow.gif', 23], right: ['rightarrowclass', configuration.applicationRoot +'/images/AppNavRightArrow.gif'] }

【讨论】：