Относительные URL-адреса для файлов Javascript

У меня есть код в файле javascript, который должен отправлять запросы обратно на сервер. Вопрос в том, как найти URL-адрес для script, в котором я есть, поэтому я могу создать правильный URL-адрес запроса для ajax.

I.e., тот же script включен в /, /help, /whatever и т.д., в то время как он всегда должен запрашивать от /data.json. Кроме того, тот же сайт запускается на разных серверах, где / -папка может быть размещена по-разному. У меня есть средства для разрешения относительного URL-адреса, где я включаю Javascript (шаблон публикации ez), но не внутри самого файла javascript.

Существуют ли небольшие скрипты, которые будут работать во всех браузерах, сделанных для этого?

Ответ 1

Для этого мне нравится размещать элементы <link> на странице <head>, содержащие URL-адреса, используемые для запросов. Они могут быть сгенерированы вашим серверным языком, поэтому они всегда указывают на правильный вид:

<link id="link-action-1" href="${reverse_url ('action_1')}"/>

становится

<link id="link-action-1" href="/my/web/root/action-1/"/>

и может быть получен Javascript с помощью:

document.getElementById ('link-action-1').href;

Ответ 2

document.location.href предоставит вам текущий URL-адрес, который затем можно будет использовать с использованием строковых функций JavaScript.

Ответ 3

Невозможно, чтобы клиент мог определить корень webapp, не сказав сервером, поскольку он не знает настройки сервера. Один из вариантов, который вы можете попробовать, - использовать базовый элемент внутри элемента head, чтобы сервер генерировал его динамически, а не hardcoding (поэтому он показывает соответствующий URL для каждого сервера):

<base href="http://path/to/webapp/root/" />

Все URL-адреса будут считаться относительными. Поэтому вы просто сделаете свой запрос /data.json. Тем не менее, вам необходимо убедиться, что все другие ссылки в приложении имеют это в виду.

Ответ 4

Если script знает свое собственное имя файла, вы можете использовать документ. getElementsByTagName(). Перейдите в список до тех пор, пока не найдете script, который соответствует вашим, и извлеките полный (или относительный) URL-адрес таким образом.

Вот пример:

function getScriptUrl ( name ) {
    var scripts = document.getElementsByTagName('script');
    var re = RegExp("(\/|^)" + name + "$");
    var src;
    for( var i = 0; i < scripts.length; i++){
        src = scripts[i].getAttribute('src');
        if( src.match(re) )
            return src;
    }
    return null;
}

console.log( 'found ' + getScriptUrl('demo.js') );

Примите во внимание, что этот подход подпадает под столкновение имен файлов.

Ответ 5

Я включаю следующий код в основную точку входа в мои библиотеки (main.php):

/**
 * Build current url, depending on protocal (http/https),
 * port, server name and path suffix
 */
$site_root = 'http';
if (isset($_SERVER["HTTPS"]) && $_SERVER["HTTPS"] == "on") 
    $site_root .= "s";
$site_root .= "://" . $_SERVER["SERVER_NAME"];
if ($_SERVER["SERVER_PORT"] != "80")
    $site_root .= ":" . $_SERVER["SERVER_PORT"];
$site_root .= $g_config["paths"]["site_suffix"];

$g_config["paths"]["site_root"] = $site_root;

$g_config - это глобальный массив, содержащий параметры конфигурации. Таким образом, site_suffix может выглядеть так: "/sites_working/thesite/public_html" в вашем окне разработки и просто "/" на сервере с виртуальным хостом (доменное имя).

Этот метод также хорош, потому что, если кто-то вводит в IP-адрес вашего окна разработки, он будет использовать тот же IP-адрес для создания пути к папке javascript вместо чего-то вроде "localhost", и если вы используете "localhost" он будет использовать "localhost" для создания URL-адреса.

И поскольку он также обнаруживает SSL, вам не придется беспокоиться о погоде, когда ваши ресурсы будут отправляться через HTTP или HTTPS, если вы когда-либо добавляете поддержку SSL на ваш сервер.

Затем в вашем шаблоне используйте

<link id="site_root" href="<?php echo $g_config["paths"]["site_root"] ?>"/>

или

<script type = "text/javascript">
var SiteRoot = "<?php echo $g_config["paths"]["site_root"]; ?>";
</script>

Я предполагаю, что последнее будет быстрее.