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

Eine kurze Zusammenfassung von Vue Keep-Alive

1. Funktion Wird hauptsächlich verwendet, um den ...

Detaillierte Codebeispiele zu sieben Methoden zur vertikalen Zentrierung mit CSS

Wenn wir ein Layout bearbeiten, verwenden wir nor...

Detaillierte Erläuterung des Nest.js-Hashing- und Verschlüsselungsbeispiels

0x0 Einführung Zunächst einmal: Was ist ein Hash-...

Die Komponente vue-cropper realisiert das Zuschneiden und Hochladen von Bildern

In diesem Artikel wird der spezifische Code der V...

Detaillierte Erklärung des Sidecar-Modus in Docker Compose

Inhaltsverzeichnis Was ist Docker Compose Anforde...

Tutorial zur Samba-Konfiguration für die Dateifreigabe im Linux-System

Inhaltsverzeichnis Deinstallieren und installiere...

Vollständige Schritte zum Erstellen eines Passwortgenerators mit Node.js

Inhaltsverzeichnis 1. Vorbereitung 2. Befehlszeil...

Lösung für die Docker-Befehlsausnahme „Zugriff verweigert“

Installieren Sie Docker im Linux-System neu und g...

Was ist JavaScript Anti-Shake und Throttling

Inhaltsverzeichnis 1. Funktion Entprellung 1. Was...

Der Unterschied und die Verwendung von distinct und row_number() over() in SQL

1 Einleitung Wenn wir SQL-Anweisungen schreiben, ...