Converting relative paths to absolute with JavaScript

Question

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:

$("a").live('click', function(){
    var url = $(this).attr("href");
    //do something
});

How to convert relative path (var url) to absolute by jQuery?

Script should do nothing, if it is already an absolute path.

Thanks.

Duplicate of [Getting an absolute URL from a relative one. (IE6 issue)](http://stackoverflow.com/questions/470832/getting-an-absolute-url-from-a-relative-one-ie6-issue) — Phrogz, Mar 06 '11 at 14:34

score 25 · Accepted Answer · edited Apr 09 '14 at 06:17

25

I'm pretty sure that if you use the href property instead of getting the attribute, you'll have a full url with domain:

$("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.

If you need to support it, you may need to build the href from the different parts like this.host and this.pathname. Those properties are supported by 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():

$("a").on('click', function(){
    var url = this.href;    // use the property instead of attribute
    //do something
});

edited Apr 09 '14 at 06:17

Zaheer Ahmed

28,160
11
74
110

answered Mar 06 '11 at 14:33

user113716

318,772
63
451
440

1

@Happy: In an event handler, `this` is a direct reference to the DOM element that received the event. When you do `$(this)`, you're taking that DOM element, and wrapping it in a jQuery object so you can use jQuery methods on it. – user113716 Mar 06 '11 at 14:37
@Happy: You're welcome. Note that the question @Phrogz linked to shows an IE6 issue. I updated my answer. Also if you were hoping to avoid `hash` and other such data, you may want to use some of those other properties. – user113716 Mar 06 '11 at 14:43

score 14 · Answer 2 · answered Aug 28 '11 at 05:46

14

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.

This gives you straight contents of the src attribute (which if it's relative, will be relative):

$('#your_img').attr('src')

Whereas calling .src on the DOM object itself always gives you the absolute path (what I needed):

$('#your_img').get(0).src

answered Aug 28 '11 at 05:46

William Denniss

16,089
7
81
124

1

($('#your_img')[0]).src <--Just another way to look at what you wrote (Because I didn't fully catch it at first) – JxAxMxIxN Nov 08 '13 at 00:40

Fabio Andres Pino Gutierrez · Answer 3 · 2015-11-04T16:55:36.997

you can use 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/

score 0 · Answer 4 · answered Nov 30 '22 at 21:06

0

The modern way is:

const url = new URL('MyPage.aspx', location)

Which will turn the page into an absolute url object. Works even with '/MyPage.aspx' or '../MyPage.aspx' or '../SiblingFolder/MyPage.aspx'

answered Nov 30 '22 at 21:06

Brobic Vripiat

176
2
12

Converting relative paths to absolute with JavaScript

4 Answers4