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

Program / 글쓴이

그래서 나는이 자바 스크립트를 실행하고 있으며 배경 이미지에 대한 경로를 제외하고 모든 것이 잘 작동합니다. 내 로컬 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 파일의 실제 위치에 상대적입니까?

답변

JavaScript 파일 경로

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

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

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

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

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

답변

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’라고 가정)

답변

적절한 해결책은 js 파일에 src를 작성하는 대신 css 클래스를 사용하는 것입니다. 예를 들어 다음을 사용하는 대신 :

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

사용하다:

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

페이지에로드 된 css 파일에서 다음을 작성합니다.

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

답변

좋은 질문.

  • CSS 파일에서 URL은 CSS 파일을 기준으로합니다.

  • JavaScript를 사용하여 속성을 작성할 때 URL은 항상 페이지 (요청 된 기본 리소스)에 상대적이어야합니다.

tilde내가 아는 JS 에는 기능이 내장 되어 있지 않습니다 . 일반적인 방법은 기본 경로를 지정하는 JavaScript 변수를 정의하는 것입니다.

<script type="text/javascript">

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

</script>

URL을 동적으로 할당 할 때마다 해당 루트를 참조합니다.

답변

작업중인 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>

답변

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

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

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

플러그인 | jQuery 플러그인

답변

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

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