Question

HTML base-tag用于为页面上的所有链接指定默认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之前，任何基本标记都被“解析”，这就是为什么浏览器不会将它应用于链接，因为它无法找到那时候......这只是一篇论文。

有什么想法吗？

Answer 1

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

Example

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

这应该可以解决问题。

Answer 2

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

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

干杯！

Answer 4

尝试使用JQuery和$（）。ready（）函数，只有在页面加载完成后才会调用它。

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

4 个答案: