Percorsi relativi in Javascript in un file esterno

84

Quindi sto eseguendo questo javascript e tutto funziona bene, tranne i percorsi dell'immagine di sfondo. Funziona sul mio ambiente ASP.NET Dev locale, ma NON funziona se distribuito su un server in una directory virtuale.

Questo è in un file .js esterno, la struttura delle cartelle è

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

allora è da qui che viene incluso il file 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')");
    }
});

Ho provato a usare '/Images/filters_collapse.jpg'e neanche quello funziona; tuttavia, sembra funzionare sull'assistente se uso '../../Images/filters_collapse.jpg'.

Fondamentalmente, voglio avere la stessa funzionalità di ASP.NET tilda - ~.

aggiornare

I percorsi nei file .js esterni sono relativi alla pagina in cui sono inclusi o alla posizione effettiva del file .js?

— Nate
fonte

La directory dell'applicazione è diversa nello sviluppo rispetto al server? Il server Web integrato di Visual Studio imposta il percorso predefinito su "/" se il server dice "/ MiaApp" potresti avere un comportamento incoerente. Prova a impostare il percorso del tuo studio visivo su "/ MyApp"

— sarvesh

Questo è esattamente il problema! A seconda di dove si trova la directory virtuale, non voglio dover aggiornare il mio javascript ogni volta che passo dallo sviluppo alla produzione ...

— Nate

Sembra che questo, superexpert.com/blog/archive/2009/02/18/… , sia quello che stai cercando.

— sarvesh

Utilizzo javascript per modificare dinamicamente l'immagine di sfondo di un tag div. Vorrei evitare di reinserire il codice nel file della pagina master, poiché è molto più pulito il suo file .JS esterno ...

— Nate

Non c'è niente come ~ per javascript. Potresti avere una funzione di supporto in JS. Ad esempio chiameresti MyJs.Url ('Images / filters.jp') e questo prefisso la tua directory virtuale e restituisci la stringa. In questo modo dovrai solo cambiarlo di una posizione durante la distribuzione.

— sarvesh

136

Percorsi dei file JavaScript

Quando nello script, i percorsi sono relativi alla pagina visualizzata

per rendere le cose più facili puoi stampare una semplice dichiarazione js come questa e usare questa variabile in tutti i tuoi script:

Soluzione, che è stata impiegata su StackOverflow intorno a febbraio 2010:

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

Se stavi visitando questa pagina intorno al 2010 potresti semplicemente dare un'occhiata alla fonte html di StackOverflow , potresti trovare questo tosto one-liner [formattato su 3 righe :)] nella <head />sezione

— Juraj Blahunka
fonte

7

Ho finito per farlo, tranne per il fatto che uso Url.Content per generare il valore per imagePath.Thanks!

— Nate

2

Haha ho fatto la stessa cosa, poi sono tornato e ho letto il tuo commento nate.

— Chev

1

Funziona ma è anche decisamente una soluzione alternativa, non una soluzione adeguata. La risposta di @ schory mi ha dato le soluzioni al problema di OP.

— daniloquio

7

Ho usato Url.Content("~")per ottenere la radice dell'applicazione . hth

— GraehamF

3

Mi piace anche farevar imagePath = window.location.protocol + "//" + window.location.host + "/"

— JeanValjean

48

ottieni la posizione del tuo file javascript durante il runtime utilizzando jQuery analizzando il DOM per l'attributo 'src' che lo ha fatto riferimento:

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

(supponendo che il tuo file javascript si chiami "example.js")

— schory
fonte

$ ("# FkngDiv"). Load (jsFileLocation + "../ FkngFolder / FkngPage.aspx") Ha funzionato come un incantesimo per me. Lo sto usando in questo modo per tornare indietro di un livello di cartella e quindi indico semplicemente il percorso desiderato.

— daniloquio

6

risposta molto buona. .replacejsFileLocation.replace(/example\.js.*$/, '').js

— Modificherei

1

Caro signore, sei il mio ultimo eroe! Ho usato questa soluzione per trovare il mio percorso css sul server in un'applicazione ASP.NET MVC, che viene caricata dinamicamente da una cartella in un senso lateralmente dalla mia cartella javascript ...

— Hutjepower

27

Una soluzione adeguata sta usando una classe css invece di scrivere src nel file js. Ad esempio invece di usare:

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

uso:

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

e in un file css che viene caricato nella pagina scrivi:

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

— PHPst
fonte

5

Questo non funziona se sto utilizzando un attributo non css. Ad esempio: <img src="/codes/imgs/a.png">. Non riesco a impostare questo attributo src da CSS.

— Reza

14

Buona domanda.

Quando in un file CSS, gli URL saranno relativi al file CSS.
Quando si scrivono proprietà utilizzando JavaScript, gli URL devono sempre essere relativi alla pagina (la risorsa principale richiesta).

Non ci sono tildefunzionalità integrate in JS che io sappia. Il modo usuale sarebbe definire una variabile JavaScript specificando il percorso di base:

<script type="text/javascript">

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

</script>

e per fare riferimento a quella radice ogni volta che si assegnano URL dinamicamente.

— Pekka
fonte

13

L'hard coding della root non funziona sul tuo dev box, server di test, ecc.

— RickAndMSFT

5

Per l'app MVC4 su cui sto lavorando, ho inserito un elemento script in _Layout.cshtml e ho creato una variabile globale per il percorso richiesto, in questo modo:

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

4

Ho usato lo schema di Pekka. Penso ancora un altro schema.

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

e ha analizzato la stringa di query in myjsfile.js.

Plugin | Plugin jQuery

— takepara
fonte

2

Utilizzare la seguente sintassi per godersi il lusso di asp.net tilda ("~") in javascript

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

— Mandeep Janjua
fonte

2

Ho scoperto che questo funziona per me.

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

tra i tag di script ovviamente ... (Non sono sicuro del motivo per cui i tag di script non sono stati visualizzati in questo post) ...

— JamminJamaican
fonte

Non so perché la tua risposta abbia ricevuto un voto negativo. Questo è ciò che ha funzionato per me dopo ore di lotta ... (Y)

— Zia Ul Rehman Mughal,

Penso perché questo punta a servername / js piuttosto che servername / applicationname / js , che penso non sia diverso da "/ js"

— user1566694

0

È necessario aggiungere runat="server"ee per assegnare un ID, quindi specificare il percorso assoluto in questo modo:

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

Dal codebehind, puoi modificare src programmaticamente utilizzando l'ID.

— Samir Ahmed
fonte

0

Funziona bene nei webform ASP.NET.

Cambia lo script in

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

Ho una pagina master per ogni livello di directory e questa è nell'evento 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)

Ora, indipendentemente dal fatto che l'applicazione venga eseguita localmente o distribuita, si ottiene il percorso completo corretto

http://localhost:57387/Images/chevron-large-left-blue.png

— gchq
fonte

Percorsi relativi in ​​Javascript in un file esterno

Percorsi dei file JavaScript

Percorsi relativi in Javascript in un file esterno