外部文件中Javascript中的相对路径_Javascript_Html_Asp.net Mvc_Css_Path

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

javascript html asp.net-mvc css path

外部文件中Javascript中的相对路径,javascript,html,asp.net-mvc,css,path,Javascript,Html,Asp.net Mvc,Css,Path,所以我运行这个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.a

所以我运行这个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\u collapse.jpg”

，但也不起作用；但是，如果我使用

“../../Images/filters\u collapse.jpg”

，它似乎可以在服务器上工作

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

更新

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

好问题

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

据我所知，JS中没有内置的

tilde

功能。通常的方法是定义一个JavaScript变量，指定基本路径：

<script type="text/javascript">

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

</script>


目录\u根=”http://www.example.com/resources";

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

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

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

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

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


var-imagePathhttp://sstatic.net/so/img/';

如果您在2010年左右访问此页面，您只需查看一下StackOverflow的html源代码，您就可以在

部分找到这个糟糕的一行代码[格式为3行：）

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

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

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

通过解析引用javascript文件的“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'）

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

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

使用：

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

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

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

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

您需要添加

runat=“server”

并为其分配ID，然后指定如下绝对路径：

在codebehind中，您可以使用ID以编程方式更改src。

我发现这对我有用

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

document.write（unescape（“%3Cscript src=””+window.location.protocol+“/”）
window.location.host+“/”+”js/general.js？ver=2“%3E%3C/script%3E”）

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

这在ASP.NET webforms中效果很好

将脚本更改为

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

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

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

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

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


var templatesPath=“@Url.Content”（~/Templates/”）；
@RenderBody（）

与服务器相比，您的应用程序目录在开发中是否有所不同？Visual Studio的内置web服务器将默认路径设置为“/”，如果您的服务器说“/MyApp”，则您可能会有不一致的行为。尝试将visual studio路径设置为“/MyApp”，这正是问题所在！根据虚拟目录的位置，我不想每次从开发切换到生产时都要更新我的javascript…看起来，这就是您要寻找的。我正在使用javascript动态更改div标记的背景图像。我希望避免将代码放回母版页文件中，因为它本身的外部.JS文件要干净得多……没有什么比~更适合javascript了。在JS中可以有一个helper函数。例如，您可以调用MyJs.Url（'Images/filters.jp'），并将其作为虚拟目录的前缀，然后返回字符串。这样，您只需在部署时将其更改一个位置。我最终完成了此操作，只是使用了Url.Content来生成

imagePath的值。

谢谢！哈哈，我也做了同样的事情，然后回来看了你的评论，内特。这很有效，但也确实是一个解决办法，不是一个合适的解决方案@schory的回答给了我OP问题的解决方案。我使用

Url.Content（“~”）

获取应用程序根目录。hthI也喜欢做

var-imagePath=window.location.protocol+“/”+window.location.host+“/”

$（“#FkngDiv”）.load（jsFileLocation+”./FkngFolder/FkngPage.aspx）对我来说就像一个魔咒。我用这种方式返回一个文件夹级别，然后我只指向我想要的路径。回答得很好。我会将

.replace

表达式更改为

jsFileLocation.replace（/example\.js.*$/，“”）

，以防在

.js

后面出现类似版本号的查询字符串，亲爱的先生，您是我最新的英雄！使用此解决方案在ASP.NET MVC应用程序中的服务器上查找我的css路径，该路径从我的javascript文件夹的一侧从文件夹中动态加载…硬编码根目录在开发框、测试服务器等上不起作用。如果我使用非css属性，则不起作用。例如：

。我不能用css设置这个src属性。我不知道你的答案为什么会被否决。这就是我经过几个小时的奋斗后所做的。。。（Y）我认为这是因为它指向而不是，我认为这没有什么不同

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

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