Analysis and solution of a.getAttribute(href,2) problem in IE6/7

Analysis and solution of a.getAttribute(href,2) problem in IE6/7

Brief description <br />In IE6 and 7, in a general a tag (an a tag written in HTML and inserted into the page through DOM operations), if the value of href is a relative path, the original value of href will not be obtained directly through a.getAttribute("href"), but the original value can be obtained through a.getAttribute("href",2); however, if this a tag is inserted through innerHTML, the original href value cannot be obtained even through a.getAttribute("href",2). It is estimated that when innerHTML='<a href="/haha">test</a>', IE6 and 7 will make compatibility processing for it and add some things. At this time, when viewed through outerHTML, the href of a is already the complete address -_-! It is said that a similar situation will occur in the src of img.
Just passing by... Just read the above... Let's start talking nonsense:
---------------------------------------------------------------------------------------------------------------------------------
Original goal : A single-page application that wants to check whether the href attribute of a starts with http://. If yes, continue to jump; if not, modify the URL address through compatible pushState to trigger the route.
Problem : When testing IE6 and 7, it was found that a failed to intercept correctly...
Solution : I asked Sister Gu and learned that IE6 and 7 have a second parameter for getAttribute. Setting it to 2 will retrieve the original attribute value. The introduction link is as follows:
http://msdn.microsoft.com/en-us/library/ie/ms536429%28v=vs.85%29.aspx
Seeing this, I felt secretly happy and immediately added a line of code... After pressing Ctrl+F5 to test... it immediately stopped working... Why didn’t it work? ! I can’t figure it out…
At this time, I was chatting with a friend... I don't know where I got off to... Finally, when I asked Frank, I eliminated other interference in the code and tested it with the following code:

Copy code
The code is as follows:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<a id="a" href="" onclick=".getAttribute(\"href\",2)">test</a>
</body>
</html>

When you click on it in IE6 or 7, a big “/haha” will pop up! ! ! I started to suspect that something else was at work. At this time, I thought about how my a tag came from (string-based js template, innerHTML)... So, I simulated it through the following code:

Copy code
The code is as follows:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="test"></div>
<script>
document.getElementById("test").innerHTML = '<a id="a" href="/haha" onclick="alert(this.getAttribute(\'href\',2));return false;">test</a>';
</script>
</body>
</html>

Tested again...sister's...the problem reappeared! In actual testing, after generating a, setAttribute("href","/haha",2) on a again, and then getAttribute("href",2) can get back "/haha". But if you want to do this kind of thing in a template, it seems too disgusting, so give up decisively! It is better to listen to Frank's advice... Simply add an attribute to identify the two link elements, and don't get stuck in a rut.
Drill again-_-!:

Copy code
The code is as follows:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="test"></div>
<script>
var test = document.getElementById("test");
var a = document.createElement("a");
var txt = document.createTextNode("test");
a.href="/haha";
a.onclick=function() {
alert(this.getAttribute('href',2));//"/haha"
return false;
};
a.appendChild(txt);
test.appendChild(a);
</script>
</body>
</html>

Finally, I suspect that when inserting nodes through innerHTML, IE6 and 7 will do some "error tolerance" processing that it thinks is correct... and then I was wrong...

<<:  Introduction to new features of ECMAscript

>>:  A brief analysis of the differences between undo, redo and binlog in MySQL

Recommend

How to customize at and cron scheduled tasks in Linux

There are two types of scheduled tasks in Linux s...

A brief analysis of how to change the root password in Linux suse11 if you forget it

How to solve the problem of forgetting the root p...

JavaScript canvas Tetris game

Tetris is a very classic little game, and I also ...

Javascript combined with Vue to achieve automatic path finding for any maze image

Table of contents Preface Two-dimensional array, ...

js implements shopping cart addition and subtraction and price calculation

This article example shares the specific code of ...

css3 flex layout justify-content:space-between the last line is aligned to the left

When using justify-content:space-between layout, ...

Display mode of elements in CSS

In CSS, element tags are divided into two categor...

VMware Workstation installation Linux (Ubuntu) system

For those who don't know how to install the s...

Definition and usage of MySQL cursor

Creating a Cursor First, create a data table in M...

Implementation process of nginx high availability cluster

This article mainly introduces the implementation...

Detailed explanation of JavaScript error capture

Table of contents 1. Basic usage and logic 2. Fea...

How to use Zen coding in Dreamweaver

After I published my last article “Zen Coding: A Q...

How to improve Idea startup speed and solve Tomcat log garbled characters

Table of contents Preface Idea startup speed Tomc...

How to use firewall iptables strategy to forward ports on Linux servers

Forwarding between two different servers Enable p...

Detailed explanation of the loop form item example in Vue

Sometimes we may encounter such a requirement, th...