用 Javascript 添加 <base> 标记 href 不起作用答案

【问题标题】：Adding <base> tag href with Javascript doesn't work用 Javascript 添加 <base> 标记 href 不起作用
【发布时间】：2015-12-16 16:21:05
【问题描述】：

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

【解决方案1】：

我认为应该在 HEAD 中使用 BASE 标签，而不是 BODY。所以你应该在他的正确位置附加 BASE。

Example

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

这应该可以解决问题。

【讨论】：

这将是一个更好的链接：developer.mozilla.org/en-US/docs/Web/HTML/Element/base
嗨，我也尝试过这种方法（使用 javascript 附加而不是使用 document.write），我实际上将它放在 head-tag 中，就像我添加它一样-编码方式。
那么对不起。当我测试它时，document.write 已经为 body 添加了基础。也许您应该尝试使用 async 或 defer 运行脚本（如果它确实是由解析引起的）。

【解决方案2】：

要添加到@SkyWookie 的答案，当将<base> 放在头部时，您应该将它放在任何其他元素之前，这对于普通 JS 来说并不那么容易。函数prepend(elem, host)就是针对这种场合的。

注意：在这个 sn-p 中测试它看起来不像它工作。如果你想看到它的工作，去这里：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>

【讨论】：

【解决方案3】：

感谢所有回复。我找到了一个适用于我的解决方案，重要的是不要使用 JavaScript 添加 BASE-tag 本身，而是仅修改 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>

干杯！

【讨论】：

为了让它在 IE9 中工作，最好在基本标签中添加一个结束标签：

【解决方案4】：

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

【讨论】：

为什么等待会有帮助？这个答案带有货物崇拜的味道。
如果base标签不起作用，那么js库将无法加载。因此，至少在我的解决方案中，我需要在使用任何框架（如 jQuery）之前让 base-tag 工作。并且在页面加载之前使用基本标签的整个点。