HTML中的<base>标签无法与指向本地主机的href属性一起使用。

7

我的链接看起来像这样

<link rel="stylesheet" href="/utils/style.css" />

我的网站最初是放在主目录下的,所以没有问题。但当我把所有文件都移动到/dir/目录下时,我设置了基本标签:

<base href="http://localhost/dir" />

但是它不起作用。但是如果我使用我的网站的在线URL,它完全正常运行。
<base href="http://www.my-website.com" />

出了什么问题?


请检查您是否可以通过 http://localhost/dir/utils/style.css 访问 CSS。 - Vinay Pratap Singh Bhadauria
请运行以下 JavaScript 代码片段:alert(document.baseURI),然后查看它返回的基本 URI。如果这不是您想要的结果,则需要解决这个问题。(您可以通过在 URL 地址栏中输入 javascript:alert(document.baseURI) 来运行它) - Joeytje50
所以基本上问题在于我的URL以'/'开头,比如<a href='/dir/a.html'>,我无法在我的基础路径中设置路径,似乎它只接受主机,因此我可以有<base href="http://my-website.com/NonExistenceDir" />,它仍然可以工作!真是奇怪... - Paweł Bąkiewicz
我的经验法则是:“如果你需要使用base元素,那么你已经做错了什么。” // 不要通过http://localhost/dir来调用你的项目,而是为该项目设置一个适当的虚拟主机和本地域名,这样你就不会遇到这样的问题了。此外,你的设置将更接近后续的生产环境,因此在从开发环境部署到现场时也会减少错误潜力。 - CBroe
4个回答

4

Dir是一个目录,因此您需要在其后添加/,并且您不需要使用base来获得干净的URL... 如果这就是您想要做的。

<base href="http://localhost/dir/" />


注:Dir是英文单词directory的缩写。

在结尾添加 '/' 不会改变任何内容。似乎 base 只看主机部分,而不关心第一个 '/' 后面的内容,因为即使我输入以下内容也可以正常工作:<base href="http://www.my-website.com/someImaginaryDir" /> 那么如何设置 href="http://localhost/dir/"? - Paweł Bąkiewicz
1
你尝试过使用完整的CSS URL吗? <link rel="stylesheet" href="http://localhost/utils/style.css" /> - user3287764
你是如何在本地运行平面文件的?使用Apache还是IIS? - Dominic Green
我使用Apache,在我的树莓派上,我将其用作开发服务器,但是是的,我使用Apache。 - user3287764
对我有用,@John Aves! - shubhraj

2
Pawel,你可以使用以下基本标签: ```html ```
<base href="http://localhost/dir/" >

它应该在本地主机上完美运行,而在实际网站的情况下,您可以直接使用根扩展名:

<base href="/dir/" >

0
因为dir是一个目录,所以必须以斜杠结尾。

试试

<base href="http://localhost/dir/" />

<link rel="stylesheet" href="utils/style.css" />

额外

将本地主机映射到真实的URL可能会更整洁,这将解决您的问题。

在您的host文件中应该是这样的:

# localhost name resolution is handled within DNS itself.
    127.0.0.1       dev.my-website.com

重点是我不想更改所有的URL,所以它们需要保持href =“/utils/style.css”等。 - Paweł Bąkiewicz
那么最好对您的URL进行排序,为什么不将您的本地主机映射到主机文件中的URL。 - Dominic Green
那很好,但我无法映射像127.0.0.1/dir/ localhost2这样的URL路径。 - Paweł Bąkiewicz

0
Pawel,回答你的评论“所以基本上我的URL如果以...开头有问题”:这样想就会很清楚了:如果你链接中的URL是绝对的,那么你的浏览器将使用这些URL,按原样发送到服务器,因为在这种情况下,浏览器在发送到服务器之前不需要将它们转换为绝对路径。这就是为什么浏览器不关心你在base标签中指定的任何(非法或合法)路径的原因。(浏览器已经拥有所需的信息。)

我建议你使用我下面写的方案。这个方案对我来说效果很好。请注意,在 <a href> <img src> 等中指定的 URL 必须都是相对路径(即不以斜杠开头),例如:mytoplevel-dir/mysubdir/myresource.xxx 或者,如果资源直接位于根目录下,则为:myresource.xxx。请注意,您不应该(需要)上升任何级别(../subdir../myresource.xxx)。现在,当您使 URL 变成相对路径后,base 标签的 href 就变得重要了。

关于如何使代码适用于本地开发环境和线上服务器:只需使用 PHP 动态生成要在 base 标签中使用的路径即可。为此,您可以使用 $_SERVER["SCRIPT_NAME"] 并找到任何上下文路径(即特定于您本地服务器上的网站的目录)。这个方法很有效(我正在使用它)。例如:

<?php require_once('../common/php/URL_Manager.php'); ?>
.
.
<base href="<?php echo URL_Manager::getCurrentServerAndContextPath(); ?>" />
.
.

我的理解是,<base href> 应该有一个以 /(正斜杠)结尾的完全限定路径,而相对路径应该在其他地方使用,例如在 <a href><img src><link href> 中(仅用于内部链接)。

没有 <base href>,浏览器会通过使用地址栏中看到的路径将遇到的每个相对路径解析为绝对路径 - 这是发送到服务器的路径。

有了 <base href>,浏览器会通过使用 <base href> 中指定的绝对路径来解析页面上遇到的每个相对路径,这是发送到服务器的路径。

请注意,无论哪种方式,服务器都只接收到 绝对 路径。

最后,为了完整起见,我应该提到,当您像我上面建议的那样使用 base 标签时,您可能需要使用当前路径来补充每个锚链接,如下所示:

<a href="<?php echo URL_Manager::getCurrentPath(); ?>#menuBookmark">

而不是仅仅:

<a href="#menuBookmark">

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接