Как код в файле JavaScript получает URL-адрес файла?
Мне нужно динамически загружать таблицу стилей CSS на страницу, которая находится в другом домене. Как я могу получить полный URL-адрес файла JS для использования в атрибуте href таблицы стилей?
Например, вот структура:
http://bla.com/js/script.js
http://bla.com/css/style.css
Я хочу динамически загружать таблицу стилей на страницу http://boo.net/index.html. Проблема в том, что я не знаю бит bla.com заранее, просто тот факт, что таблица стилей находится в ../css/ относительно JS файла.
script, конечно, включен в index.html. jQuery тоже слишком.
Ответы
Ответ 1
Добавьте идентификатор в тег script:
<script type="text/javascript" id="myScript" src="http://bla.com/js/script.js"></script>
И в http://bla.com/js/script.js
:
var myScript = document.getElementById('myscript');
var myScriptSrc = myScript.getAttribute('src');
alert(myScriptSrc); // included for debugging
Вы должны иметь возможность манипулировать значением myScriptSrc
, чтобы получить путь к любому другому контенту на bla.com
.
Я думаю, что этот пример - это Джеймс Блэк, который был в его ответе.
Наконец, всем, предлагающим использовать document.location
, имейте в виду, что если вы хотите доступ только для чтения к текущему адресу страницы, вы должны использовать document.URL
или window.location
. Если вы хотите установить адрес страницы, вы всегда должны использовать window.location.href
. Хотя window.location = 'location';
работает, мне всегда надоело видеть, что String присваивается местоположению. Я не уверен, почему, поскольку JavaScript разрешает всевозможные преобразования неявного типа.
- ссылка mozilla:
document.location
изначально было доступно только для чтения, хотя браузеры Gecko также позволяют вам назначать. Для безопасности между браузерами используйте window.location. Чтобы получить только URL-адрес в виде строки, можно использовать свойство document.URL только для чтения.
- Ссылка на ВС: Не используйте location как свойство объекта
document
; вместо этого используйте свойство document.URL. Свойство document.location
, которое является синонимом document.URL
, устарело.
Ответ 2
С помощью JQuery вы можете сделать что-то вроде:
$('script[src$="my_script.js"]').attr('src').replace('my_script.js','');
// outputs something like: "/static/js/"
Ответ 3
Еще проще, чем использовать id
, просто оставить разметку самостоятельно и использовать document.currentScript
. Ссылка на MDN упоминается в разделе Notes, небольшом причуде, который требует, чтобы JavaScript выполнялся синхронно, m, чтобы объяснить, как избежать этой ловушки.
Важно отметить, что это не будет ссылаться на элемент <script>
, если код в script вызывается как обработчик обратного вызова или события; он будет ссылаться только на элемент во время его первоначальной обработки.
Преимущество этого решения заключается в том, что вам не требуется использовать специальную разметку, и это особенно полезно, если вы не можете получить доступ к HTML самостоятельно по какой-либо причине (например, если он используется клиентом или разработчиком с использованием вашего API).
Если script выполняется синхронно (это означает, что основное содержимое script не завернуто в прослушиватель событий или какую-либо другую функцию, установленную для оценки позже, чем когда код "изначально обрабатывается" ), вы может просто использовать document.currentScript
для доступа к текущему обрабатывающему элементу <script>
вашего кода. Чтобы продемонстрировать, как эффективно использовать это, я дам базовую демонстрацию ниже.
HTML:
<script type="text/javascript" src="http://bla.com/js/script.js"></script>
JavaScript в http://bla.com/js/script.js
:
var myScript = document.currentScript,
mySrc = myScript.getAttribute('src');
console.log(mySrc); // "http://bla.com/js/script.js"
$(function () {
// your other code here, assuming you use jQuery
// ...
});
Если вы не хотите, чтобы переменная отображалась в глобальной области, вы также можете сделать это:
(function () {
var myScript = document.currentScript,
mySrc = myScript.getAttribute('src');
console.log(mySrc); // "http://bla.com/js/script.js"
$(function () {
// your other code here
// ...
});
}()); // self-executing anonymous function
В основном необходимо убедиться и получить доступ к document.currentScript
во время синхронного выполнения script, иначе он не будет ссылаться на то, что вы ожидаете от него.
Ответ 4
var JS_SELF_URL = (function() {
var script_tags = document.getElementsByTagName('script');
return script_tags[script_tags.length-1].src;
})();
Когда браузер анализирует теги, он также загружает и выполняет их. Поэтому, когда ваш JS файл выполняется, в настоящее время последний тег анализируется.
Ответ 5
Вы можете прочитать document.location
, но вы также можете использовать относительные URL
Ответ 6
Вы можете посмотреть тег script для местоположения javascript, и с помощью document.location вы, вероятно, можете определить относительную адресацию, чтобы определить, где может быть файл css.
Ответ 7
Свойство стека объектов ошибок может предоставлять информацию о URL-адресе.
try
{
throw new Error();
}
catch(exc)
{
console.log(exc.stack);
}
К сожалению, Webkit не поддерживает (но Chromium) поддержку свойства стека. Существует несколько браузеров, поддерживающих эту функцию: http://173.45.237.168/reference/html/api/Error.html#Error.stack
Вместо стека Webkit предоставляет свойство sourceURL, вот пример использования:
try
{
throw new Error();
}
catch(exc)
{
console.log(exc.sourceURL);
}