In HTML werden gängige URLs auf viele Arten dargestellt:
Relative URL:
example.php
demo/example.php
./example.php
../../example.php
/example.php
Absolute URL:
http://dancewithnet.com/example.php
http://dancewithnet.com:80/example.php
https://dancewithnet.com/example.php
Gleichzeitig gibt es in HTML eine große Anzahl von Elementattributwerten, bei denen es sich um URLs handelt. Im Allgemeinen gibt es zwei Methoden, um diese URL-Attributwerte mithilfe von JavaScript abzurufen:
<a href="example.php" id="example-a">Die absolute URL der Seite lautet derzeit http://dancewithnet.com/</a>
<Skript>
var oA = document.getElementById('example-a');
oA.href == 'http://dancewithnet.com/example.php';
oA.getAttribute('href') == 'example.php';
</script>
Wir hoffen, durch direkten Zugriff auf das Attribut die vollständige absolute URL zu erhalten und den ursprünglichen Attributwert über die getAttribute-Methode zu erhalten. Tatsächlich ist dies ein relativ ideales Ergebnis. Unter allen A-Level-Browsern kann nur Firefox dieses Ergebnis erfolgreich erzielen. Wie IE8 gibt es auch bei anderen Browsern mehr oder weniger Sonderfälle. Die spezifischen Attribute der vorhandenen Elemente finden Sie in den Demonstrationsbeispielen .
Das Problem bei den meisten Browsern besteht darin, dass beide Methoden den ursprünglichen Attributwert zurückgeben. In tatsächlichen Anwendungen wird jedoch häufig die absolute URL benötigt. Die Lösung in „ Umgang mit unqualifizierten HREF-Werten “ ist eine relativ einfache Lösung. was sehr einfach ist, wenn man den Unterschied im Browsercode nicht berücksichtigt:
<form action="example.php" id="example-form">
Die absolute URL der Seite lautet derzeit http://dancewithnet.com/</form>
<Skript>
var oForm = document.getElementById('example-form');
//IE6, IE7, Safari, Chrome, Opera
oForm.action == 'example.php';
oA.getAttribute('action') == 'example.php';
//Allgemeine Lösung zum Abrufen der absoluten URL
getQualifyURL(oForm,'action') == 'http://dancewithnet.com/example.php';
getQualifyURL = function(oEl,sAttr){
var sUrl = oEl[sAttr],
oD,
bDo = falsch;
//Ob es sich um eine Version vor IE8 handelt
//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
versuchen{
bDo = @_jscript_version < 5.8 ?true : @false;
}catch(e){
bDo = falsch;
}
@*/
//Wenn es Safari, Chrome und Opera ist
if(/a/.__proto__=='//' || /source/.test((/a/.toString+''))
||. /^function (/.test([].sort)){
bDo = wahr;
}
if(bDo){
oD = document.createElement('div');
/*
//Das Ergebnis der DOM-Operation ändert sich nicht
var oA = document.createElement('a');
oA.href = oEl[sAttr];
oD.appendChild(oA);
*/
oD.innerHTML = ['<a href="',sUrl,'"></a>'].join('');
sUrl = oD.firstChild.href;
}
return sUrl;
}
</script>
Es gibt noch einige weitere interessante Dinge zu den beiden prähistorischen Browsern IE6 und IE7. Die von den beiden Methoden in den HTML-Elementen A, AREA und IMG erhaltenen Attributwerte sind glücklicherweise ein zweiter Parameter für getAttribute Das Problem kann gelöst werden, und gleichzeitig kann das Problem, dass die beiden oben genannten Methoden die ursprünglichen Attribute zurückgeben, auch für IFEAM- und LINK-Elemente gelöst werden:
Originaltext: 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">Die absolute URL der Seite lautet derzeit http://dancewithnet.com/</a>
<Skript>
var oA = document.getElementById('example-a'),
oLink = document.getElementById('example-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';
</script>