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?

— Nate
źródło

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

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

— Juraj Blahunka
źródło

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

— schory
źródło

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

— PHPst
źródło

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.

— Pekka
źródło

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>

— Vijayanand Settin
źródło

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

— takepara
źródło

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>

— Mandeep Janjua
źródło

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

— JamminJamaican
źródło

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.

— Samir Ahmed
źródło

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

— gchq
źródło