代码之家 › 专栏 › 技术社区 › Nate CSS Guy

外部文件中javascript的相对路径

path css asp.net-mvc html javascript

Nate CSS Guy · 技术社区 · 16 年前

所以我运行这个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_collapse.jpg' 但是,如果我使用 '../../Images/filters_collapse.jpg' .

基本上,我希望具有与asp.net tilda相同的功能-- ~ .

更新

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

10 回复 | 直到 10 年前

125

Juraj Blahunka 12 年前

javascript文件路径

在剧本里, 路径相对于显示的页面

为了简化操作,您可以打印出这样一个简单的js声明,并在脚本中使用此变量:

解决方案,用于 堆栈溢出 2010年2月左右:

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

如果你在2010年左右访问这个页面,你可以看看 StackOverflow的HTML源代码 ,您可以在 <head /> 部分

schory 15 年前

使用jquery在运行时通过解析引用它的“src”属性的dom来获取javascript文件的位置:

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

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

Real Dreams 14 年前

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

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

用途:

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

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

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

Pekka 16 年前

好问题。

在css文件中,url将与css文件相对。
当使用javascript编写属性时,url应该始终相对于页面(请求的主资源)。

没有 tilde 我知道js内置的功能。通常的方法是定义一个javascript变量,指定基路径:

<script type="text/javascript">

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

</script>

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

Vijayanand Settin 11 年前

对于我正在开发的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>

takepara 16 年前

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

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

并在myjsfile.js中解析了querystring。

Plugins | jQuery Plugins

Mandeep Janjua 14 年前

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

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

JamminJamaican 12 年前

我发现这个对我有用。

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

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

Samir Ahmed 13 年前

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

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

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

gchq 11 年前

这在asp.net webforms中很有效。

将脚本更改为

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

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

  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