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

84

因此，我正在运行此javascript，并且除背景图片的路径外，其他所有功能都正常运行。它可以在我的本地ASP.NET Dev环境中工作，但是在部署到虚拟目录中的服务器时不起作用。

这在外部.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文件中的路径是相对于它们所包含的Page的位置，还是.js文件的实际位置？

— 内特
source

与服务器相比，您的应用程序目录在开发中是否有所不同？如果您的服务器说“ / MyApp”，则Visual Studio内置的Web服务器会将默认路径设置为“ /”，则行为可能会不一致。尝试将Visual Studio路径设置为“ / MyApp”

— sarvesh 2010年

那就是问题所在！根据虚拟目录所在的位置，我不想每次从dev切换到生产时都必须更新我的javascript ...

— Nate 2010年

看起来像superexpert.com/blog/archive/2009/02/18/…，这就是您所需要的。

— sarvesh'2

我正在使用JavaScript动态更改div标签的背景图像。我想避免将代码放回到母版页文件中，因为它更干净了自己的外部.JS文件...

— Nate 2010年

javascript没有类似〜的东西。您可以在JS中有一个辅助函数。例如，您将调用MyJs.Url（'Images / filters.jp'），并将其作为虚拟目录的前缀并返回字符串。这样，您只需要在部署时将其更改为一个位置即可。

— sarvesh'2

136

JavaScript文件路径

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

为了使事情变得更容易，您可以打印出一个简单的js声明，并在整个脚本中使用此变量：

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

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

如果您在2010年左右访问此页面，则只需看一下StackOverflow的html源，您就可以在本<head />节中找到此坏蛋一字形[格式为3行:)]

— 尤拉·布拉洪卡（Juraj Blahunka）
source

7

我最终做了这个，除了我使用Url.Content生成了imagePath.感谢的值！

— Nate

2

哈哈，我做了同样的事情，然后回来阅读你的评论。

— Chev 2010年

1

这可行，但从定义上来说，这也是一种解决方法，而不是适当的解决方案。@schory的答案为我提供了OP问题的解决方案。

— daniloquio 2012年

7

我曾经Url.Content("~")获得过应用程序根目录。hth

— GraehamF 2013年

3

我也喜欢这样做var imagePath = window.location.protocol + "//" + window.location.host + "/"

— JeanValjean

48

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

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

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

— schory
source

$（“＃FkngDiv”）。load（jsFileLocation +“ ../ FkngFolder / FkngPage.aspx”）对我来说就像是一种魅力。我以这种方式使用它来返回一个文件夹级别，然后仅指向所需的路径。

— daniloquio 2012年

6

很好的答案。如果在.replacejsFileLocation.replace(/example\.js.*$/, '').js

— yitwail 2012年

1

亲爱的先生，您是我最新的英雄！使用此解决方案在ASP.NET MVC应用程序中的服务器上找到我的css路径，该路径是从一个文件夹动态加载的，而该文件夹的位置与我的javascript文件夹横向相同……

— Hutjepower

27

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

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

使用：

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

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

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

— PHPst
source

5

如果我使用的是非CSS属性，则此方法无效。例如：<img src="/codes/imgs/a.png">。我无法通过CSS设置此src属性。

— Reza

14

好问题。

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

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

<script type="text/javascript">

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

</script>

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

— 佩卡
source

13

硬编码的根在你的开发中，测试服务器等不能正常工作

— RickAndMSFT

5

对于我正在使用的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>

— 维贾亚安（Vijayanand Settin）
source

4

我使用了Pekka的图案。我认为还有另一种模式。

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

并在myjsfile.js中解析了querystring。

插件| jQuery插件

— Takepara
source

2

请使用以下语法在javascript中享受asp.net tilda（“〜”）的奢华

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

— 曼迪普（Mandeep Janjua）
source

2

我发现这对我有用。

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

当然在脚本标签之间...（我不确定为什么本文中未显示脚本标签）...

— 贾明
source

我不知道您的答案为什么会被否决。经过数小时的奋斗，这对我来说是有效的...（Y）

— Zia Ul Rehman Mughal

我认为是因为这指向的是servername / js而不是servername / applicationname / js，我认为这与“ / js”没有区别

— user1566694

0

您需要添加runat="server"和并为其分配ID，然后指定绝对路径，如下所示：

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

从后面的代码中，您可以使用ID以编程方式更改src。

— 萨米尔·艾哈迈德（Samir Ahmed）
source

0

这在ASP.NET Web窗体中效果很好。

将脚本更改为

<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

— ch
source