Относительные пути в Javascript во внешнем файле - PullRequest
Новая
       6

Относительные пути в Javascript во внешнем файле

76 голосов
/ 03 февраля 2010

Итак, я запускаю этот 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'.

По сути, я хочу иметь ту же функциональность, что и ASP.NET tilda - ~.

update

Являются ли пути во внешних файлах .js относительно страницы, в которую они включены, или фактическое местоположение файла .js?

Ответы [ 10 ]

127 голосов
/ 03 февраля 2010

Пути к файлам JavaScript

В сценарии пути относятся к отображаемой странице

чтобы упростить задачу, вы можете распечатать простое объявление js, подобное этому, и использовать эту переменную во всех ваших скриптах:

Решение, которое использовалось на StackOverflow примерно в феврале 2010 года: 

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

Если бы вы посещали эту страницу около 2010 года, вы могли бы просто взглянуть на html-источник StackOverflow , вы можете найти эту чертову однострочную [отформатированную в 3 строки :)] в разделе <head />

43 голосов
/ 14 декабря 2010

получить местоположение вашего файла javascript во время выполнения, используя jQuery, проанализировав DOM для атрибута 'src', который ссылался на него: 

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

(при условии, что ваш файл javascript называется example.js))

28 голосов
/ 17 марта 2012

Правильное решение - использовать класс css вместо записи src в файл js Например, вместо использования: 

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

использование: 

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

и в файле css, загруженном на страницу, напишите: 

.xxx {
  background-image:url('../Images/filters_collapse.jpg');
}
13 голосов
/ 03 февраля 2010

Хороший вопрос.

  • Если в файле CSS URL-адреса будут относиться к файлу CSS.

  • При написании свойств с использованием JavaScriptURL-адреса всегда должны быть связаны со страницей (запрашиваемый основной ресурс).

В JS нет встроенной функциональности tilde, о которой я знаю.Обычным способом было бы определить переменную JavaScript, указав базовый путь: 

<script type="text/javascript">

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

</script>

и ссылаться на этот корень всякий раз, когда вы динамически назначаете URL-адреса.

5 голосов
/ 27 ноября 2014

Для приложения 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 голосов
/ 03 февраля 2010

Я использовал рисунок Пекки. Я думаю, что еще один шаблон. 

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

и проанализированная строка запроса в myjsfile.js.

Плагины | Плагины jQuery

2 голосов
/ 02 мая 2014

Я нашел, что это работает для меня. 

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

между тегами сценария, конечно ... (я не уверен, почему теги сценария не отображаются в этом посте) ...

2 голосов
/ 26 июня 2012

Пожалуйста, используйте следующий синтаксис, чтобы насладиться роскошью asp.net tilda ("~") в javascript 

<script src=<%=Page.ResolveUrl("~/MasterPages/assets/js/jquery.js")%>></script>
0 голосов
/ 02 ноября 2014

Это хорошо работает в веб-формах 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
0 голосов
/ 20 апреля 2013

Вам необходимо добавить runat="server" и, и назначить для него идентификатор, а затем указать абсолютный путь, например:

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

В коде ниже вы можете изменитьsrc программно использует ID.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...