Get an Absolute URL with JavaScript
Dealing with URL formats can be a real nightmare. Think of how just a few characters can effect a URL's absolute endpoint:
- starting or not starting with
/
- starting with
//
- starting with
?
- starting with
#
- ...and so on
What if you want an absolute URL though? One that starts with http
or https
? You can use an A
element to get that absolute URL!
The JavaScript
I'm going to use a function that returns a function so that only one A
element is ever created:
var getAbsoluteUrl = (function() {
var a;
return function(url) {
if(!a) a = document.createElement('a');
a.href = url;
return a.href;
};
})();
No matter how you pass in the URL string, the URL will come out absolute. Of course strings like `javascript:;` wont come out any different, but real qualified URLs will come out as absolute!
Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user. One of those simple APIs the Vibration API. The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...
My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...
Providing users as many preferences as possible always puts a smile on the user's face. One of those important preferences is font size. I can see fine but the next guy may have difficulty with the font size I choose. That's why...
Mobile and desktop browser vendors do their best to help us not look like idiots by providing us autocomplete, autocorrect, and autocapitalize features. Unfortunately these features can sometimes get in the way; we don't always want or need the help they provide. Luckily most browsers allow...
You can actually even remove the condition, changing the code to
True but you’re creating the element even if
getAbsoluteUrl
is never called.How about
David,
As you pointed out you create the object whether or not its called, so why not do it this way then:
The benefit of this approach is that you don’t execute anything unless
getAbsoluteUrl
is called. Its not a huge improvement, unless you use Immediately Invoked Function Expressions a LOT within your code to create closures.I’m confused as to why the second function? Couldn’t it be removed to be:
Sean,
The second function lets you create the anchor once and reuse it. This saves time and memory.
Thanks Adam, that makes sense :)
Uhhh…
You could also use the
URL()
object.https://developer.mozilla.org/en-US/docs/Web/API/URL
Uhhh…. “This is an experimental technology”
How? Could you post an example? From what I see, the
URL()
constructor cannot autofill the hostname part based on the current page.https://developer.mozilla.org/en-US/docs/Web/API/URL/URL
Hi David. Great idea for a post! To make it better don’t forget that every piece of advice needs a context — so tell the reader where to paste that code — is it in their address bar, do they need to tweet it, or do they need domain specific pre-requisite knowledge to get this to work?
I’m on a “dumb it down please” mission today :)
So is
flexbox
, technically. AndSelection
, andXMLDocument
andHTMLPictureElement
.It’s there. It’s stable and it’s cross browser (IE 10). It also lets you resolve absolute URLs with different domains than the existing page.
Patrick, you’re wrong about IE 10 support. That refers to
URL.createObjectURL()
, not the URL constructor that implements the URLUtils interface. This method works all the way back beyond IE 6, and I’ve been using it for years to parse and resolve URLs. It’s a handy little technique that avoids complex regular expressions, give credit where it’s due!Well, even better then. Nice to know.
Do you have a source for that statement? I just tested Patrick’s example in IE 6 and IE 8 and they crashed with “‘URL’ is undefined”.
Yeah or…
You should warn that you’re using MooTools, @Olmo.
I was being playful with David :P, but if you’d like:
Extending the prototype… a big no-no
MooTools? In 2015??? Well I never…
Why is bad idea to extend the prototype?
This is super easy! worth trying.
Cant this work?
No. You are missing out the host and port.
Will this Work?
Or the Simplest way:
Source: http://mycodingtricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/
None of these suggestions worked. I’m still getting the error 404 – file not found when referencing localhost:4200.