Obtenha o valor correto do atributo URL em HTML

Em HTML, URLs comuns são representados de várias maneiras:

URL relativo:

exemplo.php
demo/exemplo.php
./exemplo.php
../../exemplo.php
/exemplo.php

URL absoluto:

http://dancewithnet.com/example.php
http://dancewithnet.com:80/example.php
https://dancewithnet.com/example.php

Ao mesmo tempo, há um grande número de valores de atributos de elementos em HTML que são URLs. Geralmente, existem dois métodos para obter esses valores de atributos de URL usando JavaScript:

<a href="example.php" id="example-a">O URL absoluto da página neste momento é http://dancewithnet.com/</a>
<roteiro>
var oA = document.getElementById('exemplo-a');
oA.href == 'http://dancewithnet.com/example.php';
oA.getAttribute('href') == 'exemplo.php';
</script>

Esperamos obter o URL absoluto completo acessando diretamente o atributo e obter o valor original do atributo por meio do método getAttribute. Na verdade, este é um resultado relativamente ideal. Entre todos os navegadores de nível A, apenas o Firefox pode obter esse resultado com sucesso. Como o IE8, outros navegadores têm casos mais ou menos especiais. Consulte os exemplos de demonstração para atributos específicos de quais elementos existem.

O problema na maioria dos navegadores é que ambos os métodos retornam o valor do atributo original, mas em aplicativos reais, o que geralmente é necessário é seu URL absoluto. A solução em " Lidando com valores HREF não qualificados " é muito complicada. o que é muito simples se você não considerar a diferença no código do navegador:

<form action="example.php" id="example-form">
O URL absoluto da página neste momento é http://dancewithnet.com/</form>
<roteiro>
var oForm = document.getElementById('exemplo-formulário');

//IE6, IE7, Safari, Chrome, Ópera
oForm.action == 'exemplo.php';
oA.getAttribute('action') == 'exemplo.php';

//Solução geral para obter URL absoluto
getQualifyURL(oForm,'action') == 'http://dancewithnet.com/example.php';

getQualifyURL = function(oEl,sAttr){
var sUrl = oEl[sAttr],
oD,
bDo = falso;
//Se é uma versão anterior ao 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
tentar{
bDo = @_jscript_version <5.8 ?true : @false;
}pegar(e){
bDo = falso;
}
@*/
//Se for Safari, Chrome e Opera
if(/a/.__proto__=='//' || /source/.test((/a/.toString+''))
|| /^função (/.test([].sort)){
bDo = verdadeiro;
}
if(bDo){
oD = document.createElement('div');
/*
//O resultado da operação DOM não será alterado
var oA = document.createElement('a');
oA.href = oEl[sAttr];
oD.appendChild(oA);
*/
oD.innerHTML = ['<a href="',sUrl,'"></a>'].join('');
sUrl = oD.firstChild.href;
}
retornar URL;
}
</script>

Há algumas coisas mais interessantes sobre os dois navegadores pré - históricos IE6 e IE7. Os valores dos atributos obtidos pelos dois métodos nos elementos HTML A, AREA e IMG são todos URLs absolutos. O problema pode ser resolvido e, ao mesmo tempo, o problema de que os dois métodos mencionados acima retornam os atributos originais também pode ser resolvido para os elementos IFEAM e LINK:

Texto 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">O URL absoluto da página neste momento é http://dancewithnet.com/</a>

<roteiro>
var oA = document.getElementById('exemplo-a'),
oLink = document.getElementById('exemplo-a');

oA.href == 'http://dancewithnet.com/example.php';
oA.getAttribute('href') == 'http://dancewithnet.com/example.php';
oA.getAttribute('href',2) == 'exemplo.php';

oLink.href == 'exemplo.php';
oLink.getAttribute('href') == 'exemplo.php';
oLink.getAttribute('href',4) == 'http://dancewithnet.com/example.php';
</script>