使用JavaScript将相对路径转换为绝对路径
[英]Converting relative paths to absolute with JavaScript
问题描述
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? 如何通过jQuery将相对路径（ var url ）转换为绝对路径？
Script should do nothing, if it is already an absolute path. 如果脚本已经是绝对路径，脚本应该什么都不做。
Thanks. 谢谢。
3 个解决方案
解决方案1
24 已采纳 2011-03-06 14:33:19
I'm pretty sure that if you use the href property instead of getting the attribute , you'll have a full url with domain: 我很确定如果你使用href 属性而不是获取属性 ，你将拥有一个带域的完整URL：
$("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 href from the different parts like this.host and this.pathname . 如果需要支持它，可能需要从this.host和this.pathname等不同部分构建href 。 Those properties are supported by IE6. IE6支持这些属性。 There are others you could use too, but you'd need to verify support. 您可以使用其他一些，但您需要验证支持。
jquery live() function deprecated in version 1.7 and removed from 1.9 so use alternate on() : jquery live（）函数在1.7版本中已弃用，并从1.9中删除，因此使用alternate on（） ：
$("a").on('click', function(){
var url = this.href; // use the property instead of attribute
//do something
});
解决方案2
14 2011-08-28 05:46:12
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 not to 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')
Whereas calling .src on the DOM object itself always gives you the absolute path (what I needed): 而在DOM对象上调用.src本身总是给你绝对路径（我需要的）：
$('#your_img').get(0).src
解决方案3
0 2015-11-04 16:28:35
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/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.