外部文件中 Javascript 中的相对路径答案

【问题标题】：Relative Paths in Javascript in an external file外部文件中 Javascript 中的相对路径
【发布时间】：2011-01-12 09:25:20
【问题描述】：

所以我正在运行这个 javascript，一切正常，除了背景图像的路径。它适用于我的本地 ASP.NET 开发环境，但在部署到虚拟目录中的服务器时不起作用。

这是在一个外部的.js文件中，文件夹结构是

Site/Content/style.css
Site/Scripts/myjsfile.js
Site/Images/filters_expand.jpg
Site/Images/filters_colapse.jpg

那么这就是包含js文件的地方

Site/Views/ProductList/Index.aspx

$("#toggle").click(function() {
    if (left.width() > 0) {
        AnimateNav(left, right, 0);
        $(this).css("background", "url('../Images/filters_expand.jpg')");
    }
    else {
        AnimateNav(left, right, 170);
        $(this).css("background", "url('../Images/filters_collapse.jpg')");
    }
});

我尝试过使用'/Images/filters_collapse.jpg'，但这也不起作用；但是，如果我使用'../../Images/filters_collapse.jpg'，它似乎可以在服务器上运行。

基本上，我希望拥有与 ASP.NET tilda 相同的功能 -- ~。

更新

外部 .js 文件中的路径是相对于它们所在的页面还是 .js 文件的实际位置？

【问题讨论】：

你的应用程序目录在开发中和服务端有区别吗？如果您的服务器显示“/MyApp”，则 Visual Studio 的内置 Web 服务器会将默认路径设置为“/”，您可能会有不一致的行为。尝试将您的 Visual Studio 路径设置为“/MyApp”
这正是问题所在！根据虚拟目录所在的位置，我不想每次从开发切换到生产时都更新我的 javascript...
看起来像这样，superexpert.com/blog/archive/2009/02/18/…，就是你要找的东西。
我正在使用 javascript 来动态更改 div 标签的背景图像。我想避免将代码放回母版页文件，因为它更干净自己的外部 .JS 文件...
对于 javascript，没有什么比 ~ 更好的了。你可以在 JS 中有一个辅助函数。例如，您将调用 MyJs.Url('Images/filters.jp') 并将此前缀添加到您的虚拟目录并返回字符串。这样，您只需在部署时将其更改一个位置。

标签： javascript html asp.net-mvc css path

【解决方案1】：

好问题。

在 CSS 文件中时，URL 将相对于 CSS 文件。
使用 JavaScript 编写属性时，URL 应始终相对于页面（请求的主要资源）。

据我所知，JS 中没有内置 tilde 功能。通常的方法是定义一个 JavaScript 变量来指定基本路径：

<script type="text/javascript">

  directory_root = "http://www.example.com/resources";

</script>

并在您动态分配 URL 时引用该根目录。

【讨论】：

硬编码根在您的开发盒、测试服务器等上不起作用。

【解决方案2】：

JavaScript 文件路径

在脚本中，路径是相对于显示页面的

为了让事情变得更简单，你可以打印出这样一个简单的 js 声明，并在你的脚本中使用这个变量：

2010 年 2 月左右在 StackOverflow 上采用的解决方案：

<script type="text/javascript">
   var imagePath = 'http://sstatic.net/so/img/';
</script>

如果您在 2010 年左右访问此页面，您可以看看 StackOverflow 的 html 源代码，您可以在 <head />部分

【讨论】：

我最终这样做了，但我使用 Url.Content 生成 imagePath. 的值，谢谢！
哈哈我做了同样的事情，然后回来阅读你的评论 nate。
这可行，但它也绝对是一种解决方法，而不是适当的解决方案。 @schory 的回答给了我解决 OP 问题的方法。
我使用Url.Content("~") 获取Application 根目录。 hth
我也喜欢做var imagePath = window.location.protocol + "//" + window.location.host + "/"

【解决方案3】：

我使用了 pekka 的模式。我认为另一种模式。

<script src="<% = Url.Content("~/Site/Scripts/myjsfile.js") %>?root=<% = Page.ResolveUrl("~/Site/images") %>">

并在 myjsfile.js 中解析查询字符串。

Plugins | jQuery Plugins

【讨论】：

【解决方案4】：

在运行时使用 jQuery 通过解析引用它的 'src' 属性的 DOM 来获取 javascript 文件的位置：

var jsFileLocation = $('script[src*=example]').attr('src');  // the js file path
jsFileLocation = jsFileLocation.replace('example.js', '');   // the js folder path

（假设您的 javascript 文件名为“example.js”）

【讨论】：

$("#FkngDiv").load(jsFileLocation+"../FkngFolder/FkngPage.aspx") 对我来说就像一个魅力。我用这种方式返回一个文件夹级别，然后我只是指向我想要的路径。
很好的答案。我会将.replace 表达式更改为jsFileLocation.replace(/example\.js.*$/, '')，以防在.js 之后有类似版本号的查询字符串
你亲爱的先生，是我最新的英雄！使用此解决方案在 ASP.NET MVC 应用程序中的服务器上查找我的 css 路径，该应用程序是从我的 javascript 文件夹一侧的文件夹中动态加载的...

【解决方案5】：

正确的解决方案是使用 css 类而不是在 js 文件中写入 src。例如，而不是使用：

$(this).css("background", "url('../Images/filters_collapse.jpg')");

使用：

$(this).addClass("xxx");

并在页面中加载的css文件中写入：

.xxx {
  background-image:url('../Images/filters_collapse.jpg');
}

【讨论】：

如果我使用的是非 CSS 属性，这将不起作用。例如：<img src="/codes/imgs/a.png">。我无法通过 css 设置这个 src 属性。

【解决方案6】：

请使用以下语法在javascript中享受asp.net tilda("~")的奢华

<script src=<%=Page.ResolveUrl("~/MasterPages/assets/js/jquery.js")%>></script>

【讨论】：

【解决方案7】：

您需要添加runat="server" 并为其分配一个ID，然后像这样指定绝对路径：

<script type="text/javascript" runat="server" id="myID" src="~/js/jquery.jqGrid.js"></script>]

在代码隐藏中，您可以使用 ID 以编程方式更改 src。

【讨论】：

【解决方案8】：

我发现这对我有用。

    <script> document.write(unescape('%3Cscript src="' + window.location.protocol + "//" +     
    window.location.host + "/" + 'js/general.js?ver=2"%3E%3C/script%3E'))</script>

当然是在脚本标签之间...（我不确定为什么脚本标签没有出现在这篇文章中）...

【讨论】：

我不知道为什么你的回答被否决了。经过数小时的奋斗，这对我有用...（Y）
我认为因为这指向servername/js而不是servername/applicationname/js，我认为这与“/js”没有什么不同

【解决方案9】：

这在 ASP.NET 网络表单中运行良好。

把脚本改成

<img src="' + imagePath + 'chevron-large-right-grey.gif" alt="'.....

每个目录级别都有一个母版页，这在 Page_Init 事件中

  Dim vPath As String = ResolveUrl("~/Images/")
    Dim SB As New StringBuilder
    SB.Append("var imagePath = '" & vPath & "'; ")
    ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), "LoadImagePath", SB.ToString, True)

现在无论应用程序是在本地运行还是部署，您都可以获得正确的完整路径

http://localhost:57387/Images/chevron-large-left-blue.png

【讨论】：

【解决方案10】：

对于我正在开发的 MVC4 应用程序，我在 _Layout.cshtml 中放置了一个脚本元素，并为所需路径创建了一个全局变量，如下所示：

<body>

<script>
    var templatesPath = "@Url.Content("~/Templates/")";
</script>

<div class="page">
    <div id="header">

       <span id="title">

        </span>
    </div>
    <div id="main">


        @RenderBody()
    </div>
    <div id="footer">
        <span></span>
    </div>
</div>

【讨论】：