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

MySQL Error 1290 (HY000) Solution

I struggled with a problem for a long time and re...

mysql delete multi-table connection deletion function

Deleting a single table: DELETE FROM tableName WH...

A simple and effective solution to forget the initial password when installing MySQL

When you install MySQL, you will be given an init...

Detailed explanation of three commonly used web effects in JavaScript

Table of contents 1 element offset series 1.1 Off...

How to use IDEA to create a web project and publish it to tomcat

Table of contents Web Development 1. Overview of ...

Solution to multiple 302 responses in nginx proxy (nginx Follow 302)

Proxying multiple 302s with proxy_intercept_error...

How to install MySQL 8.0 database on M1 chip (picture and text)

1. Download First of all, I would like to recomme...

centos7.2 offline installation mysql5.7.18.tar.gz

Because of network isolation, MySQL cannot be ins...

URL representation in HTML web pages

In HTML, common URLs are represented in a variety ...

Use of Linux relative and absolute paths

01. Overview Absolute paths and relative paths ar...

Navicat for MySQL 15 Registration and Activation Detailed Tutorial

1. Download Navicat for MySQL 15 https://www.navi...

Tutorial on installing rabbitmq using yum on centos8

Enter the /etc/yum.repos.d/ folder Create rabbitm...

Linux system command notes

This article describes the linux system commands....

Advanced Usage Examples of mv Command in Linux

Preface The mv command is the abbreviation of mov...

Comprehensive analysis of MySql master-slave replication mechanism

Table of contents Master-slave replication mechan...