web-dev-qa-db-fra.com

Chemins relatifs en Javascript dans un fichier externe

Donc, je lance ce javascript, et tout fonctionne bien, sauf les chemins d'accès à l'image de fond. Cela fonctionne sur mon environnement de développement ASP.NET local, mais cela ne fonctionne PAS lorsqu'il est déployé sur un serveur dans un répertoire virtuel.

C’est dans un fichier .js externe, la structure des dossiers est

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

alors c'est là que le fichier js est inclus

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

J'ai essayé d'utiliser '/Images/filters_collapse.jpg' et ça ne marche pas non plus; cependant, cela semble fonctionner sur le serveur si j'utilise '../../Images/filters_collapse.jpg'.

En gros, je veux avoir la même fonctionnalité que le tilda ASP.NET - ~.

mise à jour

Les chemins dans les fichiers .js externes sont-ils relatifs à la page dans laquelle ils sont inclus ou à l'emplacement réel du fichier .js?

javascripthtmlasp.net-mvccsspath
77
Nate

Chemins de fichiers JavaScript

Quand en script, les chemins sont relatifs à la page affichée

pour faciliter les choses, vous pouvez imprimer une déclaration js simple comme celle-ci et utiliser cette variable pour tous vos scripts:

Solution, qui était utilisée sur StackOverflow autour de février 2010:

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

Si vous visitiez cette page vers 2010, vous pourriez simplement jeter un oeil à source html de StackOverflow, vous pourriez trouver ce one-liner de badass [formaté à 3 lignes :)] dans le <head /> section

130
Juraj Blahunka

obtenez l'emplacement de votre fichier javascript pendant l'exécution à l'aide de jQuery en analysant le DOM pour l'attribut 'src' qui l'a référé:

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

(en supposant que votre fichier javascript s'appelle 'example.js')

45
schory

Une solution appropriée consiste à utiliser une classe css au lieu d’écrire src dans un fichier js. Par exemple au lieu d'utiliser:

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

utilisation:

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

et dans un fichier css chargé dans la page write:

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

Bonne question.

  • Dans un fichier CSS, les URL seront relatives au fichier CSS.

  • Lors de l'écriture de propriétés à l'aide de JavaScript, les URL doivent toujours être relatives à la page (la ressource principale demandée).

À ma connaissance, il n’existe pas de fonctionnalité tilde intégrée à JS. La manière habituelle serait de définir une variable JavaScript spécifiant le chemin de base:

<script type="text/javascript">

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

</script>

et de faire référence à cette racine chaque fois que vous attribuez des URL de manière dynamique.

13
Pekka 웃

Pour l'application MVC4 sur laquelle je travaille, j'ai inséré un élément de script dans _Layout.cshtml et créé une variable globale pour le chemin requis, comme suit:

<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>
5
Vijayanand Settin

J'ai utilisé le motif de pekka. Je pense encore un autre motif.

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

et analysé la chaîne de requête dans myjsfile.js.

Plugins | Plugins jQuery

4
takepara

Veuillez utiliser la syntaxe suivante pour profiter du luxe de asp.net tilda ("~") en javascript

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

J'ai trouvé que cela fonctionne pour moi.

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

entre les balises de script bien sûr ... (Je ne suis pas sûr de savoir pourquoi les balises de script n'apparaissent pas dans ce post) ...

2
JamminJamaican

Cela fonctionne bien dans les formulaires Web ASP.NET.

Changer le script en

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

J'ai une page maître pour chaque niveau de répertoire et c'est dans l'événement 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)

Maintenant, que l'application soit exécutée localement ou déployée, vous obtenez le chemin complet correct

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

Vous devez ajouter runat="server" et et pour lui attribuer un ID, spécifiez le chemin absolu comme suit:

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

A partir du code ci-dessous, vous pouvez modifier le code src à l'aide de l'ID.

0
Samir Ahmed