En HTML, las URL comunes se representan de muchas maneras:
URL relativa:
ejemplo.php
demostración/ejemplo.php
./ejemplo.php
../../ejemplo.php
/ejemplo.php
URL absoluta:
http://dancewithnet.com/example.php
http://dancewithnet.com:80/ejemplo.php
https://dancewithnet.com/example.php
Al mismo tiempo, hay una gran cantidad de valores de atributos de elementos en HTML que son URL. Generalmente, existen dos métodos para obtener estos valores de atributos de URL usando JavaScript:
<a href="example.php" id="example-a">La URL absoluta de la página en este momento es http://dancewithnet.com/</a>
<guión>
var oA = document.getElementById('ejemplo-a');
oA.href == 'http://dancewithnet.com/example.php';
oA.getAttribute('href') == 'ejemplo.php';
</script>
Esperamos obtener la URL absoluta completa accediendo directamente al atributo y obtener su valor de atributo original a través del método getAttribute. De hecho, este es un resultado relativamente ideal entre todos los navegadores de nivel A, solo Firefox puede obtener este resultado con éxito. Al igual que IE8, otros navegadores tienen casos más o menos especiales. Consulte los ejemplos de demostración para conocer los atributos específicos de qué elementos existen.
El problema en la mayoría de los navegadores es que ambos métodos devuelven el valor del atributo original, pero en las aplicaciones reales, lo que a menudo se necesita es su URL absoluta. La solución en " Tratar con valores HREF no calificados " es demasiado complicada. Aquí hay una solución relativamente simple. lo cual es muy simple si no consideras la diferencia en el código del navegador:
<formulario acción="ejemplo.php" id="formulario-ejemplo">
La URL absoluta de la página en este momento es http://dancewithnet.com/</form>
<guión>
var oForm = document.getElementById('formulario-ejemplo');
//IE6, IE7, Safari, Chrome, Ópera
oForm.action == 'ejemplo.php';
oA.getAttribute('acción') == 'ejemplo.php';
//Solución general para obtener URL absoluta
getQualifyURL(oForm,'action') == 'http://dancewithnet.com/example.php';
getQualifyURL = función(oEl,sAttr){
var URL = oEl[sAttr],
sobredosis,
bDo = falso;
//Si es una versión anterior a 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
intentar{
bDo = @_jscript_version < 5.8 ?verdadero: @false;
}captura(e){
bDo = falso;
}
@*/
//Si es Safari, Chrome y Opera
if(/a/.__proto__=='//' || /source/.test((/a/.toString+''))
|| /^función (/.prueba([].sort)){
bDo = verdadero;
}
si(bHacer){
oD = document.createElement('div');
/*
//El resultado de la operación DOM no cambiará
var oA = document.createElement('a');
oA.href = oEl[sAttr];
oD.appendChild(oA);
*/
oD.innerHTML = ['<a href="',sUrl,'"></a>'].join('');
dirección URL = oD.firstChild.href;
}
URL de retorno;
}
</script>
Hay algunas cosas más interesantes sobre los dos navegadores prehistóricos IE6 e IE7. Los valores de atributos obtenidos por los dos métodos en los elementos HTML A, AREA e IMG son URL absolutas. Afortunadamente , Microsoft proporciona un segundo parámetro para getAttribute. El problema se puede resolver y, al mismo tiempo, el problema de que los dos métodos mencionados anteriormente devuelven los atributos originales también se puede resolver para los elementos IFEAM y LINK:
Texto original: http://dancewithnet.com/2009/07/27/get-right-url-from-html/
<enlace href="../../ejemplo.css" id="enlace-ejemplo">
<a href="example.php" id="example-a">La URL absoluta de la página en este momento es http://dancewithnet.com/</a>
<guión>
var oA = document.getElementById('ejemplo-a'),
oLink = document.getElementById('ejemplo-a');
oA.href == 'http://dancewithnet.com/example.php';
oA.getAttribute('href') == 'http://dancewithnet.com/example.php';
oA.getAttribute('href',2) == 'ejemplo.php';
oLink.href == 'ejemplo.php';
oLink.getAttribute('href') == 'ejemplo.php';
oLink.getAttribute('href',4) == 'http://dancewithnet.com/example.php';
</script>