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

Nginx solves cross-domain issues and embeds third-party pages

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

Nginx solves cross-domain issues and embeds third-party pages

Superficial Web Design

Summary of Linux file directory management commands

Detailed steps for yum configuration of nginx reverse proxy

Detailed description of HTML table border control

Detailed process of Vue front-end packaging

ftp remotely connect to Linux via SSH

How to solve the problem that scroll-view of WeChat applet cannot slide left and right

Detailed explanation of TIMESTAMPDIFF case in MySQL

Detailed analysis of SQL execution steps

Recommend

MySQL ID starts to increase from 1 to quickly solve the problem of discontinuous ID

Sample code for implementing form validation with pure CSS

Use CSS to easily implement some frequently appearing weird buttons

HTML table tag tutorial (24): horizontal alignment attribute of the row ALIGN

How to batch generate MySQL non-duplicate mobile phone number table example code

The most common declaration merge in TS (interface merge)

MySQL 5.7.21 decompression version installation and configuration method graphic tutorial (win10)

Introduction to HTML basic controls_PowerNode Java Academy

How to check the hard disk size and mount the hard disk in Linux

Several ways to encapsulate axios in Vue

Complete steps to implement location punch-in using MySQL spatial functions

How to deploy redis in linux environment and install it in docker

How to install kibana tokenizer inside docker container

Detailed explanation of how to adjust Linux command history

Docker /var/lib/docker/aufs/mnt directory cleaning method