URL-Darstellung in HTML-Webseiten

URL-Darstellung in HTML-Webseiten
In HTML werden gängige URLs auf verschiedene Arten dargestellt:
Relative URLs:

Code kopieren
Der Code lautet wie folgt:

beispiel.php
demo/beispiel.php
./beispiel.php
../../beispiel.php
/beispiel.php

Absolute URL:

Code kopieren
Der Code lautet wie folgt:

http://jb51.net/example.php
http://jb51.net:80/beispiel.php
https://jb51.net/example.php

Gleichzeitig gibt es in HTML eine große Anzahl von Elementattributwerten. Im Allgemeinen gibt es zwei Möglichkeiten, diese URL-Attributwerte mit JavaScript abzurufen:

Code kopieren
Der Code lautet wie folgt:

<a href="example.php" id="example-a">Zurzeit lautet die absolute URL der Seite http://jb51.net/</a>
<Skript>
var oA = document.getElementById('beispiel-a');
oA.href == 'http://jb51.net/example.php';
oA.getAttribute('href') == 'beispiel.php';
</Skript>

Wir hoffen, die vollständige absolute URL durch direkten Zugriff auf das Attribut zu erhalten und den ursprünglichen Attributwert über die Methode getAttribute abzurufen. Tatsächlich ist dies ein relativ ideales Ergebnis. Unter allen A-Level-Browsern können nur Firefox und IE8 dieses Ergebnis erfolgreich erzielen. Bei anderen Browsern gibt es mehr oder weniger Sonderfälle. Bitte sehen Sie sich die Demonstrationsbeispiele an, um die spezifischen Bedingungen zu erfahren, unter denen Elementattribute vorhanden sind.
Das Problem bei den meisten Browsern ist, dass beide Methoden den ursprünglichen Attributwert zurückgeben, während tatsächliche Anwendungen oft dessen absolute URL benötigen. Die Lösung in „Umgang mit nicht qualifizierten HREF-Werten“ ist zu kompliziert. Hier ist eine relativ einfache Lösung. Wenn Sie den Unterschied zwischen den Browsern nicht berücksichtigen, ist der Code sehr einfach:
<form action="beispiel.php" id="beispiel-formular">
Derzeit lautet die absolute URL der Seite http://jb51.net/</form>

Code kopieren
Der Code lautet wie folgt:

<Skript>
var oForm = document.getElementById('Beispielformular');
//IE6, IE7, Safari, Chrome, Opera
oForm.action == 'beispiel.php';
oA.getAttribute('Aktion') == 'beispiel.php';
//Allgemeine Lösung zum Abrufen einer absoluten URL
getQualifyURL(oForm,'Aktion') == 'http://jb51.net/example.php';
getQualifyURL = Funktion(oEl,sAttr){
var sUrl = oEl[sAttr],
oD,
bDo = falsch;
//Ist es eine Version vor 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_ein
versuchen{
bDo = @_jscript_version < 5.8 ?true : @false;
}fangen(e){
bDo = falsch;
}
@*/
//Wenn es Safari, Chrome und Opera ist
wenn(/a/.__proto__=='//' || /source/.test((/a/.toString+''))
|| /^Funktion \(/.test([].sort)){
bDo = wahr;
}
wenn(bDo){
oD = document.createElement('div');
/*
//Das Ergebnis der DOM-Operation wird sich nicht ändern
var oA = document.createElement('a');
oA.href = oEl[sAttr];
oD.appendChild(oA);
*/
oD.innerHTML = ['<a href="',sUrl,'"></a>'].join('');
sUrl = oD.erstesKind.href;
}
sUrl zurückgeben;
}
</Skript>

Es gibt noch einige weitere interessante Dinge über diese beiden Urzeitbrowser, IE6 und IE7. Die von beiden Methoden in den HTML-Elementen A, AREA und IMG erhaltenen Attributwerte sind alle absolute URLs. Glücklicherweise bietet Microsoft einen zweiten Parameter für getAttribute, um dieses Problem zu lösen. Gleichzeitig kann damit auch das Problem gelöst werden, dass beide oben genannten Methoden die ursprünglichen Attribute für IFEAM- und LINK-Elemente zurückgeben:

Code kopieren
Der Code lautet wie folgt:

<link href="../../beispiel.css" id="beispiel-link">
<a href="example.php" id="example-a">Zurzeit lautet die absolute URL der Seite http://jb51.net/</a>
<Skript>
var oA = document.getElementById('beispiel-a'),
oLink = document.getElementById('beispiel-a');
oA.href == 'http://jb51.net/example.php';
oA.getAttribute('href') == 'http://jb51.net/example.php';
oA.getAttribute('href',2) == 'beispiel.php';
oLink.href == 'beispiel.php';
oLink.getAttribute('href') == 'beispiel.php';
oLink.getAttribute('href',4) == 'http://jb51.net/example.php';
</Skript>

<<:  Tiefes Verständnis von Zeilenhöhe und vertikaler Ausrichtung

>>:  Einige weniger bekannte Sortiermethoden in MySQL

Artikel empfehlen

Wie lang ist eine Funktion in js?

Inhaltsverzeichnis Vorwort Warum Wie viel kostet ...

Bedingte Kommentare im Internet Explorer für XHTML

<br />Bedingte Kommentare sind eine einzigar...

So ändern Sie das Root-Passwort in MySQL 5.7

Ab MySQL 5.7 wurden viele Sicherheitsupdates hinz...

Was ist Nginx-Lastausgleich und wie wird er konfiguriert?

Was ist Lastenausgleich? Der Lastausgleich wird h...

Mehrere Lösungen für domänenübergreifende Gründe in der Webentwicklung

Inhaltsverzeichnis Domänenübergreifende Gründe JS...

JavaScript ist unzuverlässig undefiniert

undefined Wenn wir in JavaScript feststellen möch...

XHTML-Einführungstutorial: Verwendung von Listen-Tags

Listen werden verwendet, um eine Reihe ähnlicher o...

5 Punkte, auf die Sie beim Erstellen einer Webseite achten sollten

1. Farbabstimmungsproblem <br />Eine Webseit...

Professionelles und nicht-professionelles Webdesign

Zunächst einmal hängt die Gestaltung des Webseiten...

MySQL-Optimierungslösung: Aktivieren Sie das Protokoll für langsame Abfragen

Inhaltsverzeichnis Vorwort Einrichten der Protoko...

Detaillierte Erklärung der neuen Funktionen von ES9: Asynchrone Iteration

Inhaltsverzeichnis Asynchrones Durchlaufen Asynch...

Lösung für das Problem, dass Centos8 Docker nicht installieren kann

Problem [root@zh ~]# [root@zh ~]# [root@zh ~]# yu...

JS realisiert Bild Digitaluhr

In diesem Artikelbeispiel wird der spezifische JS...

Beispiel für das Erstellen eines virtuellen Hosts basierend auf dem Apache-Port

Apache: Virtuellen Host basierend auf Port erstel...