如何在不删除标签本身的情况下覆盖 <base> 标签？答案

【问题标题】：How to override <base> tag without removing the tag itself?如何在不删除标签本身的情况下覆盖 <base> 标签？
【发布时间】：2012-09-06 15:17:35
【问题描述】：

我正在尝试向使用<base> 标签的该站点添加一些哈希链接（以内容表的格式，以便于网页导航）。

现在显然由于基础标签，所有其他相关标签都将相对于基础标签href。为了让我创建这个包含指向特定页面不同部分的链接的内部内容表，我需要获取默认 URL（在基本标记生效之前），以便内部链接可以正常工作。

有没有办法绕过基本标签并完成此操作？

【问题讨论】：

“指向特定页面不同部分的内部链接”...您是在谈论哈希链接，例如：href="#tab-2"？你能举个例子吗？

标签： html

【解决方案1】：

base 标签的效果对文档来说是全局的，覆盖<base href="..."> 效果的唯一方法是使用绝对 URL。

您可以在 JavaScript 中使用 window.location 来获取页面本身的 URL，以防文档是通过 HTTP 检索的。你可以用它来构造绝对 URL。

现在通常不需要base 标签。最好使用允许您从一个或多个基地址构造地址的服务器端技术。所以很可能最好的方法是去掉标签。

【讨论】：

我使用的电子商务软件不幸依赖 <base> 标签，所以它仍然存在。可能鲜为人知的事实：../relative 如果您的基础是子目录，则链接确实可以与基础标签一起使用。
以 ../ 开头的链接自然适用于在路径部分包含段的基地址。这样您就不会覆盖base 标签，只是在其影响下四处移动。
@JukkaK.Korpela，是的，我们可以使用服务器标签生成链接。但这不是反对使用base href 的理由。确实base href 在很多情况下都很有用。
@Pacerier，<base href=...> 标记会影响文档中的所有 URL 值属性。在编辑文档并添加相对 URL 以用于链接、图像引用或其他具有 URL 值属性的元素时，很容易忘记这一点或没有注意到该标记。

【解决方案2】：

您可以使用一些 javascript 和 jQuery 来“修复”这个问题 -

// get all the internal anchors inside #article 
$('#article a').each(
        function() {
            // get the href attribute
            href = $(this).attr('href');
            // does it have a href?
            if (href) {
                // does it have an internal anchor?
                if (href.match(/#/i)) {
                    // append window.location and write back to the href Attribute
                    new_href = window.location + href;
                    $(this).attr('href', new_href);
                }
            }
        }
    );

【讨论】：

感谢您的回答。定义变量时最好使用var，否则会在全局范围内定义。

【解决方案3】：

作为一个小替代方案，拥有本地 url 并保留基本 href，你可以试试这个。

$('a.local').each(
    function () {
		// get the href attribute
		var href = $(this).attr('href');
		// does it have a href?
		if (href) {
			var lastSlash = window.location.toString().lastIndexOf("/");
			var new_href = window.location.toString().substr(0, lastSlash + 1) + href;
			$(this).attr('href', new_href);
		}
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<base href="http://www.google.com">
<a class="local" href="mylocalpage.html">local page</a>
<a href="pageOnRemoteServer.html">remote page</a>

【讨论】：

【解决方案4】：

在链接之前添加/ 应该可以完成工作。假设您有<base href="/assets/images/" />。如果你使用<img src="logo.png" />，它会加载/assets/images/logo.png。否则，如果你使用<img src="/logo.png" />，它会从根目录加载/logo.png。

【讨论】：

添加 / 是正确的...假设您只是跳过协议并留下双 //。

【解决方案5】：

我需要包含一个相对样式表，忽略base 标签中的href。我发现如果我将样式表link 放在base 标签之前，href 不会受到影响。

我基于此信息：

如果指定了以下任一属性，则该元素必须位于其他具有 URL 属性值的元素之前，例如 's href 属性。

来自https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

我知道这很可能需要您将a 标记放在文档head 中，然后以某种方式设置它们以显示在正确的位置。所以这个技巧可能不是很有用。

注意：文档说基本标签“必须”出现在使用 URL 的元素之前，因此根据规范，我所做的可能不合法。

【讨论】：