Đường dẫn tương đối trong Javascript trong tệp bên ngoài

84

Vì vậy, tôi đang chạy javascript này và mọi thứ đều hoạt động tốt, ngoại trừ các đường dẫn đến hình nền. Nó hoạt động trên môi trường ASP.NET Dev cục bộ của tôi, nhưng nó KHÔNG hoạt động khi được triển khai tới một máy chủ trong một thư mục ảo.

Đây là tệp .js bên ngoài, cấu trúc thư mục là

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

thì đây là nơi chứa tệp js từ

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

Tôi đã thử sử dụng '/Images/filters_collapse.jpg'và điều đó cũng không hoạt động; tuy nhiên, nó dường như hoạt động trên máy chủ nếu tôi sử dụng '../../Images/filters_collapse.jpg'.

Về cơ bản, tôi muốn có cùng chức năng như dấu ngã ASP.NET - ~.

cập nhật

Các đường dẫn trong tệp .js bên ngoài có liên quan đến Trang mà chúng được bao gồm trong đó hay vị trí thực của tệp .js không?

— Nate
nguồn

Thư mục ứng dụng của bạn có khác biệt trong quá trình phát triển so với máy chủ không? Máy chủ web tích hợp trong Visual Studio đặt đường dẫn mặc định thành '/' nếu máy chủ của bạn cho biết '/ MyApp', bạn có thể có hành vi không nhất quán. Hãy thử đặt đường dẫn studio trực quan của bạn thành '/ MyApp'

— sarvesh

Đó chính xác là vấn đề! Tùy thuộc vào vị trí của thư mục ảo, tôi không muốn phải cập nhật javascript của mình mỗi khi chuyển từ nhà phát triển sang sản xuất ...

— Nate

Có vẻ như thế này, superexpert.com/blog/archive/2009/02/18/… , là những gì bạn đang tìm kiếm.

— sarvesh

Tôi đang sử dụng javascript để thay đổi động hình nền của thẻ div. Tôi muốn tránh đưa mã trở lại tệp trang chính, vì nó sạch hơn nhiều so với tệp .JS bên ngoài của chính nó ...

— Nate 2/02

Không có gì giống như ~ cho javascript. Bạn có thể có một hàm trợ giúp trong JS. Ví dụ: bạn sẽ gọi MyJs.Url ('Hình ảnh / bộ lọc.jp') và điều này đặt tiền tố thư mục ảo của bạn và trả về chuỗi. Bằng cách này, bạn sẽ chỉ cần thay đổi nó một vị trí khi triển khai.

— sarvesh

136

Đường dẫn tệp JavaScript

Khi ở trong tập lệnh, các đường dẫn có liên quan đến trang được hiển thị

để làm cho mọi thứ dễ dàng hơn, bạn có thể in ra một khai báo js đơn giản như thế này và sử dụng biến này trên tất cả các tập lệnh của bạn:

Giải pháp, được sử dụng trên StackOverflow vào khoảng tháng 2 năm 2010:

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

Nếu bạn truy cập trang này vào khoảng năm 2010, bạn chỉ cần xem nguồn html của StackOverflow , bạn có thể tìm thấy một chữ lót badass này [được định dạng thành 3 dòng :)] trong <head />phần

— Juraj Blahunka
nguồn

7

Tôi đã kết thúc việc này, ngoại trừ việc tôi sử dụng Url.Content để tạo giá trị cho imagePath.Cảm ơn!

— Nate

2

Haha Tôi đã làm điều tương tự, sau đó quay lại và đọc nate bình luận của bạn.

— Chev

1

Điều này hoạt động nhưng nó cũng được xác định là một cách giải quyết, không phải là một giải pháp thích hợp. Câu trả lời của @ schory đã cho tôi giải pháp cho vấn đề của OP.

— daniloquio

7

Tôi đã sử dụng Url.Content("~")để lấy root Ứng dụng . hth

— GraehamF Ngày

3

Tôi cũng thích làmvar imagePath = window.location.protocol + "//" + window.location.host + "/"

— JeanValjean

48

lấy vị trí của tệp javascript của bạn trong thời gian chạy bằng cách sử dụng jQuery bằng cách phân tích cú pháp DOM cho thuộc tính 'src' đã gọi nó:

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

(giả sử tệp javascript của bạn có tên là 'example.js')

— schory
nguồn

$ ("# FkngDiv"). Load (jsFileLocation + "../ FkngFolder / FkngPage.aspx") Làm việc như một cái duyên đối với tôi. Tôi đang sử dụng nó theo cách này để quay lại một cấp thư mục và sau đó tôi chỉ đến đường dẫn mong muốn của mình.

— daniloquio

6

câu trả lời rất tốt. Tôi sẽ thay đổi .replacebiểu thức thành jsFileLocation.replace(/example\.js.*$/, '')trong trường hợp có một chuỗi truy vấn giống như số phiên bản sau.js

— yitwail

1

Bạn thân mến thưa ngài, là anh hùng mới nhất của tôi! Sử dụng giải pháp này để tìm con đường css của tôi trên máy chủ trong một ASP.NET MVC Application, mà là tự động nạp từ một thư mục một cách ngang từ thư mục javascript của tôi ...

— Hutjepower

27

Một giải pháp thích hợp là sử dụng một lớp css thay vì viết src trong tệp js. Ví dụ thay vì sử dụng:

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

sử dụng:

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

và trong tệp css được tải trong trang viết:

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

— PHPst
nguồn

5

Điều này không hoạt động nếu tôi đang sử dụng thuộc tính không phải css. Ví dụ: <img src="/codes/imgs/a.png">. Tôi không thể đặt thuộc tính src này bằng css.

— Reza

14

Câu hỏi hay.

Khi ở trong tệp CSS, các URL sẽ có liên quan đến tệp CSS.
Khi viết thuộc tính bằng JavaScript, URL phải luôn liên quan đến trang (tài nguyên chính được yêu cầu).

Không có tildechức năng nào được tích hợp sẵn trong JS mà tôi biết. Cách thông thường sẽ là xác định một biến JavaScript chỉ định đường dẫn cơ sở:

<script type="text/javascript">

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

</script>

và tham chiếu đến gốc đó bất cứ khi nào bạn chỉ định URL động.

— Pekka
nguồn

13

Mã hóa cứng gốc không hoạt động trên hộp phát triển, máy chủ thử nghiệm của bạn, v.v.

— RickAndMSFT

5

Đối với ứng dụng MVC4 mà tôi đang làm việc, tôi đặt một phần tử script vào _Layout.cshtml và tạo một biến toàn cục cho đường dẫn được yêu cầu, như sau:

<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
nguồn

4

Tôi đã sử dụng mẫu của pekka. Tôi nghĩ rằng một mô hình khác.

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

và phân tích cú pháp chuỗi truy vấn trong myjsfile.js.

Phần bổ trợ | jQuery Plugins

— takepara
nguồn

2

Vui lòng sử dụng cú pháp sau để tận hưởng sự sang trọng của asp.net dấu ngã ("~") trong javascript

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

— Mandeep Janjua
nguồn

2

Tôi thấy điều này làm việc cho tôi.

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

tất nhiên là giữa các thẻ script ... (Tôi không chắc tại sao các thẻ script không hiển thị trong bài đăng này) ...

— JamminJamaica
nguồn

Tôi không biết tại sao câu trả lời của bạn nhận được phản đối. Đây là những gì làm việc cho tôi sau giờ đấu tranh ... (Y)

— Zia Ul Rehman Mughal

Tôi nghĩ vì điều này trỏ đến tên máy chủ / js chứ không phải tên máy chủ / tên ứng dụng / js , mà tôi nghĩ không khác gì "/ js"

— user1566694

0

Bạn cần thêm runat="server"và chỉ định một ID cho nó, sau đó chỉ định đường dẫn tuyệt đối như sau:

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

Từ phía sau mã, bạn có thể thay đổi src theo chương trình bằng cách sử dụng ID.

— Samir Ahmed
nguồn

0

Điều này hoạt động tốt trong các biểu mẫu web ASP.NET.

Thay đổi tập lệnh thành

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

Tôi có một trang chính cho từng cấp thư mục và đây là trong sự kiện 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)

Giờ đây, bất kể ứng dụng được chạy cục bộ hay được triển khai, bạn đều có được đường dẫn đầy đủ chính xác

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

— gchq
nguồn