Convertir un chemin relatif en chemin absolu en utilisant JavaScript

Question

Il y a une fonction, qui me donne des urls comme :

./some.css
./extra/some.css
../../lib/slider/slider.css

C'est toujours un chemin relatif.

Imaginons que nous connaissions le chemin d'accès actuel de la page, par exemple http://site.com/stats/2012/ Je ne sais pas comment convertir ces chemins relatifs en chemins réels.

Nous devrions obtenir quelque chose comme :

./some.css => http://site.com/stats/2012/some.css
./extra/some.css => http://site.com/stats/2012/extra/some.css
../../lib/slider/slider.css => http://site.com/lib/slider/slider.css

Pas de jQuery, uniquement du javascript classique.

Answer 1

Cela fonctionnera, mais seulement si vous ouvrez une page avec son nom de fichier. Cela ne fonctionnera pas si vous ouvrez un lien comme celui-ci. stackoverflow.com/page . il fonctionnera 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;
}

Answer 2

J'ai trouvé une solution très simple pour faire cela tout en supportant IE 10 (IE ne supporte pas l'URL-API) en utilisant la fonction Histoire API (IE 10 ou plus). Cette solution fonctionne sans aucune manipulation de chaîne de caractères.

function resolveUrl(relativePath) {
    var originalUrl = document.location.href;
    history.replaceState(history.state, '', relativePath);
    var resolvedUrl = document.location.href;
    history.replaceState(history.state, '', originalUrl);
    return resolvedUrl;
}

history.replaceState() ne déclenchera pas la navigation du navigateur, mais modifiera tout de même document.location et prend en charge les chemins relatifs et absolus.

Le seul inconvénient de cette solution est que si vous utilisez déjà l'API historique et que vous avez défini un état personnalisé avec un titre, le titre de l'état actuel est perdu.