llamar - qué es un script de javascript externo
Rutas relativas en Javascript en un archivo externo (10)
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 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 echarle un vistazo al código html de StackOverflow , podría encontrar este rudo un-liner [formateado en 3 líneas :)] en la sección <head />
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'')");
}
});
Intenté 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 ASP.NET tilda - ~ .
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?
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 ninguna funcionalidad de tilde 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.
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) ...
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
Necesita agregar runat="server" asignarle una ID, luego especifique la ruta absoluta de la siguiente 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.
Para la aplicación MVC4 en la que estoy trabajando, puse un elemento de guión 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>
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'');
}
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.
Utilice la siguiente sintaxis para disfrutar del lujo de asp.net tilda ("~") en javascript
<script src=<%=Page.ResolveUrl("~/MasterPages/assets/js/jquery.js")%>></script>
obtener la ubicación de su archivo javascript durante el tiempo de ejecución utilizando 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
(suponiendo que su archivo javascript se llame ''example.js'')