Analyse und Lösung des a.getAttribute(href,2)-Problems in IE6/7

Analyse und Lösung des a.getAttribute(href,2)-Problems in IE6/7

Kurzbeschreibung <br />In IE6 und 7 wird in einem allgemeinen a-Tag (einem in HTML geschriebenen und über DOM-Operationen in die Seite eingefügten a-Tag) der ursprüngliche Wert von href nicht direkt über a.getAttribute("href") abgerufen, wenn der Wert von href ein relativer Pfad ist. Der ursprüngliche Wert kann jedoch über a.getAttribute("href",2) abgerufen werden. Wenn dieser a-Tag jedoch über innerHTML eingefügt wird, kann der ursprüngliche href-Wert auch über a.getAttribute("href",2) nicht abgerufen werden. Es wird geschätzt, dass IE6 und 7 bei innerHTML='<a href="/haha">test</a>' eine Kompatibilitätsverarbeitung dafür durchführen und einige Dinge hinzufügen werden. Zu diesem Zeitpunkt ist das href von a bei der Anzeige durch outerHTML bereits die vollständige Adresse -_-! Es wird gesagt, dass eine ähnliche Situation im src von img auftreten wird.
Bin nur vorbeigekommen... Lies einfach das oben Stehende... Lass uns anfangen, Unsinn zu reden:
---------------------------------------------------------------------------------------------------------------------------------
Ursprüngliches Ziel : Eine Single-Page-Anwendung, die prüfen möchte, ob das href-Attribut mit http:// beginnt. Wenn ja, springen Sie weiter; wenn nicht, ändern Sie die URL-Adresse durch einen kompatiblen PushState, um die Route auszulösen.
Problem : Beim Testen von IE6 und 7 wurde festgestellt, dass das Abfangen nicht korrekt war ...
Lösung : Ich habe Schwester Gu gefragt und erfahren, dass IE6 und 7 einen zweiten Parameter für getAttribute haben. Wenn Sie ihn auf 2 setzen, wird der ursprüngliche Attributwert abgerufen. Der Einführungslink lautet wie folgt:
http://msdn.microsoft.com/en-us/library/ie/ms536429%28v=vs.85%29.aspx
Als ich das sah, freute ich mich insgeheim und fügte sofort eine Codezeile hinzu. Nachdem ich zum Testen Strg+F5 gedrückt hatte, funktionierte es sofort nicht mehr. Warum funktionierte es nicht? ! Ich komme nicht dahinter …
Zu dieser Zeit chattete ich mit einem Freund ... Ich weiß nicht, wo ich hingekommen bin ... Schließlich habe ich, als ich Frank fragte, weitere Störungen im Code beseitigt und ihn mit dem folgenden Code getestet:

Code kopieren
Der Code lautet wie folgt:

<!doctype html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Prüfung</title>
</Kopf>
<Text>
<a id="a" href="" onclick=".getAttribute(\"href\",2)">Test</a>
</body>
</html>

Wenn Sie in IE6 oder 7 darauf klicken, wird ein großes „/haha“ angezeigt! ! ! Ich begann zu vermuten, dass da noch etwas anderes im Gange war. Zu diesem Zeitpunkt habe ich darüber nachgedacht, woher mein a-Tag stammt (stringbasierte JS-Vorlage, innerHTML) … Also habe ich es mit dem folgenden Code simuliert:

Code kopieren
Der Code lautet wie folgt:

<!doctype html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Prüfung</title>
</Kopf>
<Text>
<div id="test"></div>
<Skript>
document.getElementById("test").innerHTML = '<a id="a" href="/haha" onclick="alert(this.getAttribute(\'href\',2));return false;">test</a>';
</Skript>
</body>
</html>

Nochmals getestet ... bei meiner Schwester ... das Problem ist wieder aufgetreten! Beim tatsächlichen Testen kann nach dem Generieren von a erneut setAttribute("href","/haha",2) und anschließend getAttribute("href",2) "/haha" zurückerhalten. Aber wenn Sie so etwas in einer Vorlage machen möchten, erscheint es Ihnen zu ekelhaft, also geben Sie entschieden auf! Es ist besser, auf Franks Rat zu hören ... Fügen Sie einfach ein Attribut hinzu, um die beiden Linkelemente zu identifizieren, und bleiben Sie nicht in der Routine stecken.
Nochmal bohren-_-!:

Code kopieren
Der Code lautet wie folgt:

<!doctype html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Prüfung</title>
</Kopf>
<Text>
<div id="test"></div>
<Skript>
var test = document.getElementById("test");
var a = document.createElement("a");
var txt = document.createTextNode("test");
ein.href="/haha";
a.onclick=Funktion() {
Alarm (dies.getAttribute ('href',2));//"/haha"
gibt false zurück;
};
a.appendChild(txt);
test.appendChild(a);
</Skript>
</body>
</html>

Schließlich vermute ich, dass IE6 und 7 beim Einfügen von Knoten über innerHTML eine Art „Fehlertoleranz“-Verarbeitung durchführen, die sie für richtig halten … und dann lag ich falsch …

<<:  Schritte für IDEA zur Integration von Docker zur Realisierung einer Remote-Bereitstellung

>>:  Eine kurze Analyse der Unterschiede zwischen Undo, Redo und Binlog in MySQL

Artikel empfehlen

Codebeispiele für die Dekomprimierung, Änderung und andere Betriebsmethoden von Linux-Deb-Paketen

Aus verschiedenen Gründen müssen Sie manchmal den...

Verwenden von vue3 zum Implementieren eines Beispiels für die Kapselung von Zählfunktionskomponenten

Inhaltsverzeichnis Vorwort 1. Die Bedeutung der K...

Detaillierte grafische Beschreibung des MySql8.023-Installationsprozesses (Erstinstallation)

Laden Sie zunächst das Installationspaket von der...

Detaillierte Einführung in das CSS-Prioritätswissen

Bevor wir über die CSS-Priorität sprechen, müssen...

Zusammenfassung zur Verwendung des MySQL-Autorisierungsbefehls „grant“

So verwenden Sie den MySQL-Autorisierungsbefehl „...

Grundlegendes Tutorial zur Verwendung der Explain-Anweisung in MySQL

Inhaltsverzeichnis 1. Übersicht 1. Aussagetest er...

So implementieren Sie verteilte Transaktionen in MySQL XA

Inhaltsverzeichnis Vorwort XA-Protokoll So implem...

So konfigurieren Sie Tomcat und führen Ihr erstes Java-Webprojekt auf IntelliJ IDEA 2018 aus

1 Tomcat herunterladen und starten Gehen Sie auf ...

Detaillierte Erläuterung des MySQL-Isolationsebenen-Operationsprozesses (cmd)

Beispielvorgang für nicht festgeschriebenes Lesen...

Lösen Sie das Problem beim Einstellen des Datums auf 0000-00-00 00:00:00 in MySQL 8.0.13

Ich habe gerade angefangen, Datenbankoperationen ...

Methoden zur Verbesserung der Zugriffskontrollsicherheit im Linux-Kernel

Hintergrund Vor einiger Zeit half unser Projektte...

Detailliertes Installationstutorial für die MySQL-Zip-Archivversion (5.7.19)

1. Laden Sie die Zip-Archivversion von der offizi...

So fügen Sie Div-Elementen abgerundete Ränder hinzu

Wie unten dargestellt: CSS- CodeInhalt in die Zwi...

Warum gibt es das in JS?

Inhaltsverzeichnis 1. Nachfrage 2. Lösung 3. Die ...

37 Tipps für ein gutes User Interface Design (mit Bildern)

1. Versuchen Sie, ein einspaltiges statt eines meh...