Как динамически установить базовый тег?

Мы используем магистральную маршрутизацию, mod_rewrite, requirejs. Приложение находится в папке, а не в корневом веб-каталоге, поэтому для файлов изображений,css и js требуются относительные ссылки на папки (если бы мы могли использовать абсолютные папки, которые загружались бы файлы).

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

<base href="//localhost/myapp/" /> 

Это решение работает. Проблема в том, что нам нужно варьировать базовый тег, чтобы у нас могли быть разработчики и производственные версии кода. Но загрузка файла js с переменной не будет работать без базового тега.

Просто чтобы быть уверенным, что я сделал стандартные исправления для позвоночника. Исправить необязательный слеш (/):

routes: {
  'faq(/)':'jumpToText',
  'register(/)':'jumpToForm',
},

И установив рут в истории

Backbone.history.start({pushState: true, root: "//localhost/myapp/");

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

1 ответ

В конечном итоге мы использовали JavaScript для анализа значения из location.href . Оберните этот код в тег скрипта в голове:

document.write("<base href="+'//'+document.location.host +'/'+ location.href.split('/')[3]+'/'+" />");

И сделал то же самое в rout.js (разбор URI)

Backbone.history.start({pushState: true, root: "/"+location.href.split('/')[3]});

Рабочее решение, которое я должен учитывать для протокола / хоста / порта, следующее

var base = document.createElement('base');
base.href = window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
document.getElementsByTagName('head')[0].appendChild(base);

В настоящее время это отлично работает во всех основных браузерах, включая IE11 (который не поддерживает window.location.origin)

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

https://www.npmjs.com/package/dynamic-base

https://github.com/codymikol/dynamic-base

Другие вопросы по тегам