使用 JavaScript 将相对路径转换为绝对路径
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5211052/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Converting relative paths to absolute with JavaScript
提问by James
HTML:
HTML：
<a href="/">1</a> // link to http://site.com
<a href="/section/page/">2/a> // link to http://site.com/section/page/
<a href="http://site.com/">3</a>
<a href="../gallery/1/">4</a> // link to http://site.com/gallery/1/
JS:
JS：
$("a").live('click', function(){
var url = $(this).attr("href");
//do something
});
How to convert relative path (var url) to absolute by jQuery?
如何var url通过jQuery将相对路径（）转换为绝对路径？
Script should do nothing, if it is already an absolute path.
如果脚本已经是绝对路径，则不应执行任何操作。
Thanks.
谢谢。
回答by user113716
I'm pretty sure that if you use the hrefpropertyinstead of getting the attribute, you'll have a full url with domain:
我很确定，如果您使用hrefproperty而不是获取attribute，您将拥有一个包含域的完整网址：
$("a").live('click', function(){
var url = this.href; // use the property instead of attribute
//do something
});
As noted in the question linked by @Phrogz, it sounds as though there are issues with IE6.
正如@Phrogz 链接的问题中所指出的，听起来好像 IE6 存在问题。
If you need to support it, you may need to build the hreffrom the different parts like this.hostand this.pathname. Those properties are supported by IE6. There are others you could use too, but you'd need to verify support.
如果您需要支持它，您可能需要href从不同的部分构建this.host和this.pathname。IE6 支持这些属性。你也可以使用其他的，但你需要验证支持。
jquery live()function deprecated in version 1.7 and removed from 1.9 so use alternate on():
jquery live()函数在 1.7 版中已弃用并从 1.9 版中删除，因此请使用备用on()：
$("a").on('click', function(){
var url = this.href; // use the property instead of attribute
//do something
});
回答by William Denniss
Not what the OP asked, but if anyone is trying to do this for <img>tags (as I was when I found this Question), the secret it notto use jQuery's attr method.
不是 OP 所要求的，但是如果有人试图对<img>标签执行此操作（就像我发现此问题时那样），那么不使用 jQuery 的 attr 方法的秘密。
This gives you straight contents of the src attribute (which if it's relative, will be relative):
这为您提供了 src 属性的直接内容（如果它是相对的，将是相对的）：
$('#your_img').attr('src')
$('#your_img').attr('src')
Whereas calling .src on the DOM object itself always gives you the absolute path (what I needed):
而在 DOM 对象本身上调用 .src 总是会给你绝对路径（我需要的）：
$('#your_img').get(0).src
$('#your_img').get(0).src
回答by Fabio Andres Pino Gutierrez
you can use jquery mobile
你可以使用 jquery mobile
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery.mobile.path.makeUrlAbsolute demo</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
#myResult{
border: 1px solid;
border-color: #108040;
padding: 10px;
}
</style>
</head>
<body>
<div role="main" class="ui-content">
<p>The absoulte URL used is http://foo.com/a/b/c/test.html</p>
<input type="button" value="file.html" id="button1" class="myButton" data-inline="true">
<input type="button" value="../../foo/file.html" id="button2" class="myButton" data-inline="true">
<input type="button" value="//foo.com/bar/file.html" id="button3" class="myButton" data-inline="true">
<input type="button" value="?a=1&b=2" id="button4" class="myButton" data-inline="true">
<input type="button" value="#bar" id="button5" class="myButton" data-inline="true">
<div id="myResult">The result will be displayed here</div>
</div>
<script>
$(document).ready(function() {
$( ".myButton" ).on( "click", function() {
var absUrl = $.mobile.path.makeUrlAbsolute( $( this ).attr( "value" ), "http://foo.com/a/b/c/test.html" );
$( "#myResult" ).html( absUrl );
})
});
</script>
</body>
</html>
Reference: https://api.jquerymobile.com/jQuery.mobile.path.makeUrlAbsolute/
参考：https: //api.jquerymobile.com/jQuery.mobile.path.makeUrlAbsolute/
