外部文件中Javascript中的相對路徑

Question

所以我正在運行這個 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' ，它似乎可以在服務器上'../../Images/filters_collapse.jpg' 。

基本上，我希望具有與 ASP.NET tilda 相同的功能 -- ~ 。

更新

外部 .js 文件中的路徑是相對於包含它們的頁面還是 .js 文件的實際位置？

Answer 1

JavaScript 文件路徑

在腳本中時，路徑是相對於顯示頁面的

為了讓事情更容易，你可以打印出一個簡單的 js 聲明，並在你的腳本中使用這個變量：

2010 年 2 月左右在StackOverflow 上使用的解決方案：

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

如果您在 2010 年左右訪問此頁面，您可以查看StackOverflow 的 html 源代碼，您可以在<head />部分找到這個糟糕的單行 [格式化為 3 行 :)]

Answer 2

通過解析引用它的 'src' 屬性的 DOM，在運行時使用 jQuery 獲取 javascript 文件的位置：

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

（假設您的 javascript 文件名為“example.js”）

Answer 3

正確的解決方案是使用 css 類而不是在 js 文件中編寫 src。 例如，而不是使用：

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

用：

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

並在頁面中加載的 css 文件中寫入：

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

Answer 4

好問題。

在 CSS 文件中時，URL 將相對於 CSS 文件。
使用 JavaScript 編寫屬性時，URL 應始終與頁面（請求的主要資源）相關。

我所知道的 JS 中沒有內置tilde功能。 通常的方法是定義一個 JavaScript 變量來指定基本路徑：

<script type="text/javascript">

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

</script>

並在您動態分配 URL 時引用該根。

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

Answer 6

我使用了 pekka 的模式。 我認為還有另一種模式。

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

並在 myjsfile.js 中解析查詢字符串。

插件 | jQuery 插件

Answer 7

請使用以下語法在 javascript 中享受 asp.net tilda ("~") 的奢華

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

Answer 8

我發現這對我有用。

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

當然在腳本標簽之間......（我不確定為什么腳本標簽沒有出現在這篇文章中）......

Answer 9

您需要添加runat="server"並為其分配一個 ID，然后像這樣指定絕對路徑：

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

在代碼隱藏中，您可以使用 ID 以編程方式更改 src。

Answer 10

這在 ASP.NET webforms 中運行良好。

將腳本更改為

<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

外部文件中Javascript中的相對路徑

問題描述

10 個解決方案

解決方案1
138 已采納 2010-02-02 23:16:41

JavaScript 文件路徑

解決方案2
48 2010-12-14 15:18:01

解決方案3
27 2012-03-17 08:33:23

解決方案4
14 2010-02-02 23:09:23

解決方案5
5 2014-11-27 02:02:54

解決方案6
4 2010-02-03 16:16:04

解決方案7
2 2012-06-26 03:18:08

解決方案8
2 2014-05-02 14:52:50

解決方案9
0 2013-04-20 12:23:35

解決方案10
0 2014-11-02 02:42:26

外部文件中Javascript中的相對路徑

問題描述

10 個解決方案

解決方案1 138 已采納 2010-02-02 23:16:41

JavaScript 文件路徑

解決方案2 48 2010-12-14 15:18:01

解決方案3 27 2012-03-17 08:33:23

解決方案4 14 2010-02-02 23:09:23

解決方案5 5 2014-11-27 02:02:54

解決方案6 4 2010-02-03 16:16:04

解決方案7 2 2012-06-26 03:18:08

解決方案8 2 2014-05-02 14:52:50

解決方案9 0 2013-04-20 12:23:35

解決方案10 0 2014-11-02 02:42:26

解決方案1
138 已采納 2010-02-02 23:16:41

解決方案2
48 2010-12-14 15:18:01

解決方案3
27 2012-03-17 08:33:23

解決方案4
14 2010-02-02 23:09:23

解決方案5
5 2014-11-27 02:02:54

解決方案6
4 2010-02-03 16:16:04

解決方案7
2 2012-06-26 03:18:08

解決方案8
2 2014-05-02 14:52:50

解決方案9
0 2013-04-20 12:23:35

解決方案10
0 2014-11-02 02:42:26