Względne ścieżki w JavaScript w zewnętrznym pliku


84

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

To jest w zewnętrznym pliku .js, struktura folderów to

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

to jest to, skąd jest dołączany plik 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')");
    }
});

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

Zasadniczo chcę mieć taką samą funkcjonalność jak tylda ASP.NET - ~.

aktualizacja

Czy ścieżki w zewnętrznych plikach .js są względne w stosunku do strony, na której się znajdują, czy rzeczywistej lokalizacji pliku .js?


Czy katalog aplikacji różni się w fazie rozwoju od katalogu na serwerze? Wbudowany serwer sieci Web programu Visual Studio ustawia domyślną ścieżkę na „/”, jeśli na serwerze jest napisane „/ MyApp”, możesz mieć niespójne zachowanie. Spróbuj ustawić ścieżkę do Visual Studio na „/ MyApp”
sarvesh

To jest właśnie problem! W zależności od tego, gdzie znajduje się katalog wirtualny, nie chcę aktualizować mojego javascript za każdym razem, gdy przechodzę z wersji deweloperskiej na produkcyjną ...
Nate,

Wygląda na to, że superexpert.com/blog/archive/2009/02/18/… jest tym, czego szukasz.
sarvesh

Używam javascript do dynamicznej zmiany obrazu tła znacznika DIV. Chciałbym uniknąć umieszczania kodu z powrotem w pliku strony wzorcowej, ponieważ jest znacznie bardziej czysty, jego własny zewnętrzny plik .JS ...
Nate

Nie ma nic podobnego do ~ dla javascript. Możesz mieć funkcję pomocniczą w JS. Na przykład możesz wywołać MyJs.Url („Images / filters.jp”), dodać ten prefiks do katalogu wirtualnego i zwrócić ciąg. W ten sposób podczas wdrażania wystarczy zmienić jedną lokalizację.
sarvesh

Odpowiedzi:


136

Ścieżki plików JavaScript

W skrypcie ścieżki są względne w stosunku do wyświetlanej strony

dla ułatwienia możesz wydrukować prostą deklarację js, taką jak ta i używając tej zmiennej we wszystkich skryptach:

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

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

Jeśli odwiedzałeś tę stronę około 2010 roku, mógłbyś po prostu rzucić okiem na źródło html StackOverflow , możesz znaleźć ten badass jednowierszowy [sformatowany do 3 linii :)] w <head />sekcji


7
W końcu to zrobiłem, z wyjątkiem tego, że używam Url.Content do generowania wartości imagePath.Thanks!
Nate

2
Haha, zrobiłem to samo, a potem wróciłem i przeczytałem twój komentarz, Nate.
Chev

1
To działa, ale jest to również definitywnie obejście, a nie właściwe rozwiązanie. Odpowiedź @ schory dała mi rozwiązania problemu OP.
daniloquio

7
Kiedyś Url.Content("~"), aby uzyskać Application korzeń. HTH
GraehamF

3
Lubię teżvar imagePath = window.location.protocol + "//" + window.location.host + "/"
JeanValjean

48

pobierz lokalizację swojego pliku javascript w czasie wykonywania za pomocą jQuery, analizując DOM pod kątem atrybutu „src”, który go skierował:

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

(zakładając, że plik javascript nosi nazwę „example.js”)


$ ("# FkngDiv"). Load (jsFileLocation + "../ FkngFolder / FkngPage.aspx") Działało dla mnie jak urok. Używam go w ten sposób, aby cofnąć się o jeden poziom folderu, a następnie po prostu wskazuję żądaną ścieżkę.
daniloquio

6
bardzo dobra odpowiedź. Chciałbym zmienić .replacewyraz jsFileLocation.replace(/example\.js.*$/, '')w przypadku istnieje ciąg kwerendy jak numer wersji po.js
yitwail

1
Szanowny Panie, jesteś moim najnowszym bohaterem! Użyłem tego rozwiązania, aby znaleźć moją ścieżkę css na serwerze w aplikacji ASP.NET MVC, która jest dynamicznie ładowana z folderu w jedną stronę na bok z mojego folderu javascript ...
Hutjepower

27

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

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

posługiwać się:

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

aw pliku css, który jest ładowany na stronę napisz:

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

5
To nie działa, jeśli używam atrybutu innego niż css. Na przykład: <img src="/codes/imgs/a.png">. Nie mogę ustawić tego atrybutu src przez css.
Reza

14

Dobre pytanie.

  • W pliku CSS adresy URL będą względne w stosunku do pliku CSS.

  • Podczas pisania właściwości za pomocą JavaScript adresy URL powinny zawsze odnosić się do strony (głównego żądanego zasobu).

Nie ma żadnej tildefunkcji wbudowanej w JS, o której wiem. Zwykłym sposobem byłoby zdefiniowanie zmiennej JavaScript określającej ścieżkę podstawową:

<script type="text/javascript">

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

</script> 

i odnosić się do tego katalogu głównego za każdym razem, gdy dynamicznie przypisujesz adresy URL.


13
Twarde zakodowanie roota nie działa na twoim dev boxie, serwerze testowym itp.
RickAndMSFT

5

W przypadku aplikacji MVC4, nad którą pracuję, umieściłem element skryptu w _Layout.cshtml i utworzyłem zmienną globalną dla wymaganej ścieżki, na przykład:

<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

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

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

i przeanalizował querystring w myjsfile.js.

Wtyczki | Wtyczki jQuery


2

Użyj 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

Odkryłem, ż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>

oczywiście między tagami skryptu ... (nie jestem pewien, dlaczego tagi skryptów nie pojawiły się w tym poście) ...


Nie wiem, dlaczego twoja odpowiedź została odrzucona. To właśnie zadziałało na mnie po godzinach zmagań ... (Y)
Zia Ul Rehman Mughal

I myślę, że to wskazuje na nazwa_serwera / js zamiast nazwa_serwera / ApplicationName / js , który myślę, że nie różni się od „/ js”
user1566694

0

Musisz dodać runat="server"i i przypisać do niego identyfikator, 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 poziomu za kodem możesz programowo zmienić źródło za pomocą identyfikatora.


0

Działa to dobrze w formularzach internetowych ASP.NET.

Zmień skrypt na

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

Mam stronę wzorcową dla każdego poziomu katalogu i to jest 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 poprawną pełną ścieżkę

http://localhost:57387/Images/chevron-large-left-blue.png
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.