如何将基本 href 用于外部链接并保留内部链接？答案

【问题标题】：How can I use a base href for external links and also keep internal links?如何将基本 href 用于外部链接并保留内部链接？
【发布时间】：2017-12-04 07:11:07
【问题描述】：

我有一个带有字母索引的 HTML 文件，其中包含“内部”（相对）链接，指的是文档本身。现在每个字母都包含指向外部（绝对）链接的链接。总共有大约 5,500 个这样的链接，为每个链接添加相同的基本 href 是非常愚蠢的。这是一个使用基本 href 的经典案例。但是，使用基本 href 会取消内部引用。

是否可以保留内部链接并为外部链接使用“base href”，因为它们都属于同一个基地址？

例子：

<a href="#A">A</a> | <a href="#B">B</a> | ...

<a name="A"></a>
<li><a href="https://stackoverflow.com/questions/37158674">37158674</a></li>
<li><a href="https://stackoverflow.com/questions/37158675">37158675</a></li>
...

这里的基本href当然是“https://stackoverflow.com/questions/”

【问题讨论】：

你是说你也有链接/yoursitepage吗？你想让一些人去https://stackoverflow.com/questions/，而一些人留在内部？
您可以创建使用 JavaScript 或 PHP 编写 HTML 的代码。
是的，卡提克。正是这样。不错的主意，PHPglue。但如果可能的话，我正在寻找一条直路。我还可以使用第二个本地 HTML 文件来放置带有外部链接的基本 href。但是，我更喜欢 JS 解决方案！ :) 谢谢。

标签： html

【解决方案1】：

base 元素指定相对 URL 的基本 URL，而绝对 URL 保持不变。它不关心相对 URL 是相对于您的站点还是其他站点，也不关心您的绝对 URL 指向的位置。但是，它将映射所有页面上的相对 URL，包括那些到图像、样式表、脚本和其他资源的 URL。

话虽如此，但要使其适用于外部超链接而不是内部超链接的唯一方法是，如果您的所有内部超链接都使用绝对 URL 编写（并且您的所有外部超链接都使用相对 URL 编写，如您所愿）。你不需要 JavaScript ——你只需要小心确保你的内部链接都使用绝对 URL，这样它们就不会相对于 stackoverflow.com 被解析。这确实包括指向命名锚点的链接。不过，如果您想节省近 200 KB 的未压缩标记（用于 5,500 个链接），如果您问我，这是一个公平的权衡！

例子：

<base href="https://stackoverflow.com/questions">
<a href="https://example.com/questions.html#A">A</a> |
<a href="https://example.com/questions.html#B">B</a> | ...

<a name="A"></a>
<ol>
<li><a href="37158674">37158674</a></li>
<li><a href="37158675">37158675</a></li>
...

【讨论】：

【解决方案2】：

这是一个 JavaScript 解决方案，除非您使用 JavaScript 或某种模板语言，否则仅使用 HTML 是不可能的

let stackoverflow = "https://stackoverflow.com/questions/"
function redrSO(questionId){
  window.location=stackoverflow+questionId;
}

<a href="#A">A</a> | <a href="#B">B</a> | ...

<a name="A"></a>
<li><a href="#" onclick="redrSO(37158674)">37158674</a></li>
<li><a href="#" onclick="redrSO(37158675)">37158675</a></li>

【讨论】：

不错！谢谢。我开始接受这样一个事实，即内部和外部引用的组合不能用直接的 HTML 代码和在同一个 HTML 文件中完成（即在框架中不使用不同的文件等）而你的是我见过的最好的 JS 解决方案: 短小精悍。
我会说对于外部 stackoverflow 链接只使用绝对 url，如果可以避免，使用 javascript 链接并不是一个很好的做法
实际上，在查看 boltclocks 的答案并意识到您有 5500 行这样的代码后，我想编辑该声明，因为您可以节省 192.5 kbs 的下载时间。我将更改该 onclick 函数的名称

【解决方案3】：

您可以使用 PHP 创建链接，例如：

<?php
function stackLink($num){
  echo "<a href='https://stackoverflow.com/questions/$num'>$num</a>";
}
?>
<li><?php stackLink(37158674); ?></li>
<li><?php stackLink(37158675); ?></li>

【讨论】：

如果 HML 在服务器上运行，这不是一个坏主意。我正在寻找可以在任何 HTML（本地、用户端、从 PC 上运行）甚至不使用 JS 的东西。