как получить базовый 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="http://www.mysite.com/assets/css/themes/default.css" 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('/') + '/';
}
8 answers
Базовый 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 вы можете просто ввести window.location в свою консоль, и она вернет все доступные свойства.
Дальнейшее чтение доступно в этом потоке переполнения стека
Один из способов - использовать тег скрипта для импорта переменных, которые вы хотите добавить в свои представления:
<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");
Это делается просто с помощью этой переменной.
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) );
var baseTags = document.getElementsByTagName("base");
var basePath = baseTags.length ?
baseTags[ 0 ].href.substr( location.origin.length, 999 ) :
"";
Вы можете заставить PHP и JavaScript работать вместе, создав следующую строку в каждом шаблоне страницы:
<script>
document.mybaseurl='<?php echo base_url('assets/css/themes/default.css');?>';
</script>
Затем вы можете обратиться к document.mybaseurl в любом месте вашего JavaScript. Это избавляет вас от некоторой отладки и сложности, потому что эта переменная всегда согласуется с вычислениями PHP.
Базовый 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;
}
Я могу опоздать, но для всех будущих выродков. Во-первых, я полагаю, что вы хотите вызвать 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> файла представления с помощью тега <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. Надеюсь, это помогло.
Чтобы получить в точности то же самое, что и base_url из codeigniter, вы можете сделать:
var base_url = window.location.origin + '/' + window.location.pathname.split ('/') [1] + '/';
Это будет более полезно, если вы работаете с чистым файлом Javascript.