Базовый тег 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, и поэтому браузер не применяет его к ссылкам, потому что он не может найти его при этом. точка ... Однако это всего лишь тезис.
Любые идеи?
4 ответа
Спасибо за все ответы. Я нашел решение, которое работает в моем случае, и важно было не добавлять сам 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>
Ура!
Я думаю, что тег BASE следует использовать в заголовке, а не в теле. Таким образом, вы должны добавить BASE в нужном месте.
var base = document.createElement('base');
base.href = 'http://www.w3.org/';
document.getElementsByTagName('head')[0].appendChild(base);
Это должно решить проблемы.
Чтобы добавить ответ @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>
Попробуйте использовать функцию JQuery и $ (). Ready (), которая вызывается только после завершения загрузки страницы.
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.