Rutas relativas en Javascript en un archivo externo

84

Así que estoy ejecutando este javascript y todo funciona bien, excepto las rutas a la imagen de fondo. Funciona en mi entorno de desarrollo ASP.NET local, pero NO funciona cuando se implementa en un servidor en un directorio virtual.

Esto está en un archivo .js externo, la estructura de la carpeta es

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

entonces aquí es donde se incluye el archivo 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')");
    }
});

He intentado usar '/Images/filters_collapse.jpg'y eso tampoco funciona; sin embargo, parece funcionar en el servidor si lo uso '../../Images/filters_collapse.jpg'.

Básicamente, quiero tener la misma funcionalidad que ASP.NET tilda - ~.

actualizar

¿Las rutas de los archivos .js externos son relativas a la página en la que se incluyen o la ubicación real del archivo .js?

— Nate
fuente

¿Su directorio de aplicaciones es diferente en desarrollo en comparación con el servidor? El servidor web integrado de Visual Studio establece la ruta predeterminada en '/' si su servidor dice '/ MyApp', es posible que tenga un comportamiento inconsistente. Intente configurar su ruta de Visual Studio en '/ MyApp'

— sarvesh

¡Ese es exactamente el problema! Dependiendo de dónde se encuentre el directorio virtual, no quiero tener que actualizar mi javascript cada vez que cambio de desarrollo a producción ...

— Nate

Parece que esto, superexpert.com/blog/archive/2009/02/18/… , es lo que estás buscando.

— sarvesh

Estoy usando javascript para cambiar dinámicamente la imagen de fondo de una etiqueta div. Me gustaría evitar volver a poner el código en el archivo de la página maestra, ya que es mucho más limpio su propio archivo .JS externo ...

— Nate

No hay nada como ~ para javascript. Podría tener una función auxiliar en JS. Por ejemplo, llamaría MyJs.Url ('Images / filter.jp') y este prefijo su directorio virtual y devolvería la cadena. De esta manera, solo necesitará cambiarlo en una ubicación durante la implementación.

— sarvesh

136

Rutas de archivos JavaScript

Cuando está en el script, las rutas son relativas a la página mostrada

para facilitar las cosas, puede imprimir una declaración js simple como esta y usar esta variable en todos sus scripts:

Solución, que se empleó en StackOverflow alrededor de febrero de 2010:

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

Si estuviera visitando esta página alrededor de 2010, podría echar un vistazo a la fuente html de StackOverflow , podría encontrar este sencillo de una sola línea [formateado en 3 líneas :)] en la <head />sección

— Juraj Blahunka
fuente

7

Terminé haciendo esto, excepto que uso Url.Content para generar el valor de imagePath.¡Gracias!

— Nate

2

Jaja hice lo mismo, luego volví y leí tu comentario nate.

— Chev

1

Esto funciona, pero también es definitivamente una solución alternativa, no una solución adecuada. La respuesta de @ schory me dio las soluciones al problema de OP.

— daniloquio

7

Solía Url.Content("~")obtener la raíz de la aplicación . hth

— GraehamF

3

También me gusta hacervar imagePath = window.location.protocol + "//" + window.location.host + "/"

— JeanValjean

48

obtenga la ubicación de su archivo javascript durante el tiempo de ejecución usando jQuery analizando el DOM para el atributo 'src' que lo refirió:

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

(asumiendo que su archivo javascript se llama 'ejemplo.js')

— Schory
fuente

$ ("# FkngDiv"). Load (jsFileLocation + "../ FkngFolder / FkngPage.aspx") Funcionó como un encanto para mí. Lo estoy usando de esta manera para retroceder un nivel de carpeta y luego solo apunto a la ruta deseada.

— daniloquio

6

muy buena respuesta. Cambiaría la .replaceexpresión a jsFileLocation.replace(/example\.js.*$/, '')en caso de que haya una cadena de consulta como un número de versión después del.js

— yitwail

1

¡Usted querido señor, es mi héroe más nuevo! Usé esta solución para encontrar mi ruta css en el servidor en una aplicación ASP.NET MVC, que se carga dinámicamente desde una carpeta de una manera lateral desde mi carpeta javascript ...

— Hutjepower

27

Una solución adecuada es usar una clase css en lugar de escribir src en el archivo js. Por ejemplo, en lugar de usar:

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

utilizar:

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

y en un archivo css que se carga en la página escriba:

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

— PHPst
fuente

5

Esto no funciona si estoy usando un atributo que no sea CSS. Por ejemplo: <img src="/codes/imgs/a.png">. No puedo configurar este atributo src por css.

— Reza

14

Buena pregunta.

Cuando esté en un archivo CSS, las URL serán relativas al archivo CSS.
Al escribir propiedades con JavaScript, las URL siempre deben ser relativas a la página (el recurso principal solicitado).

No hay ninguna tildefuncionalidad incorporada en JS que yo sepa. La forma habitual sería definir una variable JavaScript especificando la ruta base:

<script type="text/javascript">

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

</script>

y hacer referencia a esa raíz siempre que asigne URL de forma dinámica.

— Pekka
fuente

13

Codificar duro la raíz no funciona en su caja dev, servidor de prueba, etc.

— RickAndMSFT

5

Para la aplicación MVC4 en la que estoy trabajando, puse un elemento de script en _Layout.cshtml y creé una variable global para la ruta requerida, así:

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

4

Usé el patrón de pekka. Creo que otro patrón más.

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

y analizó la cadena de consulta en myjsfile.js.

Complementos | Complementos de jQuery

— tomar para
fuente

2

Utilice la siguiente sintaxis para disfrutar del lujo de asp.net tilda ("~") en javascript

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

— Mandeep Janjua
fuente

2

Encontré que esto funcionaba para mí.

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

entre etiquetas de script, por supuesto ... (no estoy seguro de por qué las etiquetas de script no aparecieron en esta publicación) ...

— JamminJamaicano
fuente

No sé por qué su respuesta fue rechazada. Esto es lo que funcionó para mí después de horas de lucha ... (Y)

— Zia Ul Rehman Mughal

Creo que porque esto apunta a servername / js en lugar de servername / applicationname / js , que creo que no es diferente de "/ js"

— user1566694

0

Debe agregar runat="server"y y asignarle una ID, luego especifique la ruta absoluta de esta manera:

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

Desde el código subyacente, puede cambiar el src mediante programación usando el ID.

— Samir Ahmed
fuente

0

Esto funciona bien en formularios web ASP.NET.

Cambie el script a

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

Tengo una página maestra para cada nivel de directorio y esto está en el 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)

Ahora, independientemente de si la aplicación se ejecuta localmente o se implementa, obtiene la ruta completa correcta

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

— gchq
fuente