Convertir chemin d'accès relatif à l'absolu, à l'aide de JavaScript

Cela devrait le faire:

function absolute(base, relative) {
    var stack = base.split("/"),
        parts = relative.split("/");
    stack.pop(); //remove current file name (or empty string)
                 //(omit if "base" is the current folder without trailing slash)
    for (var i=0; i<parts.length; i++) {
        if (parts[i] == ".")
            continue;
        if (parts[i] == "..")
            stack.pop();
        else
            stack.push(parts[i]);
    }
    return stack.join("/");
}

Le plus simple, efficace et de façon correcte de le faire, de sorte qu'il suffit d'utiliser URL api.

new URL("http://www.stackoverflow.com?q=hello").href;
//=> http://www.stackoverflow.com/?q=hello"

new URL("mypath","http://www.stackoverflow.com").href;
//=> "http://www.stackoverflow.com/mypath"

new URL("../mypath","http://www.stackoverflow.com/search").href
//=> "http://www.stackoverflow.com/mypath"

new URL("../mypath", window.location.href).href
//=> "https://stackoverflow.com/questions/mypath"

Performance sage, cette solution est sur le pair avec l'aide de la manipulation de chaîne et deux fois plus rapide que la création de a tag.

Si vous voulez faire un par rapport à l'absolu de conversion pour obtenir un lien à partir d'une page web personnalisée dans votre navigateur (pas pour la page qui exécute votre script), vous pouvez utiliser une version améliorée de la fonction suggéré par @Bergi:

var resolveURL=function resolve(url, base){
if('string'!==typeof url || !url){
return null; //wrong or empty url
}
else if(url.match(/^[a-z]+\:\/\//i)){ 
return url; //url is absolute already 
}
else if(url.match(/^\/\//)){ 
return 'http:'+url; //url is absolute already 
}
else if(url.match(/^[a-z]+\:/i)){ 
return url; //data URI, mailto:, tel:, etc.
}
else if('string'!==typeof base){
var a=document.createElement('a'); 
a.href=url; //try to resolve url without base  
if(!a.pathname){ 
return null; //url not valid 
}
return 'http://'+url;
}
else{ 
base=resolve(base); //check base
if(base===null){
return null; //wrong base
}
}
var a=document.createElement('a'); 
a.href=base;
if(url[0]==='/'){ 
base=[]; //rooted path
}
else{ 
base=a.pathname.split('/'); //relative path
base.pop(); 
}
url=url.split('/');
for(var i=0; i<url.length; ++i){
if(url[i]==='.'){ //current directory
continue;
}
if(url[i]==='..'){ //parent directory
if('undefined'===typeof base.pop() || base.length===0){ 
return null; //wrong url accessing non-existing parent directories
}
}
else{ //child directory
base.push(url[i]); 
}
}
return a.protocol+'//'+a.hostname+base.join('/');
}

Il va revenir null si quelque chose est faux.

Utilisation:

resolveURL('./some.css', 'http://example.com/stats/2012/'); 
//returns http://example.com/stats/2012/some.css
resolveURL('extra/some.css', 'http://example.com/stats/2012/');
//returns http://example.com/stats/2012/extra/some.css
resolveURL('../../lib/slider/slider.css', 'http://example.com/stats/2012/');
//returns http://example.com/lib/slider/slider.css
resolveURL('/rootFolder/some.css', 'https://example.com/stats/2012/');
//returns https://example.com/rootFolder/some.css
resolveURL('localhost');
//returns http://localhost
resolveURL('../non_existing_file', 'example.com')
//returns null

Href solution ne fonctionne qu'une fois que le document est chargé (au moins dans IE11). Cela a fonctionné pour moi:

link = link || document.createElement("a");
link.href = window.location.href + "/../" + href;
return link.href;

J'ai dû ajouter un correctif à la solution retenue, car nous pouvons avoir des barres obliques après # dans notre angularjs navigation.

function getAbsoluteUrl(base, relative) {
//remove everything after #
var hashPosition = base.indexOf('#');
if (hashPosition > 0){
base = base.slice(0, hashPosition);
}
//the rest of the function is taken from http://stackoverflow.com/a/14780463
//http://stackoverflow.com/a/25833886 - this doesn't work in cordova
//http://stackoverflow.com/a/14781678 - this doesn't work in cordova
var stack = base.split("/"),
parts = relative.split("/");
stack.pop(); //remove current file name (or empty string)
//(omit if "base" is the current folder without trailing slash)
for (var i=0; i<parts.length; i++) {
if (parts[i] == ".")
continue;
if (parts[i] == "..")
stack.pop();
else
stack.push(parts[i]);
}
return stack.join("/");
}

Cela fonctionne. mais uniquement lorsque vous ouvrez une page avec ce nom de fichier. il ne fonctionne pas bien lorsque vous ouvrez un lien comme ceci stackoverflow.com/page. il travaillera avec stackoverflow.com/page/index.php

function reltoabs(link){
let absLink = location.href.split("/");
let relLink = link;
let slashesNum = link.match(/[.]{2}\//g) ? link.match(/[.]{2}\//g).length : 0;
for(let i = 0; i < slashesNum + 1; i++){
relLink = relLink.replace("../", "");
absLink.pop();
}
absLink = absLink.join("/");
absLink += "/" + relLink;
return absLink;
}