En HTML, les URL courantes sont représentées de plusieurs manières :
URL relative :
exemple.php
démo/exemple.php
./exemple.php
../../exemple.php
/exemple.php
URL absolue :
http://dancewithnet.com/example.php
http://dancewithnet.com:80/example.php
https://dancewithnet.com/example.php
Dans le même temps, il existe un grand nombre de valeurs d'attributs d'élémentsen HTML qui sont des URL. Généralement, il existe deux méthodes pour obtenir ces valeurs d'attributs d'URL à l'aide de JavaScript :
<a href="example.php" id="example-a">L'URL absolue de la page à l'heure actuelle est http://dancewithnet.com/</a>
<script>
var oA = document.getElementById('exemple-a');
oA.href == 'http://dancewithnet.com/example.php';
oA.getAttribute('href') == 'exemple.php';
</script>
Nous espérons obtenir l'URL absolue complète en accédant directement à l'attribut et obtenir sa valeur d'attribut d'origine via la méthode getAttribute. En fait, c'est un résultat relativement idéal parmi tous les navigateurs de niveau A, seul Firefox peut obtenir ce résultat. Comme IE8, d'autres navigateurs ont des cas plus ou moins particuliers. Veuillez consulter les exemples de démonstration pour connaître les attributs spécifiques des éléments existants.
Le problème dans la plupart des navigateurs est que les deux méthodes renvoient la valeur d'attribut d'origine, mais dans les applications réelles, ce qui est souvent nécessaire est son URL absolue. La solution dans " Gérer les valeurs HREF non qualifiées " est trop compliquée. ce qui est très simple si l'on ne considère pas la différence dans le code du navigateur :
<form action="exemple.php" id="exemple-form">
L'URL absolue de la page à l'heure actuelle est http://dancewithnet.com/</form>
<script>
var oForm = document.getElementById('exemple-formulaire');
//IE6, IE7, Safari, Chrome, Opéra
oForm.action == 'exemple.php';
oA.getAttribute('action') == 'exemple.php';
//Solution générale pour obtenir une URL absolue
getQualifyURL(oForm,'action') == 'http://dancewithnet.com/example.php';
getQualifyURL = fonction(oEl,sAttr){
var sUrl = oEl[sAttr],
OD,
bDo = faux ;
//Qu'il s'agisse d'une version antérieure à IE8
//http://www.thespanner.co.uk/2009/01/29/detecting-browsers-javascript-hacks/
//http://msdn.microsoft.com/en-us/library/7kx09ct1%28VS.80%29.aspx
/*@cc_on
essayer{
bDo = @_jscript_version < 5.8 ?true : @false;
}attraper(e){
bDo = faux ;
}
@*/
//S'il s'agit de Safari, Chrome et Opera
if(/a/.__proto__=='//' || /source/.test((/a/.toString+''))
|| /^fonction (/.test([].sort)){
bDo = vrai ;
}
si(bDo){
oD = document.createElement('div');
/*
//Le résultat de l'opération DOM ne changera pas
var oA = document.createElement('a');
oA.href = oEl[sAttr];
oD.appendChild(oA);
*/
oD.innerHTML = ['<a href="',sUrl,'"></a>'].join('');
sUrl = oD.firstChild.href;
}
retourner l'URL ;
}
</script>
Il y a des choses plus intéressantes sur les deux navigateurs préhistoriques IE6 et IE7. Les valeurs d'attribut obtenues par les deux méthodes dans les éléments HTML A, AREA et IMG sont toutes des URL absolues. Heureusement , Microsoft fournit un deuxième paramètre pour getAttribute. Le problème peut être résolu, et en même temps, le problème selon lequel les deux méthodes mentionnées ci-dessus renvoient les attributs d'origine peut également être résolu pour les éléments IFEAM et LINK :
Texte original : http://dancewithnet.com/2009/07/27/get-right-url-from-html/
<link href="../../example.css" id="example-link">
<a href="example.php" id="example-a">L'URL absolue de la page à l'heure actuelle est http://dancewithnet.com/</a>
<script>
var oA = document.getElementById('exemple-a'),
oLink = document.getElementById('exemple-a');
oA.href == 'http://dancewithnet.com/example.php';
oA.getAttribute('href') == 'http://dancewithnet.com/example.php';
oA.getAttribute('href',2) == 'exemple.php';
oLink.href == 'exemple.php';
oLink.getAttribute('href') == 'exemple.php';
oLink.getAttribute('href',4) == 'http://dancewithnet.com/example.php';
</script>