Question

我注意到如果我在href标记的base属性中混合使用斜杠，浏览器的行为会有所不同。我知道base标签用于什么。我想知道在以下配置中浏览器如何解析路径的区别是什么：

<base href="http://domain.com/homework">
<base href="http://domain.com/homework/">
<base href="/homework">
<base href="/homework/">
<base href="homework/">
<base href="homework">

Answer 1

http://domain.com/homework，/homework和homework假设页面上的所有链接都是查询参数，如果它以?片段开头，如果它以一个#或子路径（如果它是一个字符串）。如果您在链接的开头添加/，则会假定您想要从URL的根开始，并忽略基本标记的设置。

示例：

<base href='http://domain.com/do-something'> <a href='?var1=foo&var2=bar'>foobar</a>  <a href='#home'>foobar</a>  <a href='homework'>homework</a>  <a href='/homework'>homework</a> 

如果没有输入完整的网址，但在基本标记的href开头有/，则表示您希望它位于您当前所在网址的根目录。基本上/homework是http://domain.com/homework的缩写。

示例：

假设您当前位于页面http://domain.com/some/page.html并且您的基础设置为<base href='/homework/'>，那么当您创建一个类似于此<a href='current'>Current</a>的链接时，它会将您链接到/ 3}}

但是，如果您将<base href='homework/'>从基本标记的开头移开，以便基本标记看起来像http://domain.com/some/homework/current，那么当您点击同一链接时，您将被带到{ {1}}

Answer 2

你可以测试一下：

var base = document.head.appendChild(document.createElement('base')),
    a = document.body.appendChild(document.createElement('a')),
    urls = ["http://domain.com/homework", "http://domain.com/homework/", "/homework", "/homework/", "homework/", "homework"];
a.href = "foo";
for (var url of urls) {
  base.href = url;
  console.log('Using base: ' + url + '\nRelative URL: foo\nAbsolute URL: ' + a.href);
}

div.as-console-wrapper { max-height: 100%; }

基本标记href属性中不同斜杠组合之间的区别是什么

2 个答案: