Relative Pfade in Javascript in einer externen Datei

82

Ich führe also dieses Javascript aus und alles funktioniert einwandfrei, außer den Pfaden zum Hintergrundbild. Es funktioniert in meiner lokalen ASP.NET Dev-Umgebung, aber NICHT, wenn es auf einem Server in einem virtuellen Verzeichnis bereitgestellt wird.

Dies ist in einer externen .js-Datei, Ordnerstruktur ist

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

dann ist hier die js-Datei enthalten

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

Ich habe es versucht '/Images/filters_collapse.jpg'und das funktioniert auch nicht. Es scheint jedoch auf dem Server zu funktionieren, wenn ich benutze '../../Images/filters_collapse.jpg'.

Grundsätzlich möchte ich die gleiche Funktionalität wie die ASP.NET-Tilda haben ~.

aktualisieren

Beziehen sich Pfade in externen JS-Dateien auf die Seite, in der sie enthalten sind, oder auf den tatsächlichen Speicherort der JS-Datei?

— Nate
quelle

Unterscheidet sich Ihr Anwendungsverzeichnis in der Entwicklung vom Server? Der in Visual Studio integrierte Webserver setzt den Standardpfad auf "/". Wenn Ihr Server "/ MyApp" sagt, liegt möglicherweise ein inkonsistentes Verhalten vor. Versuchen Sie, Ihren Visual Studio-Pfad auf '/ MyApp'

— sarvesh

Das ist genau das Problem! Abhängig davon, wo sich das virtuelle Verzeichnis befindet, möchte ich mein Javascript nicht jedes Mal aktualisieren müssen, wenn ich von Dev zu Production wechsle ...

— Nate

Scheint so, superexpert.com/blog/archive/2009/02/18/… , ist das, wonach Sie suchen.

— Sarvesh

Ich verwende Javascript, um das Hintergrundbild eines div-Tags dynamisch zu ändern. Ich möchte vermeiden, den Code wieder in die Masterseitendatei zu setzen, da die eigene externe JS-Datei viel sauberer ist ...

— Nate

Es gibt nichts Vergleichbares für Javascript. Sie könnten eine Hilfsfunktion in JS haben. Zum Beispiel würden Sie MyJs.Url ('Images / filter.jp') aufrufen und dies Ihrem virtuellen Verzeichnis voranstellen und die Zeichenfolge zurückgeben. Auf diese Weise müssen Sie es bei der Bereitstellung nur an einem Ort ändern.

— Sarvesh

134

JavaScript-Dateipfade

Im Skript beziehen sich die Pfade auf die angezeigte Seite

Zur Vereinfachung können Sie eine einfache js-Deklaration wie diese ausdrucken und diese Variable in allen Skripten verwenden:

Lösung, die im Februar 2010 bei StackOverflow eingesetzt wurde :

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

Wenn Sie diese Seite um 2010 besucht haben, können Sie sich einfach die HTML-Quelle von StackOverflow ansehen. Sie finden diesen Badass-Einzeiler [formatiert auf 3 Zeilen :)] im <head />Abschnitt

— Juraj Blahunka
quelle

7

Am Ende habe ich dies getan, außer dass ich Url.Content verwende, um den Wert für imagePath.Danke zu generieren !

— Nate

2

Haha, ich habe das Gleiche getan, bin dann zurückgekommen und habe deinen Kommentar gelesen.

— Chev

1

Dies funktioniert, ist aber definitiv auch eine Problemumgehung, keine richtige Lösung. Die Antwort von @ schory gab mir die Lösungen für das Problem von OP.

— Daniloquio

7

Ich habe Url.Content("~")das Anwendungsstammverzeichnis erhalten . hth

— GraehamF

3

Ich mache auch gernevar imagePath = window.location.protocol + "//" + window.location.host + "/"

— JeanValjean

48

Ermitteln Sie den Speicherort Ihrer Javascript-Datei zur Laufzeit mithilfe von jQuery, indem Sie das DOM nach dem Attribut 'src' analysieren, auf das es verwiesen hat:

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

(Angenommen, Ihre Javascript-Datei heißt 'example.js')

— schory
quelle

$ ("# FkngDiv"). Load (jsFileLocation + "../ FkngFolder / FkngPage.aspx") Hat für mich wie ein Zauber funktioniert. Ich benutze es auf diese Weise, um eine Ordnerebene zurückzukehren, und zeige dann einfach auf meinen gewünschten Pfad.

— Daniloquio

6

sehr gute Antwort. Ich würde den .replaceAusdruck jsFileLocation.replace(/example\.js.*$/, '')in ändern , falls es eine .js

— Abfragezeichenfolge

1

Sehr geehrter Herr, sind mein neuester Held! Verwendete diese Lösung, um meinen CSS-Pfad auf dem Server in einer ASP.NET MVC-Anwendung zu finden, die dynamisch aus einem Ordner seitlich von meinem Javascript-Ordner geladen wird ...

— Hutjepower

27

Eine geeignete Lösung ist die Verwendung einer CSS-Klasse, anstatt src in die js-Datei zu schreiben. Zum Beispiel anstatt zu verwenden:

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

verwenden:

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

und in eine CSS-Datei, die auf der Seite geladen ist, schreiben Sie:

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

— PHPst
quelle

5

Dies funktioniert nicht, wenn ich ein Nicht-CSS-Attribut verwende. Zum Beispiel : <img src="/codes/imgs/a.png">. Ich kann dieses src-Attribut nicht per CSS festlegen.

— Reza

13

Gute Frage.

In einer CSS-Datei sind URLs relativ zur CSS-Datei.
Beim Schreiben von Eigenschaften mit JavaScript sollten URLs immer relativ zur Seite sein (die angeforderte Hauptressource).

tildeIn JS ist keine Funktionalität integriert, die mir bekannt ist. Der übliche Weg wäre, eine JavaScript-Variable zu definieren, die den Basispfad angibt:

<script type="text/javascript">

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

</script>

und auf diesen Stamm zu verweisen, wenn Sie URLs dynamisch zuweisen.

— Pekka
quelle

13

Die harte Codierung des

— Stamms

5

Für die MVC4-App, an der ich arbeite, habe ich ein Skriptelement in _Layout.cshtml eingefügt und eine globale Variable für den erforderlichen Pfad erstellt, wie folgt:

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

4

Ich habe Pekkas Muster verwendet. Ich denke noch ein Muster.

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

und analysierte Querystring in myjsfile.js.

Plugins | jQuery-Plugins

— takepara
quelle

2

Bitte verwenden Sie die folgende Syntax, um den Luxus von asp.net tilda ("~") in Javascript zu genießen

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

— Mandeep Janjua
quelle

2

Ich fand das für mich zu arbeiten.

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

zwischen Skript-Tags natürlich ... (Ich bin nicht sicher, warum die Skript-Tags in diesem Beitrag nicht angezeigt wurden) ...

— JamminJamaican
quelle

Ich weiß nicht, warum Ihre Antwort abgelehnt wurde. Dies ist, was für mich nach stundenlangem Kampf funktioniert hat ... (Y)

— Zia Ul Rehman Mughal

Ich denke, weil dies eher auf Servername / js als auf Servername / Anwendungsname / js verweist , was sich meiner Meinung nach nicht von "/ js" unterscheidet

— user1566694

0

Sie müssen runat="server"eine ID hinzufügen und zuweisen und dann den absoluten Pfad wie folgt angeben:

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

Über den Codebehind können Sie den src mithilfe der ID programmgesteuert ändern.

— Samir Ahmed
quelle

0

Dies funktioniert gut in ASP.NET-Webformularen.

Ändern Sie das Skript in

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

Ich habe eine Masterseite für jede Verzeichnisebene und diese befindet sich im Ereignis PageInit

  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)

Unabhängig davon, ob die Anwendung lokal ausgeführt oder bereitgestellt wird, erhalten Sie jetzt den richtigen vollständigen Pfad

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

— gchq
quelle