Javascript中的相对path在外部文件中

所以我运行这个JavaScript,并且一切工作正常,除了背景图像的path。 它在我的本地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' ,那也不pipe用; 但是,如果我使用'../../Images/filters_collapse.jpg' ,它似乎在服务器上工作。

基本上,我想要有与ASP.NET tilda – ~相同的function。

更新

外部.js文件中的path是相对于它们包含的页面还是.js文件的实际位置?

JavaScript文件path

在脚本中, path是相对于显示页面的

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

2010年2月左右在StackOverflow上采用的解决scheme:

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

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

通过parsing引用它的“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')

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

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

使用:

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

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

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

好问题。

  • 在CSS文件中,URL将与CSS文件相关。

  • 使用JavaScript编写属性时,URL总是相对于页面(请求的主要资源)。

在我所知道的JS中没有内build的tildefunction。 通常的方法是定义一个指定基本path的JavaScriptvariables:

 <script type="text/javascript"> directory_root = "http://www.example.com/resources"; </script> 

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

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

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

并在myjsfile.js中parsing查询string。

插件| jQuery插件

对于我正在处理的MVC4应用程序,我在_Layout.cshtml中放置了一个脚本元素,并为所需的path创build了一个全局variables,如下所示:

 <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> 

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

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

我发现这为我工作。

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

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

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

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

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

这在ASP.NET webforms中运行良好。

将脚本更改为

 <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) 

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

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