Добавление тега <base> href с Javascript не работает

Question

Базовый тег HTML используется для указания URL-адреса по умолчанию и цели по умолчанию для всех ссылок на странице. Домен моей угловой страницы динамический (тестовый, производственный и т. Д.).

Поскольку IE9 и IE10, по-видимому, не поддерживают относительный путь, такой как «app /», но нуждаются в том, чтобы он был абсолютным, необходимо решение, чтобы указать правильную базовую «href».

Я пытаюсь добавить следующее безуспешно:

<script type="text/javascript">
    document.write("<base href='http://localhost:8080/app/' />");
</script>

Он генерирует ту же разметку DOM, что и «жесткое кодирование», например:

<base href='http://localhost:8080/app/' />

Жестко закодированная версия работает во всех протестированных браузерах, но версия JavaScript - нет. На самом деле он работает только в IE9 (согласно моему тесту).

Я предполагаю, что любой базовый тег «анализируется» до запуска любого JS, и поэтому браузер не применяет его к ссылкам, потому что он не может найти его при этом. точка ... Однако это всего лишь тезис.

Любые идеи?

javascript html base

2

Jesper Wilfing 16 Дек 2015 в 19:21

Answer 1

Спасибо за все ответы. Я нашел решение, которое работает в моем случае, и важно было не добавлять сам BASE-тег с помощью JavaScript, а only изменять атрибут href. Если бы я добавил тег с JavaScript, он не работал бы в большинстве браузеров для моего решения. Следующий код изменяет значение href с помощью JavaScript, чтобы сделать его абсолютным на основе текущего домена, и оно отлично работает как в Chrome, так и в IE9 ...

<head>
  <base href="app/" />
  <script>
    (function() {
      // Fetch base element and href attribute
      var baseElement = document.getElementsByTagName('base')[0];
      var currentBaseHrefValue = baseElement.getAttribute('href');

      // Get correct domain value
      var urlForBase = window.location.href;
      var urlForBaseArr = urlForBase.split('/');
      var baseHrefUrl = urlForBaseArr[0] + '//' + urlForBaseArr[2] + '/' + currentBaseHrefValue;

      // Update base with domain to make it absolute for IE9 and IE10
      baseElement.setAttribute("href", baseHrefUrl);
    }());
  </script>
</head>

Ура!

0

Jesper Wilfing 17 Дек 2015 в 09:42

Answer 2

Я думаю, что тег BASE следует использовать в заголовке, а не в теле. Таким образом, вы должны добавить BASE в нужном месте.

Примере

var base = document.createElement('base');
base.href = 'http://www.w3.org/';
document.getElementsByTagName('head')[0].appendChild(base);

Это должно решить проблемы.

1

16 Дек 2015 в 16:39

Answer 3

Чтобы добавить ответ @SkyWookie, размещая <base> в заголовке, вы должны поместить его перед любыми другими элементами, что не так просто с простым JS. Функция prepend(elem, host) предназначена для таких случаев.

Примечание. Проверено в этом фрагменте, похоже, что оно не работает. Если вы хотите, чтобы это работало, перейдите сюда: http://plnkr.co/edit/J4XH6UYeKSilOxCu86De? p = Предварительный просмотр.

Чтобы увидеть, что база вставлена правильно, вы должны сделать следующее:

Щелкните правой кнопкой мыши на странице.
Пик Осмотреть.
Выберите вкладку Элементы.
Найдите <head> и проверьте, является ли первый элемент внутри <head> <base>

var baseHref = document.querySelector('base').href;

function prepend(elem, host) {
  var host = document.querySelector(host);
  var elem = document.createElement(elem);
  host.insertBefore(elem, host.firstChild);
}

//Usage

prepend('base', 'head');
baseHref = "https://example.com";

<!doctype>
<html>

<head>
  <!---------------------------------<base> should go there-->
  <meta charset="utf-8" />
  <title>DynamicBase</title>
  <link href="style.css" rel="stylesheet" />
  <style></style>
  <script src="script.js"></script>
</head>

<body>

</body>

</html>

1

zer00ne 16 Дек 2015 в 18:07

Answer 4

Попробуйте использовать функцию JQuery и $ (). Ready (), которая вызывается только после завершения загрузки страницы.

-4

luca3003 16 Дек 2015 в 16:26

Добавление тега <base> href с Javascript не работает

4 ответа

Похожие вопросы

Новые вопросы

javascript