使用 Javascript 添加 <base> 标签 href 不起作用

Question

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

由于 IE9 和 IE10 似乎不支持相对路径，如 "app/"，但需要它是绝对路径，因此需要一个解决方案来指定正确的基础 "href"。

我尝试添加以下内容但没有成功：

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

它生成与 "hard-coding" 相同的 DOM 标记，如下所示：

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

硬编码版本在所有经过测试的浏览器中都能正常工作，但 JavaScript 版本不能。它实际上只能在 IE9 中工作（根据我的测试）。

我的猜测是任何 base-tag 都是 "parsed" before 任何 JS 都是运行，这就是浏览器不适用的原因它到链接，因为它在那个时候找不到它......然而这只是一篇论文。

有什么想法吗？

Answer 1

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

Answer 2

我认为 BASE 标签应该用在 HEAD 中，而不是 BODY。所以你应该在他正确的地方追加BASE。

Example

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

这应该可以解决问题。

Answer 3

要添加到@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>

Answer 4

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

干杯！

使用 Javascript 添加 <base> 标签 href 不起作用

Adding <base> tag href with Javascript doesn't work

javascript

html

base