Get an Absolute URL with JavaScript

Discussion

1. Arne

   You can actually even remove the condition, changing the code to

   var getAbsoluteUrl = (function() {
   	var a = document.createElement('a');
   
   	return function(url) {
   		a.href = url;
   
   		return a.href;
   	};
   })();
   
• David Walsh

  True but you’re creating the element even if getAbsoluteUrl is never called.
• Anees Iqbal

  How about

  var getAbsoluteUrl = (function() {
  	var a = null;
  	return function(url) {
  		a = a || document.createElement('a');
  		a.href = url;
  
  		return a.href;
  	};
  })();
  
• Adam

  David,

  As you pointed out you create the object whether or not its called, so why not do it this way then:

  var getAbsoluteUrl = function(url) {
    var a = document.createElement('a');
    getAbsoluteUrl = function(url) {
      a.href=url;
      return a.href;
    }
    return getAbsoluteUrl(url);  
  }
  

  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.
• Sean

  I’m confused as to why the second function? Couldn’t it be removed to be:

  var getAbsoluteUrl = function(url) {
    var a = document.createElement('a');
    a.href=url;
    return a.href;
  }
  
• Adam

  Sean,

  The second function lets you create the anchor once and reuse it. This saves time and memory.
• Sean

  Thanks Adam, that makes sense :)
2. Patrick Denny

   Uhhh…
   You could also use the URL() object.
   https://developer.mozilla.org/en-US/docs/Web/API/URL
• David Walsh

  Uhhh…. “This is an experimental technology”
• Šime Vidas

  How? Could you post an example? From what I see, the URL() constructor cannot autofill the hostname part based on the current page.
• Patrick Denny

  https://developer.mozilla.org/en-US/docs/Web/API/URL/URL

  var url1 = new URL(urlString, document.location); //localized url
  var url2 = new URL(urlString, 'http://example.com/'); //other domain
  
3. Robin de Jongh

   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 :)
4. Patrick Denny

   So is flexbox, technically. And Selection, and XMLDocument and HTMLPictureElement.

   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.
5. Andy Earnshaw

   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!
• Patrick Denny

  Well, even better then. Nice to know.
• Ole Laursen

  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”.
6. Olmo Maldonado

   Yeah or…

   (function(a){
   
   String.implement('toURL', function(){
     a.href = this;
     return this;
   });
   
   })(document.createElement('a'));
   
• MaxArt

  You should warn that you’re using MooTools, @Olmo.
• Olmo Maldonado

  I was being playful with David :P, but if you’d like:

  (function(a){
  
    String.prototype.toURL = function(){
      a.href = this;
      return this;
    };
  
  })(document.createElement('a'));
  
• gotofritz

  Extending the prototype… a big no-no
• gotofritz

  MooTools? In 2015??? Well I never…
• alberto.c

  Why is bad idea to extend the prototype?
7. Cathy Mayhue

   This is super easy! worth trying.
8. Eliazer Braun

   Cant this work?

   location.protocol + "/root/path"
• gotofritz

  No. You are missing out the host and port.
• Shubham Kumar

  Will this Work?

  var newURL = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname;
  

  Or the Simplest way:

  var newURL = window.location.href;
  

  Source: http://mycodingtricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/
9. Dale

   None of these suggestions worked. I’m still getting the error 404 – file not found when referencing localhost:4200.