我从未见过<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!


当前回答

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

其他回答

它使页面更容易离线查看;您可以将完全限定的URL放在基本标记中,然后您的远程资源将正常加载。

要决定是否应该使用它,您应该了解它的功能以及是否需要它。这一点在我的回答中已经有了部分概述,我也对此做出了贡献。但是为了更容易理解和理解,这里有第二个解释。首先我们需要了解:

浏览器如何处理没有<BASE>被使用的链接?

对于一些例子,让我们假设我们有这些url:

一)http://www.example.com/index.html B) http://www.example.com/ C) http://www.example.com/page.html D) http://www.example.com/subdir/page.html

A和B都会将相同的文件(index.html)发送到浏览器,C当然发送page.html, D发送/subdir/page.html。

让我们进一步假设,两个页面都包含以下类型的链接:

完全限定的绝对链接(http://www…) 本地绝对链接(/some/dir/page.html) 相对链接,包括文件名(dir/page.html)和 只有“分段”的相对链接(#anchor, ?foo=bar)。

浏览器接收页面,并呈现HTML。如果它找到某个URL,它需要知道指向哪里。对于Link 1)来说,这一点总是很清楚的,因为它是按原样进行的。所有其他依赖于呈现页面的URL:

URL     | Type | Result
--------+------+--------------------------
A,B,C,D |    2 | http://www.example.com/some/dir/page.html
A,B,C   |    3 | http://www.example.com/dir/page.html
D       |    3 | http://www.example.com/subdir/dir/page.html
A       |    4 | http://www.example.com/index.html#anchor
B       |    4 | http://www.example.com/#anchor
C       |    4 | http://www.example.com/page.html#anchor
D       |    4 | http://www.example.com/subdir/page.html#anchor

现在使用<BASE>会有什么变化?

<BASE>应该替换浏览器显示的URL。因此,它呈现所有链接,就好像用户调用了<BASE>中指定的URL一样。这解释了其他几个答案中的一些困惑:

again, nothing changes for "fully qualified absolute links" ("type 1") for "local absolute links", the targeted server might change (if the one specified in <BASE> differs from the one being called initially from the user) "relative URLs" become critical here, so you've got to take special care how you set <BASE>: better avoid setting it to a directory. Doing so, links of "type 3" (relative dir + filename) might continue to work, but it most certainly breaks those of "type 4" (relative + segment); except for "case B" (no path or filename). setting it to the fully qualified file name produces, in most cases, the desired results.

举个例子最好地说明了这一点

假设你想用mod_rewrite“美化”一些URL:

<DOCUMENT_ROOT>/some/dir/file.php?lang = en 真实网址:http://www.example.com/some/dir/file.php?lang=en 友好的网址:http://www.example.com/en/file

让我们假设mod_rewrite用于透明地将用户友好的URL重写为真实的URL(没有外部重定向,因此“用户友好”的URL保留在浏览器的地址栏中,而真实的URL被加载)。现在该怎么办?

no <BASE> specified: breaks all relative links (as they would be based on http://www.example.com/en/file now) <BASE HREF='http://www.example.com/some/dir>: Absolutely wrong. dir would be considered the file part of the specified URL, so still, all relative links are broken. <BASE HREF='http://www.example.com/some/dir/>: Better already. But relative links of "type 4" are still broken (except for "case B"). <BASE HREF='http://www.example.com/some/dir/file.php>: Exactly. Everything should be working with this one.

最后一点

请记住,这适用于文档中的所有url:

< A HREF = < IMG SRC = < SCRIPT SRC = ...

我已经找到了一种方法来使用<基础>和基于锚的链接。您可以使用JavaScript来保持像#contact这样的链接正常工作。我在一些视差页面中使用了它,它很适合我。

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

...content...

<script>
var link='',pathname = window.location.href;
$('a').each(function(){
    link = $(this).attr('href');
    if(link[0]=="#"){
        $(this).attr('href', pathname + link);
    }
});
</script>

你应该用在这一页的末尾

哈希值“#”目前与基本元素一起用于跳转链接,但仅限于谷歌Chrome和Firefox的最新版本,而不是IE9。

IE9似乎会导致页面被重新加载,而不会跳转到任何地方。如果你在一个iframe的外部使用跳转链接,同时引导该框架在该框架内的另一个页面上加载跳转链接,你将得到加载在该框架内的跳转链接页面的第二个副本。

好吧,等一下。我认为基本标签配不上这种坏名声。

base标记的优点是它使您能够以更少的麻烦进行复杂的URL重写。

举个例子。您决定将http://example.com/product/category/thisproduct移动到http://example.com/product/thisproduct。修改.htaccess文件,将第一个URL重写为第二个URL。

有了base标签,就可以重写.htaccess了。没有问题。但是如果没有base标签,所有的相对链接都将中断。

URL重写通常是必要的,因为调整它们可以帮助您的网站的架构和搜索引擎可见性。的确,对于人们提到的“#”和“”问题,您需要变通方法。但是基本标记应该在工具包中占有一席之地。