Як отримати базовий URL з jquery або javascript?

152

У Joomla php там я можу використовувати, $this->baseurlщоб отримати базовий шлях, але я хотів отримати базовий шлях у jquery.

Базовий шлях може бути будь-яким із наступних прикладів:

http://www.example.com/
http://localhost/example
http://www.example.com/sub/example

exampleТакож може змінитися.

javascript  jquery 
— Навін Рауніяр
джерело
— Mritunjay
@Mritunjay Я вже бачив це, але в моєму випадку базовий шлях відрізняється, як я хотів отримати базовий шлях, як у php, який ми робимо в Joomla
— Navin Rauniyar
Отже, жодна з відповідей не вирішила вашу проблему?
— Artjom B.
вибрати відповідь, будь ласка?
— чорниця

Відповіді:

177

Цей вам допоможе ...

var getUrl = window.location;
var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
— Дженіш
джерело
Так, це працює! http://localhost/myapp/what/ever/sub/folder-> getBaseUrl -> http://localhost/myapp:-)
— vee
3
Це не спрацює у всіх випадках, на що вказує якось недооцінений відповідь @Artjom B. Наприклад, коли сайт тестується через локальну мережу (а домен заміщений IP + локальним шляхом), базовий URL може бути чимось на зразок 192.168.0.23/~sites/site/html/замість site.dev. Отримання повної назви шляху за допомогою Javascript також не є варіантом, оскільки на сайті може бути будь-яка кількість віртуальних підкаталогів.
— безумовно,
124

Я думаю, це буде добре для вас

var base_url = window.location.origin;

var host = window.location.host;

var pathArray = window.location.pathname.split( '/' );
— Харіс
джерело
7
Приємний короткий і милий, спасибі. window.location.origin
— TetraDev
1
це повинна бути кращою відповіддю, оскільки вона коротка, стисла і прекрасно працює.
— Грегор
window.location.origin не визначено у ie9
— jnoreiga
1
@jnoreiga Хто досі використовує ie9 ツ
— Олександр Daubricourt
2
Я хотів би, щоб це було так просто @AlexandreDaubricourt
— jnoreiga
30

Це отримає базовий URL

var baseurl = window.location.origin+window.location.pathname;
— Захер Бабар
джерело
це те саме, що window.location.href
— Z. Khullah
8
це не те саме, ім'я шляху дає вам сегмент шляху URL-адреси, href також містить параметри запитів
— dschulten
24

Це надзвичайно давнє питання, але ось підходи, якими я особисто користуюся ...

Отримайте стандартну / базову URL-адресу

Як уже багато хто заявляв, це працює в більшості ситуацій.

var url = window.location.origin;


Отримайте абсолютну базову URL-адресу

Однак цей простий підхід може бути використаний для зняття будь-яких номерів портів. 

var url = "http://" + location.host.split(":")[0];

Редагувати: Щоб вирішити проблему, яку поставив Джейсон Райс , для автоматичного вставлення правильного типу протоколу можна використовувати наступне ...

var url = window.location.protocol + "//" + location.host.split(":")[0];


Встановити базову URL-адресу

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

document.head.innerHTML = document.head.innerHTML + "<base href='" + url + "' />";
— Дастін Холстед
джерело
1
Якщо ваш протокол не відрізняється від http, наприклад https (тоді встановлення протоколу url на "http: //" призведе до дійсно дивних помилок залежно від способу використання URL-адреси).
— Джейсон Райс
13

Це неможливо через javascript, оскільки це властивість на сервері. Javascript на клієнті не може знати, де встановлена ​​Joomla. Найкращий варіант - якось включити значення $this->baseurlв javascript сторінки, а потім використовувати це значення ( phpBaseUrl).

Потім ви можете створити URL так:

var loc = window.location;
var baseUrl = loc.protocol + "//" + loc.hostname + (loc.port? ":"+loc.port : "") + "/" + phpBaseUrl;
— Artjom B.
джерело
1
Зверніть увагу , що loc.hostмає порт для URL , як http://localhost:8082/цей метод буде виробляти http://localhost:8082:8082/, window.location.hostnameслід використовувати замість цього.
— Тіберіу C.
@TiberiuC. Дякую, додав.
— Artjom B.
8

Якщо в той же час, як і раніше, була моя проблема, я просто потребував базової URL-адреси. Тут є багато детальних варіантів, але щоб обійти це, просто скористайтеся window.locationоб'єктом. Фактично введіть це на консолі браузера і натисніть клавішу Enter, щоб вибрати там свої параметри. Ну для мого випадку все було просто: 

window.location.origin
— Джон
джерело
7 
var getUrl = window.location;
var baseurl = getUrl.origin; //or
var baseurl =  getUrl.origin + '/' +getUrl.pathname.split('/')[1];

Але ви не можете сказати, що baseurl () CodeIgniter (або php joomla) поверне те саме значення, як можна змінити baseurl у файлі .htaccess цих фреймів.

Наприклад :

Якщо у вашому localhost є такий файл .htaccess:

RewriteEngine on
RewriteBase /CodeIgniter/
RewriteCond $1 !^(index.php|resources|robots.txt)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L,QSA]

$ This-> baseurl () поверне http: // localhost / CodeIgniter /

— АХІЛ КУМАР
джерело
6

Я зіткнувся з цією потребою в декількох проектах Joomla. Найпростіший спосіб, за яким я знайшов адресу, - це додати до мого шаблону приховане поле введення:

<input type="hidden" id="baseurl" name="baseurl" value="<?php echo $this->baseurl; ?>" />

Коли мені потрібно значення в JavaScript:

var baseurl = document.getElementById('baseurl').value;

Не настільки вигадливий, як використання чистого JavaScript, але простий і виконує роботу.

— Брайан Боллі
джерело
3

Я б рекомендував усім створити HTML базовий тег у розробці, а потім присвоїти href динамічно, тож у виробництві, який би хост не використовував клієнт, він автоматично приєднається до нього:

<html>
 <title>Some page title</titile>
  <script type="text/javascript">
    var head  = document.getElementsByTagName('head')[0];
    var base = document.createElement("base");
    base.href = window.document.location.origin;
    head.appendChild(base);
  </script>
 </head>
 ...

Отже, якщо ви знаходитесь у localhot: 8080, ви отримаєте доступ до кожного пов'язаного чи посилається файлу з бази, наприклад: http://localhost:8080/some/path/file.html Якщо ви перебуваєте на сайті www.example.com, це будеhttp://www.example.com/some/path/file.html

Також зауважте, що в кожному розташуванні, на якому ви знаходитесь, ви не повинні використовувати посилання на зразок глобусів у hrefs, наприклад: батьківське місцезнаходження http://localhost:8080/не викликає http://localhost:8080/some/path/.

Вимовно ви посилаєтесь на всі гіперпосилання як на повноцінні вироки без bas-url.

— cagcak
джерело
3

Формат - ім'я хоста / ім'я шляху / пошук

Отже, URL-адреса така: 

var url = window.location.hostname + window.location.pathname + window.location.hash

Для вашого випадку 

window.location.hostname = "stackoverflow.com"
window.location.pathname ="/questions/25203124/how-to-get-base-url-with-jquery-or-javascript"
window.location.hash = ""

Таким чином, basurl = ім'я хоста = window.location.hostname

— Пані Хірул Іслам Омі
джерело
3

Я здивований, що не у відповідях розглядається базовий URL, якщо він був встановлений у <base>тегу. У всіх поточних відповідях намагаються отримати ім'я хоста або ім’я сервера або першу частину адреси. Це повна логіка, яка також враховує <base>тег (який може посилатися на інший домен або протокол):

function getBaseURL(){
  var elem=document.getElementsByTagName("base")[0];
  if (typeof(elem) != 'undefined' && elem != null){
     return elem.href;
  }
  return window.location.origin;
}

Формат Jquery:

function getBaseURL(){
  if ($("base").length){
     return $("base").attr("href");
  }
  return window.location.origin;
}

Не втягуючись в логіку вище, скорочене рішення, яке враховує і <base>тег, іwindow.location.origin :

Js:

var a=document.createElement("a");
a.href=".";
var baseURL= a.href;

Jquery:

var baseURL= $('<a href=".">')[0].href

Підсумкове зауваження: для локального файлу на вашому комп’ютері (не на хості) window.location.originєдиний повертає, file://але рішення сортувальної версії вище повертає повний правильний шлях.

— Алі Шейхпур
джерело
1
Це не найкращий спосіб. Також дивіться відповідь @ DaniilSamoylov, яка містить <base>елемент.
— Бред
baseURI повертає базову URL-адресу вузла, тому в цьому випадку він повертає базовий шлях + ім'я документа. вам знадобиться більше кодів для видалення імені документа з цієї URL-адреси. @Brad
— Алі Шейхпур
Це рішення не повертає правильну базову URL-адресу, коли кореневий каталог веб-сторінки знаходиться в підкаталозі (наприклад, example.com/appRoot ). Він працює лише тоді, коли кореневий каталог веб-сторінки знаходиться безпосередньо в корені веб-хостингу.
— Майкл Хафнер
2 
window.location.origin+"/"+window.location.pathname.split('/')[1]+"/"+page+"/"+page+"_list.jsp"

майже так само, як відповідь Дженіш, але трохи коротше.

— Матейн
джерело
2

Я був просто на одній сцені, і це рішення працює для мене

На виду

<?php
    $document = JFactory::getDocument();

    $document->addScriptDeclaration('var base = \''.JURI::base().'\'');
    $document->addScript('components/com_name/js/filter.js');
?>

У файлі js ви отримуєте доступ baseдо змінної, наприклад у вашому сценарії:

console.log(base) // will print
// http://www.example.com/
// http://localhost/example
// http://www.example.com/sub/example

Я не пам'ятаю, звідки я беру цю інформацію, щоб дати кредит, якщо я знайду, я відредагую відповідь

— Маріо
джерело
1 
var getUrl = window.location;
var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
— vikas Chaturvedi
джерело
1
Будь ласка, подумайте, як додати відповідь до своєї відповіді.
— Козеріг
1

Ось щось швидке, що також працює file:// URL-адресами.

Я придумав цей однопластовий:

[((1!=location.href.split(location.href.split("/").pop())[0].length?location.href.split(location.href.split("/").pop())[0]:(location.protocol,location.protocol+"//" + location.host+"/"))).replace(location.protocol+"//"+location.protocol+"//"+location.protocol+"://")]
— Блублл
джерело
0

Ви згадали, що example.comможе змінитися, тому я підозрюю, що насправді вам потрібен базовий URL, щоб мати змогу використовувати відносні позначення шляху для своїх сценаріїв. У цьому конкретному випадку не потрібно використовувати сценарій - замість цього додайте базовий тег до свого заголовка:

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

Я зазвичай генерую посилання через PHP.

— Гексод
джерело
0

На випадок, коли хтось хотів би, щоб це перетворилося на дуже надійну функцію

    function getBaseURL() {
        var loc = window.location;
        var baseURL = loc.protocol + "//" + loc.hostname;
        if (typeof loc.port !== "undefined" && loc.port !== "") baseURL += ":" + loc.port;
        // strip leading /
        var pathname = loc.pathname;
        if (pathname.length > 0 && pathname.substr(0,1) === "/") pathname = pathname.substr(1, pathname.length - 1);
        var pathParts = pathname.split("/");
        if (pathParts.length > 0) {
            for (var i = 0; i < pathParts.length; i++) {
                if (pathParts[i] !== "") baseURL += "/" + pathParts[i];
            }
        }
        return baseURL;
    }
— нуандр
джерело
Це просто дає всю URL-адресу. Не базова URL-адреса.
— Сем
дійсно, не впевнений, куди я йшов із цим. Я давно перейшов до налаштування цього коду на стороні сервера
— nuander
0

Легко 

$('<img src=>')[0].src

Генерує img з порожнім src-іменем, змушує браузер сам обчислювати базовий URL-адрес, незалежно від того, /index.htmlчи є у вас чи щось інше.

— Похмурий
джерело
Це здається найелегантнішим рішенням і єдиним, що не дублює логіку браузера, що приємно. Мені цікаво, наскільки це портативно. Чи є в специфікаціях HTML щось, що б підказало, що це гарантовано працює у всіх браузерах?
— Matthijs
@MatthijsKooijman Залежить від інтерпретації специфікацій html. Якщо ви скажете, що ім'я файлу довжиною 0 є дійсним іменем ресурсу ... воно відповідає всім браузерам.
— Грим
Зрозумійте, як робляться браузери. У вас є кілька програмістів, (непряме) бажання побудувати браузер. Перше їх джерело - html-специфікації. Вони читають характеристики, і це одне з питань, які вони реально хочуть вирішити. Як ви думаєте, як вони (усі) вирішують ці обставини?
— Грім
-2

Розділіть і приєднайтеся до URL-адреси:

const s = 'http://free-proxy.cz/en/abc'
console.log(s.split('/').slice(0,3).join('/'))
— дай сонце
джерело
-4

Помістіть це у свій заголовок, щоб воно було доступне, коли вам це потрібно.

var base_url = "<?php echo base_url();?>";

Ви отримаєте http://localhost:81/your-path-fileабо http://localhost/your-path-file.

— Асрофіл Аль Банна
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.