Pregunta Rutas relativas en Javascript en un archivo externo


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

Esto está en un archivo .js externo, la estructura de carpetas 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 de

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 uso '../../Images/filters_collapse.jpg'.

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

actualizar

¿Las rutas en archivos .js externos están relacionadas con la página en la que están incluidas o la ubicación real del archivo .js?


74
2018-02-02 22:26


origen


Respuestas:


Rutas de archivos de JavaScript

Cuando está en 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 Desbordamiento de pila alrededor de febrero de 2010:

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

Si estuvieras visitando esta página en 2010, podrías echar un vistazo a Fuente html de StackOverflow, puedes encontrar este rudo de una sola línea [formateado a 3 líneas :)] en el <head /> sección


119
2018-02-02 23:16



obtener la ubicación de su archivo JavaScript durante el tiempo de ejecución usando jQuery mediante el análisis del DOM para el atributo 'src' que se hace referencia:

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

(suponiendo que su archivo javascript se llame 'example.js')


42
2017-12-14 15:18



Una solución adecuada es usar una clase css en lugar de escribir src en un 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');
}

25
2018-03-17 08:33



Buena pregunta.

  • Cuando se encuentre en un archivo CSS, las URL serán relativas al archivo CSS.

  • Al escribir propiedades usando JavaScript, las URL siempre deben estar relacionadas con la página (el recurso principal solicitado).

No hay tilde funcionalidad incorporada en JS que yo sepa. La forma habitual sería definir una variable de JavaScript que especifique 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.


13
2018-02-02 23:09



Usé el patrón de Pekka. Pienso en otro patrón.

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

y querystring analizada en myjsfile.js.

Complementos | Complementos de jQuery


4
2018-02-03 16:16



Para la aplicación MVC4 estoy trabajando en, puse un elemento de secuencia de comandos 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>


4
2017-11-27 02:02



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

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

2
2018-06-26 03:18



Encontré que esto funciona 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 las etiquetas de secuencia de comandos por supuesto ... (No estoy seguro de por qué las etiquetas de secuencia de comandos no se muestran en esta publicación) ...


2
2018-05-02 14:52



Necesitas agregar runat="server" y para asignarle un 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 src programáticamente utilizando la ID.


0
2018-04-20 12:23



Esto funciona bien en formularios web ASP.NET.

Cambiar la secuencia de comandos 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

0
2017-11-02 02:42