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

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

Обновление

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

Ответы

Ответ 1

Пути файлов JavaScript

Когда в script, пути относятся к отображаемой странице

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

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

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

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

Ответ 2

получить местоположение вашего файла 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)

Ответ 3

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

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

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

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

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

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

Ответ 4

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

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

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

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

<script type="text/javascript">

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

</script>

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

Ответ 5

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

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

и разобранную последовательность запросов в myjsfile.js.

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

Ответ 6

Для приложения MVC4, над которым я работаю, я помещаю элемент script в _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>

Ответ 7

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

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

Ответ 8

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

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

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

Ответ 9

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

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

Из кода вы можете изменить src программно с помощью идентификатора.

Ответ 10

Это хорошо работает в веб-формах ASP.NET.

Измените script на

<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