关于html：外部文件中Javascript中的相对路径


Relative Paths in Javascript in an external file

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

这在外部.js文件中，文件夹结构为

1
2
3
4
Site/Content/style.css
Site/Scripts/myjsfile.js
Site/Images/filters_expand.jpg
Site/Images/filters_colapse.jpg

这就是包含JS文件的地方

1
2
3
4
5
6
7
8
9
10
11
12
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文件的实际位置的路径？

相关讨论

javascript文件路径

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

为了使操作更简单，您可以打印出这样一个简单的JS声明，并在整个脚本中使用该变量：

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

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

如果你在2010年左右访问这个页面，你可以看看stackoverflow的HTML源代码，你可以在部分找到这个糟糕的一行程序[格式为3行：)。

相关讨论

通过分析引用javascript文件的"src"属性的dom，在运行时使用jquery获取该文件的位置：

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

(假设您的javascript文件名为'example.js')

相关讨论

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

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

用途：

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

在加载到页面的CSS文件中写入：

1
2
3
.xxx {
  background-image:url('../Images/filters_collapse.jpg');
}
相关讨论

问得好。

  • 当在CSS文件中时，URL将相对于CSS文件。

  • 使用javascript编写属性时，URL应该始终相对于页面(请求的主资源)。

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

1
2
3
<script type="text/javascript">

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

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

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>


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



   

       <span id="title">

        </span>
   
   


        @RenderBody()
   
   
        <span></span>

我用了佩卡的图案。我想还有另一种模式。

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

并在myjsfile.js中解析了querystring。

插件jquery插件

我发现这个对我有用。

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

当然，在脚本标记之间…(我不知道为什么脚本标签没有出现在这篇文章中)……

相关讨论

请使用以下语法享受javascript中ASP.NET tilda("~")的奢华。

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

这在ASP.NET Web窗体中工作得很好。

将脚本更改为

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

我为每个目录级别都有一个母版页，这在页面初始化事件中

1
2
3
4
  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)

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

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

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