Как получить базовый url в javascript

Я создаю веб-сайт с CodeIgniter, у меня есть различные ресурсы, которые я загружаю с помощью base_url вспомогательная функция, подобная этой

<link rel="stylesheet" type="text/css" href="'.base_url('assets/css/themes/default.css').'" id="style_color"/>

который производит (т.е. www.mysite.com)

<link rel="stylesheet" type="text/css" href="#" onclick="location.href='http://www.mysite.com/assets/css/themes/default.css'; return false;" id="style_color"/>

Затем я могу обменять этот ресурс другим в javascript, подобном этому

$('#style_color').attr("href", "assets/css/themes/" + color_ + ".css");

что произойдет, так это то, что он попытается загрузить ресурс, не используя абсолютный путь, сгенерированный php, поэтому мое решение добавляло фиктивный тег на каждой странице с php, как этот

<div id="base_url" class="'.base_url().'"></div>

Затем я изменил строку javascript на

$('#style_color').attr("href", $('#base_url').attr("class") + "assets/css/themes/" + color_ + ".css");

он работает, но он не выглядит элегантным вообще, поэтому, я был бы признателен за любую помощь в том, как, возможно, создать этот базовый url из javascript или любого другого решения, спасибо:)

Я предпочел только решение Javascript, и поскольку я использую CodeIgniter, переменную document.base_url с сегментами URL-адреса от protocol до index.php показалось удобным

document.base_url = base_url('index.php');

с функцией base_url(), являющейся

function base_url(segment){
   // get the segments
   pathArray = window.location.pathname.split( '/' );
   // find where the segment is located
   indexOfSegment = pathArray.indexOf(segment);
   // make base_url be the origin plus the path to the segment
   return window.location.origin + pathArray.slice(0,indexOfSegment).join('/') + '/';
}

Ответы

Ответ 1

Базовый URL-адрес в JavaScript

Вы можете легко получить доступ к текущему URL-адресу в JavaScript с помощью window.location

У вас есть доступ к сегментам этого URL через этот объект locations. Например:

// This article:
// https://stackoverflow.com/questions/21246818/how-to-get-the-base-url-in-javascript

var base_url = window.location.origin;
// "http://stackoverflow.com"

var host = window.location.host;
// stackoverflow.com

var pathArray = window.location.pathname.split( '/' );
// ["", "questions", "21246818", "how-to-get-the-base-url-in-javascript"]

В Chrome Dev Tools вы можете просто ввести window.location в свою консоль и вернуть все доступные свойства.

Дополнительное чтение доступно на этом потоке

Ответ 2

Один из способов - использовать тег script для импорта переменных, которые вы хотите просмотреть:

<script type="text/javascript">
window.base_url = <?php echo json_encode(base_url()); ?>;
</script>

Здесь я завернул base_url в json_encode, чтобы он автоматически удалял любые символы в действительный Javascript. Я поместил base_url в глобальное Окно, чтобы вы могли использовать его в любом месте, просто вызвав base_url, но обязательно поместите тег script над любым Javascript, который его вызывает. В данном примере:

...
$('#style_color').attr("href", base_url + "assets/css/themes/" + color_ + ".css");

Ответ 3

var baseTags = document.getElementsByTagName("base");
var basePath = baseTags.length ? 
    baseTags[ 0 ].href.substr( location.origin.length, 999 ) : 
    "";

Ответ 4

Это делается просто, выполняя эту переменную.

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

Теперь у вас будет базовый url. И теперь сделайте javascript функция, которая будет использовать эту переменную

function base_url(string){
    return base_url + string;
}

И теперь это всегда будет использовать правильный путь.

var path    =   "assets/css/themes/" + color_ + ".css"
$('#style_color').attr("href", base_url(path) );

Ответ 5

Базовый URL в JavaScript

Вот простая функция для вашего проекта, чтобы получить базовый URL в JavaScript.

// base url
function base_url() {
    var pathparts = location.pathname.split('/');
    if (location.host == 'localhost') {
        var url = location.origin+'/'+pathparts[1].trim('/')+'/'; // http://localhost/myproject/
    }else{
        var url = location.origin; // http://stackoverflow.com
    }
    return url;
}

Ответ 6

Вы можете заставить PHP и JavaScript работать вместе, создав следующую строку в каждом шаблоне страницы:

<script>
document.mybaseurl='<?php echo base_url('assets/css/themes/default.css');?>';
</script>

Затем вы можете ссылаться на документ .mybaseurl в любом месте вашего JavaScript. Это избавит вас от некоторой отладки и сложности, потому что эта переменная всегда соответствует расчету PHP.

Ответ 7

Чтобы получить то же самое, что и base_url от codeigniter, вы можете сделать:

var base_url = window.location.origin + '/' + window.location.pathname.split ('/') [1] + '/';

это будет более полезно, если вы будете работать с чистым файлом Javascript.

Ответ 8

Возможно, я опаздываю, но для всех будущих вундеркиндов. Во-первых, я предполагаю, что вы хотите вызвать base_url в вашем файле .js. поэтому давайте рассмотрим, что вы вызываете его ниже образца .js

sample.js

var str = $(this).serialize(); 

jQuery.ajax({
type: "POST",
url: base_url + "index.php/sample_controller",
dataType: 'json',
data: str,
success: function(result) {
alert("Success");
}

В приведенном выше описании не указано base_url. Поэтому код не будет работать должным образом. Но точно, что вы будете вызывать .js между <head></head> или <body></body> файла View с помощью тега <script> </script>. Поэтому, чтобы вызвать base_url в .js файле, мы должны написать приведенный ниже код, где вы планируете вызывать файл .js. И рекомендуется создать общий файл заголовка и поместить ниже код и все таблицы стилей вызова (.css) и javascript (.js). как показано ниже.

общий файл заголовка

<head>

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/js/sample.js">

<script>
  var base_url = '<?php echo base_url(); ?>';  
</script>


</head>

Теперь base_url будет работать и в файле sample.js. Надеюсь, что это помогло.

Ответ 9

в ресурсах/views/layouts/app.blade.php файл

<script type="text/javascript">
    var baseUrl = '<?=url('');?>';
</script>

Ответ 10

Если вы хотите, чтобы именно то, что указано на веб-странице, просто используйте:

document.querySelector('head base')['href']