URL-Darstellung in HTML-Webseiten_HTML/Xhtml_Webseitenproduktion

In HTML werden gängige URLs auf viele Arten ausgedrückt:
Relative URL:

Code kopieren

Der Code ist wie folgt folgt:

example.php
demo/example.php
./example.php
../../example.php
/example.php

Absolute URL:

Kopieren Sie den Code

Der Code lautet wie folgt:

http://jb51.net/example.php
http://jb51.net:80/example.php
https://jb51.net/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:

Code kopieren

Der Code lautet wie folgt:

Die absolute URL der Seite ist derzeit http://jb51.net/
<script> <br>var oA = document.getElementById( 'example-a'); <br>oA.href == 'http://jb51.net/example.php' ; <br>oA.getAttribute('href') == 'example.php'; ></script>

Wir hoffen, durch direkten Zugriff auf das Attribut den ursprünglichen Attributwert zu erhalten Alle A-Level-Browser können dieses Ergebnis erfolgreich erzielen. Andere Browser haben mehr oder weniger spezielle Umstände. Die spezifischen Attribute der vorhandenen Elemente finden Sie im Demonstrationsbeispiel.
Das Problem in 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 zu kompliziert. Hier ist eine relativ einfache Lösung, die sehr einfach ist, wenn Sie den Unterschied im Browsercode nicht berücksichtigen:

Die Seite ist http://jb51.net/

Kopieren Sie den Code Der Code ist wie folgt folgt:

<script>var oForm = document.getElementById('example-form'); .action == 'example.php'; <div class="msgborder" id="phpcode42">oA.getAttribute('action') == 'example.php'; ) == 'http://jb51.net/example.php'; <br>getQualifyURL = function(oEl,sAttr){ <br>var sUrl = oEl[sAttr], <br>oD, <br>bDo = false ; <br>//Ist es eine Version vor IE8<br>//http://www.thespanner.co.uk/2009/01/29/detecting-browsers-javascript-hacks/ <br>//http :/ /msdn.microsoft.com/en-us/library/7kx09ct1(VS.80).aspx <br>/*@cc_on <br>try{ <br>bDo = @_jscript_version < 5.8 ?true : @false ; <br />}catch(e){ <br />bDo = false; <br />@*/ <br />//Wenn es Safari, Chrome und Opera ist <br />if(/a/.__proto__ ==' //' ||. /source/.test((/a/.toString '')) <br />|| /^function (/.test([].sort)){ <br />bDo = true ; <br />} <br />if(bDo){ <br />oD = document.createElement('div'); <br />/* <br />//Das Ergebnis der DOM-Operation ändert sich nicht <br />var oA = document.createElement('a'); <br />oD.appendChild(oA); <br />oD.innerHTML = ['<a href="' ,sUrl,'"></a>'].join(''); <br>sUrl = oD.firstChild.href; <br>&lt ;/script> <br><br><br>Es gibt noch einige weitere interessante Dinge über die beiden prähistorischen Browser IE6 und IE7. Die Attributwerte, die von den beiden Methoden in den HTML-Elementen A, AREA und erhalten werden IMG sind absolute URLs. Glücklicherweise stellt Microsoft einen zweiten Parameter für getAttribute zur Verfügung, um dieses Problem zu lösen. Er kann auch das Problem der IFEAM- und LINK-Elemente lösen, die das ursprüngliche Attribut zurückgeben: <br><br><br> <br><br><br>Code kopieren<br><br><br>Der Code lautet wie folgt:<br><div class="msgborder" id="phpcode43"> <br><link href="../../example.css" id="example-link"> <br><a href="example.php" id="example-a">此时页面绝对URL是http://jb51.net/</a> <br><script> <br>var oA = document.getElementById('exemple-a'), <br>oLink = document.getElementById('exemple-a'); <br>oA.href == 'http://jb51.net/example.php'; <br>oA.getAttribute('href') == 'http://jb51.net/example.php'; <br>oA.getAttribute('href',2) == 'exemple.php'; <br>oLink.href == 'exemple.php'; <br>oLink.getAttribute('href') == 'exemple.php'; <br>oLink.getAttribute('href',4) == 'http://jb51.net/example.php'; <br></script>