~ / эквивалент в javascript

Какой-нибудь умный способ сделать ссылку на путь на основе «корневого» пути в JavaScript, точно так же, как у нас ~/ в ASP.NET?


javascript web-applications asp.net relative-path
person Vikram    schedule 21.05.2009    source источник
comment
Для чего вы строите путь? XmlHttpRequest?   -  person harpo    schedule 21.05.2009
comment
@Gumbo: означает корень приложения и относится к asp.net.   -  person Brian    schedule 21.05.2009

Ответы (12)


arrow_upward
46
arrow_downward

Попросите вашу страницу сгенерировать тег с чем-то вроде:

<link rel="home" id="ApplicationRoot" href="http://www.example.com/appRoot/" />

Затем создайте функцию в JavaScript, которая извлекает значение, например:

function getHome(){
    return document.getElementById("ApplicationRoot").href;
}
person MiffTheFox    schedule 21.05.2009
comment
изменил пример немного, чтобы сделать его менее двусмысленным - person BenAlabaster; 21.05.2009
comment
Примечание. Для создания тега должен помочь следующий код: string urlPath = HttpContext.Current.Request.Url.Scheme +: // + HttpContext.Current.Request.Url.Authority + HttpContext.Current.Request.ApplicationPath; - person Brian; 21.05.2009
comment
Если вы собираетесь использовать серверный код для генерации значения, зачем вам помещать его в элемент ‹link› и получать с помощью getElementById? Просто выполните ‹script› var home = '‹% = HttpContext.Current.Request.Url.Scheme +: // + HttpContext.Current.Request.Url.Authority + HttpContext.Current.Request.ApplicationPath%›'; ‹/ script › - person Grant Wagner; 21.05.2009
comment
Помещение его в тег ‹link› позволяет отделить JS от разметки. Конечно, веб-формы в любом случае добавляют немного JS в вашу разметку, поэтому переменная может быть проще в этой среде. - person AaronSieb; 21.05.2009
comment
‹Link id = ApplicationRoot href = ~ / rel = home /› обеспечивает хороший префикс относительного пути. Обратите внимание, что тег заголовка должен иметь атрибут runat = server. - person Richard Collette; 14.06.2012

arrow_upward
38
arrow_downward

Используйте тег base:

<head>
   <base href="http://www.example.com/myapp/" />
</head>

...

отныне любая ссылка на этой странице, будь то в javascript или html, будет относиться к базовому тегу, то есть "http://www.example.com/myapp/ ".

person Kamarey    schedule 21.05.2009
comment
действительно полезно. не знал об этом теге. - person Vikram; 21.05.2009
comment
Спасибо за этот ответ. Это мне очень помогло. - person Brian Hasden; 05.02.2010
comment
обалденно, никогда не знал об этом теге. См. Ответ Нилзора ниже, чтобы узнать о динамическом улучшении этого. Отлично подходит для совместимости между средами dev и qa с разными URL-адресами. - person Piwaf; 02.04.2012
comment
Следует отметить, что веб-формы ASP.NET генерируют относительные пути для таких вещей, как теги ссылок CSS. Применение такого базового тега испортит эти относительные пути. Я предпочитаю метод ссылки, указанный выше, по сравнению с переменными JS, потому что переменные JS иногда могут быть упущены из виду, когда URL-адреса перезаписываются устройствами сетевой инфраструктуры, такими как F5 BIGIP. Атрибуты href - это явно URL-адреса, которые такие устройства могут легко идентифицировать. - person Richard Collette; 14.06.2012
comment
Обратите внимание, что использование базового тега также может иметь свои проблемы, см. [stackoverflow.com/questions/1889076/. - person anre; 23.01.2013

arrow_upward
11
arrow_downward

Вы также можете использовать функцию asp.net VirtualPathUtility:

<script>
var basePath = '<%=VirtualPathUtility.ToAbsolutePath("~/")%>';
</script>

Примечание. Я не кодирую путь к JSON -строке (escape-кавычки, управляющие символы и т. Д.). Я не думаю, что это большое дело (кавычки, например, не допускаются без экранирования в URL-адресе), но никто никогда не знает ...

person doekman    schedule 21.05.2009
comment
Метод должен быть: VirtualPathUtility.ToAbsolute (~ /) Это лучший подход, он дает большую гибкость, поскольку его можно развернуть как виртуальный каталог или как корневое веб-приложение. - person Manuel Castro; 14.06.2012

arrow_upward
8
arrow_downward

Обычно я создаю переменную в верхней части файла js и назначаю ей корневой путь. Затем я использую эту переменную при обращении к файлу.

var rootPath = "/";
image.src = rootPath + "images/something.png";
person RedWolves    schedule 21.05.2009

arrow_upward
6
arrow_downward

~ / - это корень приложения, а не буквальный корень, он вставляет ~ / для обозначения <YourAppVirtualDir>/

Чтобы сделать буквальный корень в JavaScript, это просто /, то есть "/root.html". В JavaScript нет способа получить такой путь на уровне приложения.

Вы можете взломать его в файле ASPX и вывести в теге, но я бы подумал о последствиях этого для безопасности.

person Lloyd    schedule 21.05.2009
comment
Хотя ваше определение ~ / правильное, было бы немного пораженцем сказать, что нет способа получить это через javascript, просто нужно немного воображения, и все. - person BenAlabaster; 21.05.2009
comment
Ну, один полностью серверный, а другой нет, хотя, как я уже сказал, вы can переносите его на клиентскую сторону, но я лично не стал бы :) - person Lloyd; 21.05.2009
comment
Какие последствия для безопасности может иметь доступ к корневому каталогу вашего приложения? Злоумышленник уже знает, что корень приложения является одним из уровней вложенности URL-адреса страницы, не так ли? - person AaronSieb; 21.05.2009
comment
Да, я думал о расширении ~ /, но этого не произошло. - person Lloyd; 21.05.2009

arrow_upward
6
arrow_downward

Ответ Камарея можно улучшить для поддержки динамического базового пути:

<head>    
      <base href="http://<%= Request.Url.Authority + Request.ApplicationPath%>/" />    
</head>

Это обеспечит правильный корневой путь независимо от конфигурации развертывания.

Честно говоря, это не отвечает на исходный вопрос, но устраняет большинство потребностей в получении корневого пути из javascript. Просто используйте везде относительные URL без косой черты.

Если вам все еще нужно получить к нему доступ из javascript, добавьте атрибут id и используйте document.getElementFromId(), как предложил MiffTheFox, но с базовым тегом.

person Nilzor    schedule 26.09.2011
comment
Мне понравилось это решение, однако мне пришлось немного подправить его, чтобы оно работало в Razor. <base href="http://@((Request.Url.Authority + Request.ApplicationPath).TrimEnd('/'))/" /> ApplicationPath иногда заканчивался символом /, а иногда - нет, поэтому я добавил вызов TrimEnd ('/'). - person DanielC; 22.03.2013

arrow_upward
5
arrow_downward

Другой вариант, более простой и универсальный, - это взять следующее:

<script src="/assets/js/bootstrap.min.js"><script>

и используйте Page.ResolveClientUrl так:

<script src='<%=ResolveClientUrl("~/assets/js/bootstrap.min.js")%>'></script>

тогда независимо от того, в каком подкаталоге URL-адреса всегда будут отображаться правильно.

person Jeremy    schedule 09.09.2013

arrow_upward
2
arrow_downward

Следующая функция вычислит корень текущего запущенного приложения. Я использую его для определения абсолютного местоположения ресурсов при вызове из глубины дерева приложения.

    function AppRoot() {
        //
        // Returns the root of the currently running ASP application.
        // in the form: "http://localhost/TRMS40/"
        //
        //   origin: "http://localhost"
        // pathname: "/TRMS40/Test/Test%20EMA.aspx"
        //
        // usage:
        //           window.open( AppRoot() + "CertPlan_Editor.aspx?ID=" + ID);
        //

        var z = window.location.pathname.split('/');

        return window.location.origin + "/" + z[1] + "/";
    }
person Graham Epps    schedule 11.10.2014

arrow_upward
1
arrow_downward

В PreRender вашей базовой страницы .NET добавьте это:

 protected override void
 OnPreRender(EventArgs e) {
     base.OnPreRender(e);

     if (Page.Header != null)
     {
         //USED TO RESOLVE URL IN JAVASCRIPT
         string baseUrl = String.Format("var baseUrl='{0}';\n", 
           HttpContext.Current.Request.ApplicationPath);
         Page.Header.Controls.Add(new LiteralControl(String.Format(Consts.JS_TAG,
           baseUrl)));
     }
}

Затем в вашей глобальной функции JavaScript добавьте следующее:

 function resolveUrl(url) {
   if (url.indexOf("~/") == 0) {
     url = baseUrl + url.substring(2);
   }
 return url; }

Теперь вы можете использовать это так:

 document.getElementById('someimage').src = resolveUrl('~/images/protest.jpg');

Может быть немного много для некоторых проектов, но отлично работает для полноценных приложений.

person TruMan1    schedule 17.03.2011

arrow_upward
1
arrow_downward

Решение для приложений ASP.NET MVC

Это работает при использовании IIS, а также IIS Express в VS.

Поместите этот фрагмент перед загрузкой всех скриптов, чтобы переменная корневого URL-адреса была «одобрена».

к вашим услугам в скриптах:

<script>
        var approot = "@Url.Content("~")";
</script>

 --> other scripts go here or somewhere later in the page.

Затем используйте его в своем сценарии или сценарии страницы. Пример:

var sound_root_path = approot + "sound/";
var img_root_path = approot + "img/";

переменная Approot будет чем-то либо:

"/ YourWebsiteName /" ‹- IIS

или просто:

"/" ‹- IIS Express

person Legends    schedule 23.12.2016

arrow_upward
0
arrow_downward

Для страниц ASP.net MVC Razor создайте базовый тег, как показано ниже, в теге <Head>

<base href="http://@[email protected]" />

и во всех относительных URL-адресах javascript убедитесь, что они начинаются без косой черты (/), иначе они будут ссылаться на корень.

Например, создайте все свои URL-адреса, например

"riskInfo": { url: "Content/images/RiskInfo.png", id: "RI" },

or

$http.POST("Account/GetModelList", this, request, this.bindModelList);
person Hitesh.Aneja    schedule 13.04.2013

arrow_upward
0
arrow_downward

Если вы хотите использовать его в HTML, вы можете использовать ~, см.

 href = @Url.Content("~/controllername/actionName")

См. Событие щелчка флажка в моем приложении MVC

@Html.CheckBoxFor(m=>Model.IsChecked,  
   new {@[email protected]("~/controller/action("+ @Model.Id + ", 1)"), 
   @title="Select To Renew" })
person Ali Adravi    schedule 31.07.2014