외부 파일에있는 자바 스크립트의 상대 경로

84

그래서 나는이 자바 스크립트를 실행하고 있으며 배경 이미지에 대한 경로를 제외하고 모든 것이 잘 작동합니다. 내 로컬 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 tilda와 동일한 기능을 원합니다 ~.

최신 정보

외부 .js 파일의 경로가 포함 된 페이지 또는 .js 파일의 실제 위치에 상대적입니까?

— 네이트
소스

응용 프로그램 디렉토리가 서버와 개발 과정에서 다른가요? Visual Studio의 빌드 된 웹 서버는 서버에 '/ MyApp'이있는 경우 기본 경로가 '/'로 설정되어 동작이 일치하지 않을 수 있습니다. Visual Studio 경로를 '/ MyApp'으로 설정해보세요

— sarvesh

그게 바로 문제입니다! 가상 디렉터리의 위치에 따라 개발에서 프로덕션으로 전환 할 때마다 자바 스크립트를 업데이트 할 필요가 없습니다.

— Nate

이처럼 superexpert.com/blog/archive/2009/02/18/… 은 귀하가 찾고있는 것입니다.

— sarvesh

div 태그의 배경 이미지를 동적으로 변경하기 위해 javascript를 사용하고 있습니다. 자체 외부 .JS 파일이 훨씬 더 깔끔하기 때문에 마스터 페이지 파일에 코드를 다시 넣는 것을 피하고 싶습니다.

— Nate

~와 같은 것은 없습니다. JS에서 도우미 기능을 사용할 수 있습니다. 예를 들어 MyJs.Url ( 'Images / filters.jp')를 호출하고이 접두사를 가상 디렉터리로 지정하고 문자열을 반환합니다. 이렇게하면 배포시 한 위치 만 변경하면됩니다.

— sarvesh 2010

136

JavaScript 파일 경로

스크립트에서 경로는 표시된 페이지를 기준으로합니다.

일을 더 쉽게하기 위해 다음과 같이 간단한 js 선언을 인쇄하고 스크립트 전체에서이 변수를 사용할 수 있습니다.

2010 년 2 월경 StackOverflow 에 채택 된 솔루션 :

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

2010 년경에이 페이지를 방문했다면 StackOverflow의 html 소스를 살펴볼 수 있습니다. <head />섹션 에서이 나쁜 한 줄짜리 [3 줄 형식 :)]을 찾을 수 있습니다.

— 주 라즈 블라 훈카
소스

7

imagePath.고마워요!에 대한 값을 생성하기 위해 Url.Content를 사용하는 것을 제외하고는 이렇게했습니다 .

— Nate

2

하하 나도 똑같은 짓을 한 다음 돌아와서 당신의 댓글을 읽었습니다.

— Chev

1

이것은 효과가 있지만 적절한 해결책이 아니라 분명히 해결 방법입니다. @schory의 대답은 나에게 OP의 문제에 대한 해결책을주었습니다.

— daniloquio

7

나는 응용 프로그램 루트 Url.Content("~")를 얻는 데 사용 되었습니다 . hth

— GraehamF 2013-06-07

3

나는 또한 할 좋아var imagePath = window.location.protocol + "//" + window.location.host + "/"

— 장 발장

48

jQuery를 사용하여 런타임 중에 해당 파일을 참조한 'src'속성에 대한 DOM을 구문 분석하여 자바 스크립트 파일의 위치를 가져옵니다.

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

(자바 스크립트 파일 이름이 'example.js'라고 가정)

— Schory
소스

$ ( "# FkngDiv"). load (jsFileLocation + "../ FkngFolder / FkngPage.aspx") 나를위한 매력처럼 작동했습니다. 이 방법으로 한 폴더 수준으로 돌아가서 원하는 경로를 가리 킵니다.

— daniloquio

6

아주 좋은 대답입니다. 이후 버전 번호와 같은 쿼리 문자열이있는 경우 .replace식을 변경하겠습니다 jsFileLocation.replace(/example\.js.*$/, '')..js

— yitwail

1

친애하는 각하, 나의 새로운 영웅입니다! ... 동적으로 내 자바 스크립트 폴더에서 폴더 편도 옆에서로드되는 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로 설정할 수 없습니다.

— Reza

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>

— 비자 야 난드 세틴
소스

4

페카의 패턴을 사용했습니다. 나는 또 다른 패턴을 생각한다.

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

myjsfile.js의 구문 분석 된 쿼리 문자열.

플러그인 | jQuery 플러그인

— Takepara
소스

2

자바 스크립트에서 asp.net tilda ( "~")의 고급 스러움을 즐기려면 다음 구문을 사용하십시오.

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

물론 스크립트 태그 사이에 ... (스크립트 태그가이 게시물에 표시되지 않은 이유를 모르겠습니다) ...

— Jammin 자메이카
소스

왜 당신의 대답이 반대표를 받았는지 모르겠습니다. 이 투쟁의 시간 후에 나를 위해 일한 것입니다 ... (Y)

— 지아 UL 레흐만 무굴

나는 이것이 "/ js"와 다르지 않다고 생각하는 servername / applicationname / js 보다는 servername / js를 가리

— 키기

0

runat="server"ID 를 추가 하고 할당 한 다음 다음과 같이 절대 경로를 지정해야합니다.

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

코드 숨김에서 ID를 사용하여 프로그래밍 방식으로 src를 변경할 수 있습니다.

— 사미르 아흐메드
소스

0

이것은 ASP.NET 웹 양식에서 잘 작동합니다.

스크립트를 다음으로 변경하십시오.

<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
소스