web-dev-qa-db-ja.com

外部ファイルのJavaScriptの相対パス

だから私はこのjavascriptを実行していますが、背景画像へのパスを除いて、すべて正常に動作します。ローカルASP.NET Dev環境では動作しますが、仮想ディレクトリ内のサーバーにデプロイされた場合は動作しません。

これは外部.jsファイルにあり、フォルダー構造は

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

その後、これは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')");
    }
});

'/Images/filters_collapse.jpg'を使用してみましたが、どちらも機能しません。ただし、'../../Images/filters_collapse.jpg'を使用すると、サーバー上で動作するようです。

基本的に、ASP.NETのチルダと同じ機能性が必要です-~。

更新

外部の.jsファイル内のパスは、それらが含まれるページ、または.jsファイルの実際の場所に相対的ですか？

javascripthtmlasp.net-mvccsspath
77
Nate

JavaScriptファイルのパス

スクリプトの場合、パスは表示されたページに相対的です

物事を簡単にするために、次のような単純なjs宣言を出力し、スクリプト全体でこの変数を使用できます。

StackOverflow 2010年2月頃に採用されたソリューション：

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

2010年ごろにこのページにアクセスした場合、StackOverflowのhtmlソースを見るだけで、<head />セクションでこのひどいワンライナー[3行にフォーマットされた:)]を見つけることができます。

130
Juraj Blahunka

jQueryを使用して実行時にjavascriptファイルの場所を取得するには、それを参照した「src」属性のDOMを解析します。

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

（javascriptファイルの名前が「example.js」であると仮定）

45
schory

適切な解決策は、jsファイルにsrcを記述する代わりにcssクラスを使用することです。たとえば、次を使用する代わりに：

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

つかいます：

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

そして、ページ書き込みでロードされるcssファイルに：

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

良い質問。

  • CSSファイルの場合、URLはCSSファイルに関連します。

  • JavaScriptを使用してプロパティを記述する場合、URLは常にページ（要求されたメインリソース）に対して相対的でなければなりません。

私が知っているJSにはtilde機能が組み込まれていません。通常の方法は、ベースパスを指定するJavaScript変数を定義することです。

<script type="text/javascript">

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

</script>

uRLを動的に割り当てるたびにそのルートを参照します。

13
Pekka 웃

作業中のMVC4アプリの場合、_Layout.cshtmlにスクリプト要素を配置し、次のように必要なパスのグローバル変数を作成しました。

<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

ペッカのパターンを使用しました。さらに別のパターンだと思います。

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

myjsfile.jsで解析されたクエリ文字列。

プラグイン| jQueryプラグイン

4
takepara

次の構文を使用して、javascriptのasp.net tilda（ "〜"）の贅沢をお楽しみください。

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

私はこれが私のために働くことがわかった。

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

もちろんスクリプトタグ間...（この投稿にスクリプトタグが表示されなかった理由はわかりません）...

2
JamminJamaican

これはASP.NET Webフォームでうまく機能します。

スクリプトを変更します

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

各ディレクトリレベルのマスターページがあり、これは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)

これで、アプリケーションがローカルで実行されているかデプロイされているかに関係なく、正しいフルパスを取得できます

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

runat="server"を追加し、IDを割り当てる必要があります。次に、次のように絶対パスを指定します。

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

コードビハインドから、IDを使用してプログラムでsrcを変更できます。

0
Samir Ahmed