如果<base href...>设置为双斜杠会发生什么？

我喜欢了解如何为我的网络爬虫使用<base href="" />值，所以我在主要浏览器中测试了几种组合，最终发现了一些我不理解的双斜杠。

如果您不喜欢阅读所有内容，请跳转到D和E的测试结果。所有测试的演示：
http://gutt.it/basehref.php

一步一步我调用http://example.com/images.html:的测试结果

A-多基地href

<html>
<head>
<base target="_blank" />
<base href="http://example.com/images/" />
<base href="http://example.com/" />
</head>
<body>
<img src="/images/image.jpg">
<img src="image.jpg">
<img src="./image.jpg">
<img src="images/image.jpg"> not found
<img src="/image.jpg"> not found
<img src="../image.jpg"> not found
</body>
</html>

结论

仅具有href计数的第一个<base>
以/开始的源以根为目标
../上升一个文件夹

B-无尾部斜线

<html>
<head>
<base href="http://example.com/images" />
</head>
<body>
<img src="/images/image.jpg">
<img src="image.jpg"> not found
<img src="./image.jpg"> not found
<img src="images/image.jpg">
<img src="/image.jpg"> not found
<img src="../image.jpg"> not found
</body>
</html>

结论

<base href>忽略最后一个斜线之后的所有内容，因此http://example.com/images变为http://example.com/

C-应该如何

<html>
<head>
<base href="http://example.com/" />
</head>
<body>
<img src="/images/image.jpg">
<img src="image.jpg"> not found
<img src="./image.jpg"> not found
<img src="images/image.jpg">
<img src="/image.jpg"> not found
<img src="../image.jpg"> not found
</body>
</html>

结论

与测试B中的结果相同

D-双斜线

<html>
<head>
<base href="http://example.com/images//" />
</head>
<body>
<img src="/images/image.jpg">
<img src="image.jpg">
<img src="./image.jpg">
<img src="images/image.jpg"> not found
<img src="/image.jpg"> not found
<img src="../image.jpg">
</body>
</html>

E-带空格的双斜线

<html>
<head>
<base href="http://example.com/images/ /" />
</head>
<body>
<img src="/images/image.jpg">
<img src="image.jpg"> not found
<img src="./image.jpg"> not found
<img src="images/image.jpg"> not found
<img src="/image.jpg"> not found
<img src="../image.jpg">
</body>
</html>

两者都不是"有效"的URL，而是我的网络爬虫的真实结果。请解释在D和E中发生了什么，可以找到../image.jpg，以及为什么会造成空白？

仅为您的兴趣：

<base href="http://example.com//" />与测试C相同
CCD_ 12则完全不同。只找到../image.jpg
<base href="a/" />只找到/images/image.jpg

base的行为在HTML规范中有解释

base元素允许作者指定文档库用于解析相对URL的URL。

如测试A所示，如果有多个base和href，则文档库URL将是第一个。

解析相对URL的方法如下：

将URL解析器应用于URL，以base作为基本URL，以编码为编码。

URL解析算法在URL规范中进行了定义

这太复杂了，无法在这里详细解释。但基本上，情况就是这样：

相对于基本URL的主机计算以/开始的相对URL
否则，相对URL将根据基本URL的最后一个目录进行计算
请注意，如果基本路径没有以/结尾，那么最后一部分将是文件，而不是目录
./是当前目录
../上升一个目录

^{（可能"目录"one_answers"文件"不是URL中的正确术语）}

一些例子：

http://example.com/images/a/./就是http://example.com/images/a/
http://example.com/images/a/../就是http://example.com/images/
http://example.com/images//./就是http://example.com/images//
http://example.com/images//../为http://example.com/images/
http://example.com/images/./就是http://example.com/images/
http://example.com/images/../就是http://example.com/

请注意，在大多数情况下，//将与/类似。正如@poncha所说，

除非您使用某种URL重写（在这种情况下重写规则可能会受到斜杠数量的影响）映射到磁盘上的路径，但在（大多数？）现代操作系统中（Linux/Unix、Windows），一行中的多个路径分隔符没有任何特殊含义，因此/path/to/foo和/path//to///foo最终映射到同一个文件。

但是，一般情况下/ /不会变成//。

您可以使用以下代码段将相对URL列表解析为绝对URL：

var bases = [
  "http://example.com/images/",
  "http://example.com/images",
  "http://example.com/",
  "http://example.com/images//",
  "http://example.com/images/ /"
];
var urls = [
  "/images/image.jpg",
  "image.jpg",
  "./image.jpg",
  "images/image.jpg",
  "/image.jpg",
  "../image.jpg"
];
function newEl(type, contents) {
  var el = document.createElement(type);
  if(!contents) return el;
  if(!(contents instanceof Array))
    contents = [contents];
  for(var i=0; i<contents.length; ++i)
    if(typeof contents[i] == 'string')
      el.appendChild(document.createTextNode(contents[i]))
    else if(typeof contents[i] == 'object') // contents[i] instanceof Node
      el.appendChild(contents[i])
  return el;
}
function emoticon(str) {
  return {
    'http://example.com/images/image.jpg': 'good',
    'http://example.com/images//image.jpg': 'neutral'
  }[str] || 'bad';
}
var base = document.createElement('base'),
    a = document.createElement('a'),
    output = document.createElement('ul'),
    head = document.getElementsByTagName('head')[0];
head.insertBefore(base, head.firstChild);
for(var i=0; i<bases.length; ++i) {
  base.href = bases[i];
  var test = newEl('li', [
    'Test ' + (i+1) + ': ',
    newEl('span', bases[i])
  ]);
  test.className = 'test';
  var testItems = newEl('ul');
  testItems.className = 'test-items';
  for(var j=0; j<urls.length; ++j) {
    a.href = urls[j];
    var absURL = a.cloneNode(false).href;
      /* Stupid old IE requires cloning
         https://stackoverflow.com/a/24437713/1529630 */
    var testItem = newEl('li', [
      newEl('span', urls[j]),
      ' → ',
      newEl('span', absURL)
    ]);
    testItem.className = 'test-item ' + emoticon(absURL);
    testItems.appendChild(testItem);
  }
  test.appendChild(testItems);
  output.appendChild(test);
}
document.body.appendChild(output);

span {
  background: #eef;
}
.test-items {
  display: table;
  border-spacing: .13em;
  padding-left: 1.1em;
  margin-bottom: .3em;
}
.test-item {
  display: table-row;
  position: relative;
  list-style: none;
}
.test-item > span {
  display: table-cell;
}
.test-item:before {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  line-height: 1em;
  text-align: center;
  border-radius: 50%;
  margin-right: .4em;
  position: absolute;
  left: -1.1em;
  top: 0;
}
.good:before {
  content: ':)';
  background: #0f0;
}
.neutral:before {
  content: ':|';
  background: #ff0;
}
.bad:before {
  content: ':(';
  background: #f00;
}

你也可以玩这个片段：

var resolveURL = (function() {
  var base = document.createElement('base'),
      a = document.createElement('a'),
      head = document.getElementsByTagName('head')[0];
  return function(url, baseurl) {
    if(base) {
      base.href = baseurl;
      head.insertBefore(base, head.firstChild);
    }
    a.href = url;
    var abs = a.cloneNode(false).href;
    /* Stupid old IE requires cloning
       https://stackoverflow.com/a/24437713/1529630 */
    if(base)
      head.removeChild(base);
    return abs;
  };
})();
var base = document.getElementById('base'),
    url = document.getElementById('url'),
    abs = document.getElementById('absolute');
base.onpropertychange = url.onpropertychange = function() {
  if (event.propertyName == "value")
    update()
};
(base.oninput = url.oninput = update)();
function update() {
  abs.value = resolveURL(url.value, base.value);
}

label {
  display: block;
  margin: 1em 0;
}
input {
  width: 100%;
}

<label>
  Base url:
  <input id="base" value="http://example.com/images//foo////bar/baz"
         placeholder="Enter your base url here" />
</label>
<label>
  URL to be resolved:
  <input id="url" value="./a/b/../c"
         placeholder="Enter your URL here">
</label>
<label>
  Resulting url:
  <input id="absolute" readonly>
</label>

相关内容

最新更新

热门标签：