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




html asp.net-mvc (7)

所以我运行这个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文件中的路径是相对于它们包含的页面还是.js文件的实际位置?


JavaScript文件路径

在脚本中, 路径与显示的页面相关

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

解决方案,于2010年2月左右在采用:

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

如果你在2010年左右访问了这个页面,你可以看看的html源代码 ,你可以在<head />部分找到这个坏消息单行[格式化为3行:)]


一个合适的解决方案是使用一个css类,而不是在js文件中写入src。 例如,而不是使用:

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

使用:

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

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

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

对于我正在处理的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>


您需要添加runat="server" ,并为其分配一个ID,然后指定绝对路径,如下所示:

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

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


我用pekka的模式。 我认为还有另一种模式。

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

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

插件| jQuery插件


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

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

通过解析引用它的'src'属性的DOM,在运行时使用jQuery获取您的JavaScript文件的位置:

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

(假设你的JavaScript文件被命名为'example.js')







path