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

Einfaches Beispiel für die Verschönerung von HTML-Kontrollkästchen und -Radios

Einfaches Beispiel für die Verschönerung von HTML...

Lösung für das Problem, dass die Div-Breite auf width:100% eingestellt ist und dann die Polsterung oder der Rand das übergeordnete Element überschreitet

Vorwort In diesem Artikel wird erläutert, wie Sie...

Next.js – Erste Schritte-Tutorial

Inhaltsverzeichnis Einführung Erstellen eines Nex...

Methoden und Schritte zur Verwendung von http-Proxy-Middleware zur domänenübergreifenden Implementierung von Proxy in Node

Inhaltsverzeichnis 1. Installieren Sie das Proxy-...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.16 winx64 unter win10

In diesem Artikel wird die spezifische Methode zu...

Detaillierte Verwendung von Echarts in vue2 vue3

Inhaltsverzeichnis 1. Installation 2. Verwenden S...

Diese Dinge wissen Sie vielleicht nicht über die automatische ID-Inkrementierung in MySQL

Einführung: Wenn wir MySQL zum Erstellen einer Ta...

Zwei Arten von Tab-Anwendungen im Webdesign

Heutzutage werden Registerkarten häufig im Webdes...

Vue implementiert eine kleine Countdown-Funktion

In vielen Projekten muss eine Countdown-Funktion ...

So fügen Sie einen Link in HTML ein

Jede Webseite hat eine Adresse, die durch eine UR...

Realisieren Sie eine dreistufige Verknüpfung von Jahr, Monat und Tag basierend auf JavaScript

In diesem Artikel wird der spezifische Code für J...

So verwenden Sie boost.python, um die dynamische C++-Bibliothek unter Linux aufzurufen

Vorwort Vor Kurzem habe ich begonnen, Robot Frame...

JS implementiert den Beispielcode der Dezimalkonvertierung in Hexadezimal

Vorwort Beim Schreiben von Code stoßen wir gelege...

So verwenden Sie Nginx zur Simulation einer Blue-Green-Bereitstellung

Dieser Artikel stellt die Blue-Green-Bereitstellu...

Beispiele für die Erstellung und Verwendung von MySQL-Triggern

Inhaltsverzeichnis Was ist ein Auslöser Erstellen...