Dans HTML, il existe de nombreuses URL communes:
URL relative:
exemple.php
démo / exemple.php
./example.php
../../example.php
/example.php
URL absolue:
http://dancewithnet.com/example.php
http://dancewithnet.com:80/example.php
https://dancewithnet.com/example.php
En même temps, il existe un grand nombre de valeurs d'attribut d'élément dans le HTML. Généralement, il existe deux façons d'obtenir ces valeurs d'attribut URL à l'aide de JavaScript:
<a href = example.php id = example-a> Pour le moment, la page est absolument URL http://dancewithnet.com/ </a>
<cript>
var oa = document.getElementById ('Exemple-a');
oa.href == 'http://dancewithnet.com/example.php';
oa.getAttribute ('href') == 'example.php';
</cript>
Nous espérons obtenir une URL absolue complète en accédant directement aux attributs et en 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, seuls Firefox et IE8 peuvent obtenir ce résultat avec succès. D'autres navigateurs ont des circonstances plus ou moins spéciales. Pour des attributs spécifiques des éléments qui ont le type de conditions, veuillez consulter l'exemple de démonstration .
Le problème dans la plupart des navigateurs est que les deux méthodes renvoient la valeur d'attribut d'origine, tandis que 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 complexe. Voici une solution relativement simple. Ce sera très simple si vous ne considérez pas la différence entre le code du navigateur:
<form action = example.php id = exemple-formulaire>
À l'heure actuelle, la page est absolument URL http://dancewithnet.com/ </ form>
<cript>
var oform = document.getElementById ('Exemple-form');
// ie6, ie7, safari, chrome, opéra
OForm.Action == 'Exemple.php';
oa.getAttribute ('Action') == 'example.php';
// Solution générique pour obtenir une URL absolue
getQualifyUrl (OForm, 'Action') == 'http://dancewithnet.com/example.php';
getQualifyUrl = fonction (oel, sattr) {
var Surl = oel [sattr],
OD,
bdo = false;
// Est-ce une version avant 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;
} catch (e) {
bdo = false;
}
@ * /
// s'il s'agit de safari, de chrome et d'opéra
if (/ a /.__ proto __ == '//' || /source/.test( (/a/.tostring+ ''))
|| / ^ function / (/. test ([]. Sort)) {
BDO = true;
}
if (bdo) {
od = document.CreateElement ('div');
/ *
// Les résultats obtenus par l'opération DOM ne changeront pas
var oa = document.CreateElement ('a');
oa.href = oel [sattr];
OD.APPENDCHILD (OA);
* /
od.innerhtml = ['<a href =', Surl, '> </a>'] .join ('');
Surl = od.firstchild.href;
}
retour surl;
}
</cript>
Il y a des choses plus intéressantes dans les deux navigateurs préhistoriques, IE6 et IE7. Les valeurs d'attribut obtenues par les deux méthodes dans les éléments HTML A, la zone et l'IMG sont des URL absolues. Heureusement, Microsoft fournit un deuxième paramètre pour GetAttribute pour résoudre ce problème, et peut également résoudre le problème de renvoi des attributs d'origine pour les éléments IFEAM et Link:
<link href = .. / .. / example.css id = example-link>
<a href = example.php id = example-a> Pour le moment, la page est absolument URL http://dancewithnet.com/ </a>
<cript>
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) == 'example.php';
olink.href == 'example.php';
olink.getAttribute ('href') == 'example.php';
olink.getAttribute ('href', 4) == 'http://dancewithnet.com/example.php';
</cript>