Comment puis-je utiliser javascript pour convertir les attributs href relatifs en chemins absolus?

Question

J'ai un gabarit qui est récupéré par un fournisseur externe et qui doit inclure des chemins absolus dans la navigation afin que le contenu hébergé de manière externe soit correctement redirigé vers notre site.

En ce moment, la page/modèle est piloté par une application de menu global écrit par notre personnel back développement final ... donc tous ceux qui met à jour notre site va et modifie les menus et leurs chemins ...

droit maintenant, tous les liens sont liés à des chemins relatifs vers la racine.

Par exemple

<a href="/">Home</a> 
<a href="/news/">News</a> 
<a href="/media/">Media</a> 
<a href="/other/">Other</a> 

je besoin d'un moyen simple (de préférence avec jquery) préfixer "http://www.domain.com" à chacun de ces liens.

Answer 1

$('a').attr('href', 'http://www.domain.com'+$(this).attr('href')); 

Answer 2

Je ne recommande pas d'utiliser javascript pour résoudre ce problème. Cela devrait être résolu dans le modèle de page. Cependant, si vous voulez toujours une solution de jquery, alors c'est parti. En supposant que ces liens ont une classe spécifique qui les distinguent des liens internes:

$('a.external').each(function() { 
    $(this).attr('href', domain_name + $(this).attr('href')); 
}) 

Answer 3

S'il vous plaît noter que l'objet jQuery $ ("a") attr ("href") ne correspond pas à $ ("a. ") .get (0) .href?

$("a").each(function() { 
    alert(this.href); 
    $(this).attr("href") = this.href; 
}); 

En vous cas, cela ne peut vous aider, parce que vous voulez balisage statique, javascript générer du contenu dynamique. Mais il semble que vous souhaitiez un balisage statique dans ce cas, il doit être émis par le serveur.

Answer 4

vous n'avez pas besoin jquery pour une telle fonction simple ....

var elements = document.getElementsByTagName("a"); 
var eachLink; 
for (eachLink in elements) { 
var relativeLink = eachLink.href; 
var absoluetLink = ["http://",domainName,"relativeLink"]; 
eachLink.href = absoluteLink.join(""); 
} 

quelque chose comme ça devrait fonctionner, et il fonctionne beaucoup plus rapide et vous ne serez pas besoin de charger la totalité de la bibliothèque jquery juste pour exécuter 6 lignes de code: P

Answer 5

J'ai remarqué que toutes les solutions ici fonctionnent uniquement avec les attributs href qui commencent par un caractère "/". Si vous voulez quelque chose de plus robuste, vous pouvez essayer la bibliothèque js-uri. Il a l'air cool mais je ne l'ai pas essayé moi-même, donc je ne sais pas à quel point c'est buggé.

Answer 6

Il est très simple:

$('a').each(function(){$(this).attr('href',this.href);}); 

Lorsque vous lisez la propriété d'un href HTMLAnchorElement, vous obtenez le chemin absolu, vous pouvez le remplacer avec la méthode attr() de JQuery.