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

Verwendung des Linux-Befehls ln

1. Befehlseinführung Mit dem Befehl ln werden Lin...

Starten Sie alle gestoppten Docker-Container mit einem Befehl neu

Starten Sie alle gestoppten Docker-Container mit ...

Reagiert auf verschiedene Arten, Parameter zu übergeben

Inhaltsverzeichnis Übergeben von Parametern zwisc...

Implementierung eines Web-Rechners mit nativem JavaScript

In diesem Artikel wird der spezifische JavaScript...

Bedingte Kommentare im Internet Explorer für XHTML

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

Detaillierte Schritte zur Installation von Anaconda unter Linux (Ubuntu 18.04)

Anaconda ist die beliebteste Python-Plattform für...

Ausführliche Erläuterung der HTML-Grundlagen (Teil 1)

1. Das WEB verstehen Webseiten bestehen hauptsäch...

So stellen Sie mit Docker schnell einen Elasticsearch-Cluster bereit

In diesem Artikel werden Docker Container (orches...

Beispiel zum Erstellen eines öffentlichen Harbor-Repository mit Docker

Im vorherigen Blogbeitrag ging es um das private ...

Implementierung des klassischen CSS-Sticky-Footer-Layouts

Was ist ein Sticky-Footer-Layout? Unser übliches ...

Schritte zum Installieren einer RocketMQ-Instanz unter Linux

1. JDK installieren 1.1 Überprüfen Sie, ob die ak...