我从未见过<base> HTML标签实际上在任何地方使用。它的使用是否存在意味着我应该避免使用的陷阱?

事实上,我从未注意到它在现代生产站点(或任何站点)上使用过,这让我对它持怀疑态度,尽管它似乎在简化我站点上的链接方面有有用的应用程序。


Edit

After using the base tag for a few weeks, I did end up finding some major gotchas with using the base tag that make it much less desirable than it first appeared. Essentially, the changes to href='#topic' and href='' under the base tag are very incompatible with their default behavior, and this change from the default behavior could easily make third party libraries outside of your control very unreliable in unexpected ways, since they will logically depend on the default behavior. Often the changes are subtle and lead to not-immediately-obvious problems when dealing with a large codebase. I have since created an answer detailing the issues that I experienced below. So test the link results for yourself before you commit to a widespread deployment of <base>, is my new advice!


当前回答

在决定是否使用<base>标记之前,您需要了解它是如何工作的,它可以用于什么以及它的含义是什么,并最终超过优点/缺点。


<base>标记主要简化了模板语言中相对链接的创建,因为您不需要担心每个链接中的当前上下文。

比如说

<base href="${host}/${context}/${language}/">
...
<link rel="stylesheet" href="css/style.css" />
<script src="js/script.js"></script>
...
<a href="home">home</a>
<a href="faq">faq</a>
<a href="contact">contact</a>
...
<img src="img/logo.png" />

而不是

<link rel="stylesheet" href="/${context}/${language}/css/style.css" />
<script src="/${context}/${language}/js/script.js"></script>
...
<a href="/${context}/${language}/home">home</a>
<a href="/${context}/${language}/faq">faq</a>
<a href="/${context}/${language}/contact">contact</a>
...
<img src="/${context}/${language}/img/logo.png" />

请注意,<base href>值以斜杠结束,否则它将相对于最后一个路径进行解释。


As to browser compatibility, this causes only problems in IE. The <base> tag is in HTML specified as not having an end tag </base>, so it's legit to just use <base> without an end tag. However IE6 thinks otherwise and the entire content after the <base> tag is in such case placed as child of the <base> element in the HTML DOM tree. This can cause at first sight unexplainable problems in Javascript/jQuery/CSS, i.e. the elements being completely unreachable in specific selectors like html>body, until you discover in the HTML DOM inspector that there should be a base (and head) in between.

一个常见的IE6修复是使用IE条件注释来包含结束标记:

<base href="http://example.com/en/"><!--[if lte IE 6]></base><![endif]-->

如果你不关心W3验证器,或者当你已经在HTML5上,那么你可以自我关闭它,每个web浏览器都支持它:

<base href="http://example.com/en/" />

关闭<base>标记还可以立即修复WinXP SP3上的IE6在无限循环中使用src中的相对URI请求<script>资源的疯狂问题。

Another potential IE problem will manifest when you use a relative URI in the <base> tag, such as <base href="//example.com/somefolder/"> or <base href="/somefolder/">. This will fail in IE6/7/8. This is however not exactly browser's fault; using relative URIs in the <base> tag is namely at its own wrong. The HTML4 specification stated that it should be an absolute URI, thus starting with the http:// or https:// scheme. This has been dropped in HTML5 specification. So if you use HTML5 and target HTML5 compatible browsers only, then you should be all fine by using a relative URI in the <base> tag.


As to using named/hash fragment anchors like <a href="#anchor">, query string anchors like <a href="?foo=bar"> and path fragment anchors like <a href=";foo=bar">, with the <base> tag you're basically declaring all relative links relative to it, including those kind of anchors. None of the relative links are relative to the current request URI anymore (as would happen without the <base> tag). This may in first place be confusing for starters. To construct those anchors the right way, you basically need to include the URI,

<a href="${uri}#anchor">hash fragment</a>
<a href="${uri}?foo=bar">query string</a>
<a href="${uri};foo=bar">path fragment</a>

其中${uri}基本上翻译成PHP中的$_SERVER['REQUEST_URI'], ${pageContext.request。JSP中的requestURI}和#{请求。JSF中的requestURI}。应该注意的是,像JSF这样的MVC框架有标签,减少了所有这些样板文件,并消除了<base>的需要。请参见a.o.使用什么URL链接/导航到其他JSF页面。

其他回答

另外,你应该记住,如果你在非标准端口上运行你的web服务器,你也需要在base href上包含端口号:

<base href="//localhost:1234" />  // from base url
<base href="../" />  // for one step above

它可能不是很流行,因为它不是很出名。我不会害怕使用它,因为所有主流浏览器都支持它。

如果您的站点使用AJAX,您将希望确保所有页面都正确设置了AJAX,否则可能会出现无法解析的链接。

只是不要在HTML 4.01 Strict页面中使用target属性。

有一件事要记住:

如果你要开发一个在iOS上的UIWebView中显示的网页,那么你必须使用BASE标签。否则它根本不会起作用。无论是JavaScript, CSS,图像-没有一个将工作在UIWebView下的相对链接,除非标签BASE被指定。

我以前也遇到过这种情况,直到我发现。

在AngularJS中,BASE标签默默地破坏了$cookieStore,我花了一段时间才弄清楚为什么我的应用程序不能再编写cookie了。警告……

在页面中内联SVG图像的情况下,当使用基本标签时,会出现另一个重要的问题:

因为使用基标记(如上所述),您实际上失去了使用相对散列url的能力,如in

<a href=“#foo”>

因为它们将根据基URL而不是当前文档的位置进行解析,因此不再是相对的。 因此,您必须将当前文档的路径添加到这些类型的链接,如in

<a href=“/path/to/this/page/name.html#foo”>

因此,base标记的一个看似积极的方面(将长URL前缀从锚标记中移开,并获得更好、更短的锚)对于本地哈希URL完全适得其反。

当在页面中内联SVG时,这尤其令人讨厌,无论是静态SVG还是动态生成的SVG,因为在SVG中可能有很多这样的引用,并且在大多数(但不是所有)用户代理实现中,只要使用了基本标记,它们就会全部中断(至少Chrome在编写本文时仍然可以在这些场景中工作)。

如果您正在使用模板系统或其他工具链来处理/生成页面,我总是会尝试摆脱base标记,因为在我看来,它带来的问题比它解决的问题要多。