Ścieżki względne w Javascript w zewnętrznym pliku

Więc uruchamiam ten javascript, i wszystko działa dobrze, z wyjątkiem ścieżek do obrazu tła. Działa na moim lokalnym ASP.NET środowiska Dev, ale nie działa po wdrożeniu na serwerze w katalogu wirtualnym.

To jest zewnętrzne .plik js, struktura folderów to 

Site/Content/style.css
Site/Scripts/myjsfile.js
Site/Images/filters_expand.jpg
Site/Images/filters_colapse.jpg

Wtedy plik js jest dołączany z 

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')");
    }
});

Próbowałem użyć '/Images/filters_collapse.jpg' i to też nie działa; jednak wydaje się, że działa na serwerze, jeśli używam '../../Images/filters_collapse.jpg'.

W zasadzie chcę mieć taką samą funkcjonalność jak ASP.NET tilda -- ~.

Update

Są ścieżkami zewnętrznymi .Pliki js względem strony, w której są zawarte, lub rzeczywistej lokalizacji .akta js?

Author: Nate, 2010-02-03
Source

10 answers

Ścieżki plików JavaScript

Gdy w skrypcie, ścieżki są względem wyświetlanej strony

Aby było łatwiej, możesz wydrukować prostą deklarację js, taką jak ta i używać tej zmiennej we wszystkich skryptach:

Rozwiązanie, które zostało zastosowane na StackOverflow około lutego 2010: 

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

Jeśli odwiedzasz tę stronę około 2010 roku, możesz po prostu spojrzeć na źródło HTML StackOverflow , Możesz znaleźć ten badass one-liner [sformatowany do 3 linijek :) ] w sekcji <head />

 119
Author: Juraj Blahunka,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-18 07:44:49

Uzyskaj lokalizację pliku javascript podczas uruchamiania za pomocą jQuery, analizując DOM dla atrybutu 'src', który go odnosił: 

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

(zakładając, że Twój plik javascript ma nazwę ' example.js")

 43
Author: schory,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-12-14 15:18:01

Właściwym rozwiązaniem jest użycie klasy css zamiast zapisu src w pliku js. Na przykład zamiast używać: 

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

Użycie: 

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

I w pliku css, który jest ładowany na stronie napisz: 

.xxx {
  background-image:url('../Images/filters_collapse.jpg');
}
 25
Author: PHPst,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-03-17 08:33:23

Dobre pytanie.

  • Gdy w pliku CSS, adresy URL będą względne do pliku CSS.

  • Podczas pisania właściwości przy użyciu JavaScript, adresy URL powinny być zawsze względne do strony (główny zasób żądany).

Nie ma wbudowanej funkcjonalności tilde W JS, o której wiem. Standardowym sposobem byłoby zdefiniowanie zmiennej JavaScript określającej ścieżkę bazową: 

<script type="text/javascript">

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

</script>

I odwoływać się do tego roota za każdym razem, gdy przypisujesz adresy URL dynamicznie.

 13
Author: Pekka 웃,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-02-02 23:09:23

Użyłem wzoru pekki. Myślę, że kolejny wzór.

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

I parsed querystring in myjsfile.js.

Wtyczki / wtyczki jQuery

 4
Author: takepara,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-02-03 16:16:04

Dla aplikacji MVC4, nad którą pracuję, umieściłem element skryptu w _Layout.cshtml i stworzył globalną zmienną dla wymaganej ścieżki, w ten sposób: 

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

 4
Author: Vijayanand Settin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-27 02:02:54

Proszę użyć następującej składni, aby cieszyć się luksusem asp.net tilda ( " ~ " ) w javascript 

<script src=<%=Page.ResolveUrl("~/MasterPages/assets/js/jquery.js")%>></script>
 2
Author: Mandeep Janjua,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-26 03:18:08

Okazało się, że to działa dla mnie.

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

Między znacznikami skryptu oczywiście... (Nie jestem pewien, dlaczego znaczniki skryptu nie pojawiły się w tym poście)...

 2
Author: JamminJamaican,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-02 14:59:12

Musisz dodać runat="server" i przypisać ID dla niego, a następnie określić ścieżkę bezwzględną w następujący sposób:

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

Z kodu można zmienić program src używając ID.

 0
Author: Samir Ahmed,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-20 12:23:35

To działa dobrze w ASP.NET webforms.

Zmień skrypt na 

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

Mam stronę wzorcową dla każdego poziomu katalogu i jest to w zdarzeniu 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)

Teraz niezależnie od tego, czy aplikacja jest uruchomiona lokalnie, czy wdrożona, otrzymasz prawidłową pełną ścieżkę

http://localhost:57387/Images/chevron-large-left-blue.png
 0
Author: gchq,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-02 02:42:26