使用JavaScript添加<base>标签href属性无效。

Question

使用JavaScript添加<base>标签href属性无效。

3

HTML的base标签用于指定页面中所有链接的默认URL和默认目标。我的angular页面的域名是动态的（测试，生产等）。

由于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之前，任何基础标签都会被“解析”，这就是为什么浏览器不能将其应用于链接的原因，因为此时找不到它...然而，这只是一个假设。有什么想法吗？

- Jesper Wilfing

4个回答

2

感谢所有的回复。我找到了适合我的情况的解决方案，而且重要的是不要使用JavaScript添加BASE标签本身，只需修改href属性即可。如果我用JavaScript添加了该标签，大多数浏览器都不能正常工作。以下代码使用JavaScript修改href值，使其根据当前域名变成绝对路径，在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>

干杯！

- Jesper Wilfing

为了使其在IE9中正常工作，最好在base标签中添加一个结束标签：<base href="app/"></base>。 - Jesper Wilfing

1

为了补充@SkyWookie的回答，当放置<base>在头部时，您应该将其放置在任何其他元素之前，这对于纯JS并不容易。函数prepend(elem, host)就是为这种情况而设的。

注意：在此代码片段中测试，它似乎不起作用。如果您想看到它工作，请转到此处：http://plnkr.co/edit/J4XH6UYeKSilOxCu86De?p=preview。

为了正确插入基础内容，您必须执行以下操作：

右键单击页面。
选择检查。
选择元素选项卡。
找到<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>

- zer00ne

-5

尝试使用JQuery和$().ready()函数，该函数仅在页面加载完成后调用一次。

- luca3003

为什么等待会有帮助？这个答案听起来像是一种迷信。 - Quentin

如果基础标签不起作用，那么js库将无法加载。因此，在使用任何框架（如jQuery）之前，我至少需要让基础标签起作用。而基础标签的整个目的是在页面加载之前使用。 - Jesper Wilfing

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user3470625 · Accepted Answer

我认为应该在HEAD中使用BASE标签，而不是BODY。因此，您应该将BASE标签放在正确的位置上。

示例：链接

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

那应该解决问题了。