这里介绍的其实本质上是两种方法，通过创建DOM或通过JavaScript计算：
1)通过新创建的Image, 经测试会发送一个Aborted的请求，并且IE6不支持, 将new Image改成document.createElement('IMG')也是一样的;测试应该不喜欢这个方案；
|
1
2
3
4
5
6
7
8
9
|
function
getAbsoluteUrl(url){
var
img =
new
Image();
img.src = url;
// 设置相对路径给Image, 此时会发送出请求
url = img.src;
// 此时相对路径已经变成绝对路径
img.src =
null
;
// 取消请求
return
url;
}
getAbsoluteUrl(
"showroom/list"
);
|
2)创建Anchor（链接），这种方法不会发出任何请求（请求会在加入DOM时产生)，但是IE6也不支持
|
1
2
3
4
5
6
7
8
|
function
getAbsoluteUrl(url) {
var
a = document.createElement(
'A'
);
a.href = url;
// 设置相对路径给Image, 此时会发送出请求
url = a.href;
// 此时相对路径已经变成绝对路径
return
url;
}
getAbsoluteUrl(
"showroom/list"
);
|
3)使用JavaScript: 实现起来比较复杂，这里有一个例子，摘自： https://gist.github.com/1088850
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
/*jslint regexp: true, white: true, maxerr: 50, indent: 2 */
function
parseURI(url) {
var
m = String(url).replace(/^\s+|\s+$/g,
''
).match(/^([^:\/?
#]+:)?(\/\/(?:[^:@]*(?::[^:@]*)?@)?(([^:\/?#]*)(?::(\d*))?))?([^?#]*)(\?[^#]*)?(#[\s\S]*)?/);
// authority = '//' + user + ':' + pass '@' + hostname + ':' port
return
(m ? {
href : m[0] ||
''
,
protocol : m[1] ||
''
,
authority: m[2] ||
''
,
host : m[3] ||
''
,
hostname : m[4] ||
''
,
port : m[5] ||
''
,
pathname : m[6] ||
''
,
search : m[7] ||
''
,
hash : m[8] ||
''
} :
null
);
}
function
absolutizeURI(base, href) {
// RFC 3986
function
removeDotSegments(input) {
var
output = [];
input.replace(/^(\.\.?(\/|$))+/,
''
)
.replace(/\/(\.(\/|$))+/g,
'/'
)
.replace(/\/\.\.$/,
'/../'
)
.replace(/\/?[^\/]*/g,
function
(p) {
if
(p ===
'/..'
) {
output.pop();
}
else
{
output.push(p);
}
});
return
output.join(
''
).replace(/^\
//, input.charAt(0) === '/' ? '/' : '');
}
href = parseURI(href ||
''
);
base = parseURI(base ||
''
);
return
!href || !base ?
null
: (href.protocol || base.protocol) +
(href.protocol || href.authority ? href.authority : base.authority) +
removeDotSegments(href.protocol || href.authority || href.pathname.charAt(0) ===
'/'
? href.pathname : (href.pathname ? ((base.authority && !base.pathname ?
'/'
:
''
) + base.pathname.slice(0, base.pathname.lastIndexOf(
'/'
) + 1) + href.pathname) : base.pathname)) +
(href.protocol || href.authority || href.pathname ? href.search : (href.search || base.search)) +
href.hash;
}
|
因我们的产品为手机端网页，早已不支持ＩＥ６，最终使用的是第二种方案；
由此可见，用原生态的方法访问所有的Image, Anchor时，返回的都是绝对路径，此时如果想返回原来的相对路径，可以用查询DOM的方法，如jQuery.attr()方法：
|
1
2
3
4
|
//返回绝对路径，jQuery对象实质上是"类数组"结构（类似arguments)，因此使用[0]可以访问到原生态的对象，然后取"href";
console.log($anchor[0][
"href"
]);
//返回原始路径
console.log($anchor.attr(
"href"
));
|