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

Question 1

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?

Question 2

Ś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

Question 3

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

Question 4

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

Question 5

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.

Question 6

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>

Question 7

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

Question 8

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>

Question 9

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

Question 10

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.

Question 11

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

Answer 1

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?

javascript html asp.net-mvc css path 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

Answer 2

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

Answer 3

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,

Answer 4

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

sarvesh

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

7

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

Nate

Answer 9

2

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

Chev

Answer 10

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

Answer 11

7

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

GraehamF

Answer 12

3

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

JeanValjean

Answer 13

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

Answer 14

$ ("# 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

Answer 15

6

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

yitwail

Answer 16

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

Answer 17

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

Answer 18

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

Answer 19

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.

Answer 20

13

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

RickAndMSFT

Answer 21

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>

Answer 22

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

Answer 23

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>

Answer 24

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

Answer 25

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

Answer 26

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

Answer 27

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.

Answer 28

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

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

Odpowiedzi:

Ścieżki plików JavaScript