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

84

だから私はこのJavaScriptを実行していて、背景画像へのパスを除いてすべてが正常に機能します。ローカルのASP.NETDev環境では機能しますが、仮想ディレクトリ内のサーバーに展開した場合は機能しません。

これは外部の.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.NETtildaと同じ機能が必要です- ~。

更新

外部.jsファイル内のパスは、それらが含まれているページに関連していますか、それとも.jsファイルの実際の場所ですか？

— ネイト
ソース

アプリケーションディレクトリは、サーバーと比較して開発が異なりますか？Visual Studioの組み込みWebサーバーは、サーバーに「/ MyApp」と表示されている場合、デフォルトのパスを「/」に設定します。動作に一貫性がない可能性があります。

— VisualStudioの

それがまさに問題です！仮想ディレクトリが置かれている場所に応じて、私は...私のjavascriptの私は、生産にDEVから切り替えるたびに更新する必要がしたくない

— ネイト

このように思えます、superexpert.com / blog / archive / 2009/02/18 /…、あなたが探しているものです。

— sarvesh 2010

javascriptを使用して、divタグの背景画像を動的に変更しています。それははるかに独自の外部の.jsファイルをきれいだので、私は...、マスターページファイルにコードのバックを入れないようしたいのですが

— ネイト

javascriptには〜のようなものはありません。JSでヘルパー関数を使用できます。たとえば、MyJs.Url（ 'Images / filters.jp'）を呼び出し、これで仮想ディレクトリのプレフィックスを付けて文字列を返します。このようにすると、デプロイ時に1か所だけ変更する必要があります。

— sarvesh 2010

136

JavaScriptファイルパス

スクリプト内の場合、パスは表示されたページを基準にしています

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

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

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

2010年頃にこのページにアクセスした場合は、StackOverflowのhtmlソースを見るだけで、このワルなワンライナー[3行にフォーマットされています:)]が<head />セクションにあります。

— ジュラジ・ブラフンカ
ソース

7

私はUrl.Contentを使用してimagePath.Thanks！の値を生成することを除いて、これを行うことになりました。

— ネイト

2

ハハ私も同じことをした後、戻ってきてあなたのコメントを読んだ。

— Chev 2010年

1

これは機能しますが、明確に回避策であり、適切な解決策ではありません。@schoryの答えは私にOPの問題の解決策を与えてくれました。

— daniloquio 2012

7

以前Url.Content("~")はアプリケーションルートを取得していました。hth

— GraehamF

3

私もやりたいですvar imagePath = window.location.protocol + "//" + window.location.host + "/"

— JeanValjean 2016年

48

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」であると仮定します）

— schory
ソース

$（ "＃FkngDiv"）。load（jsFileLocation + "../ FkngFolder / FkngPage.aspx"）私にとっては魅力のように機能しました。この方法で1つのフォルダーレベルに戻り、目的のパスを指定するだけです。

— daniloquio 2012

6

とても良い答えです。.replacejsFileLocation.replace(/example\.js.*$/, '').js

— yitwail 2012

1

親愛なる、私の最新のヒーローです！...動的に私のjavascriptのフォルダからフォルダ一方向横からロードされたASP.NET MVCアプリケーションでサーバー上の私のCSSのパスを見つけるために、このソリューションを使用

— Hutjepower

27

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

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

使用する：

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

そして、ページにロードされたcssファイルに次のように書き込みます。

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

— PHPst
ソース

5

css以外の属性を使用している場合、これは機能しません。例：<img src="/codes/imgs/a.png">。このsrc属性をcssで設定することはできません。

— レザ2013

14

良い質問。

CSSファイルの場合、URLはCSSファイルに相対的です。
JavaScriptを使用してプロパティを作成する場合、URLは常にページ（要求されたメインリソース）に対して相対的である必要があります。

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

<script type="text/javascript">

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

</script>

URLを動的に割り当てるときはいつでも、そのルートを参照します。

— ペッカ
ソース

13

ハードなど、あなたのdevのボックス、テストサーバー上で動作しないルートをコーディング

— RickAndMSFT

5

私が取り組んでいる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>

— Vijayanand Settin
ソース

4

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

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

myjsfile.jsのクエリ文字列を解析しました。

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

— タケパラ
ソース

2

javascriptでasp.netチルダ（ "〜"）の贅沢を楽しむには、次の構文を使用してください

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

— マンディープジャンファ
ソース

2

私はこれが私のために働くのを見つけました。

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

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

— JamminJamaican
ソース

なぜあなたの答えが反対票を投じたのかわかりません。これは、何時間もの苦労の末に私のために働いたものです...（Y）

— Zia Ul Rehman Mughal

これは、servername / applicationname / jsではなくservername / jsを指しているためだと思います。これは、「/ js」と同じだと思います

— user1566694 2017年

0

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

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

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

— サミラ・アーメド
ソース

0

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

スクリプトをに変更します

<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

— gchq
ソース