如何在 Javascript 中设置页面的基本 href？

Question

我想根据当前主机名在 Javascript 中设置页面的基本 href 属性。我已经生成了可以在不同主机名上查看的 HTML 页面，这意味着生成基本 href 标签在一个主机名中可以工作，但在另一个主机名中则不正确。

Answer 1

正确的方法是根据当前主机名对标记执行 document.write：

正确：

<script type="text/javascript">
document.write("<base href='http://" + document.location.host + "' />");
</script>

此方法在 IE、FF、Chrome 和 Safari 中产生了正确的结果。它产生的（正确的）结果与执行以下操作不同：

不正确：

<script type="text/javascript">
var newBase = document.createElement("base");
newBase.setAttribute("href", document.location.hostname);
document.getElementsByTagName("head")[0].appendChild(newBase);
</script>

Answer 2

我认为你最好这样做，

    <script type="text/javascript">
        document.head.innerHTML = document.head.innerHTML + "<base href='" + document.location.href + "' />";
    </script>

因为 location.hostname 不会返回应用程序上下文根！您还可以在控制台 console.log 上记录 document.location，以查看 document.location 上的所有可用元数据。

Answer 3

我不得不不同意最上面的答案。它不考虑协议，因此会失败。

我必须考虑协议/主机/端口的工作解决方案如下，

    var base = document.createElement('base');
    base.href = window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
    document.getElementsByTagName('head')[0].appendChild(base);

目前在包括 IE11 在内的所有主要浏览器中都可以正常工作

我已经使用它来制作一个 npm 包，该包还支持在该基本 href 的末尾添加后缀如果任何人都感兴趣

https://www.npmjs.com/package/dynamic-base

https://github.com/codymikol/dynamic-base

Answer 4

document.write("");

<script>
document.write("<base href='"+ window.location.protocol +'//' + window.location.host + "' >");
</script>

Answer 5

window.document.head.innerHTML=`<base href=${href}>`+window.document.head.innerHTML;

href 变量是您要使用的 href。