Я создаю сайт с 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('/') + '/'; }
Вы можете легко получить доступ к текущему 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 в консоли и вернуть все доступные свойства.
Дальнейшее чтение доступно в этом потоке переполнения стека
Один из способов – использовать тег скрипта для импорта переменных, которые вы хотите просмотреть:
<script type="text/javascript"> window.base_url = <?php echo json_encode(base_url()); ?>; </script>
Здесь я завернул base_url в json_encode, чтобы он автоматически удалял любые символы в действительный Javascript. Я поместил base_url в глобальное Окно, чтобы вы могли его использовать в любом месте, просто вызвав base_url, но не забудьте поставить тег скрипта над любым 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>
Затем вы можете обратиться к документу.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> файла 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 . Надеюсь, это помогло.
Чтобы получить то же самое, что и base_url codeigniter , вы можете:
var base_url = window.location.origin + '/' + window.location.pathname.split ('/') [1] + '/';
это будет более полезно, если вы работаете с чистым файлом Javascript.