IE6/7下a.getAttribute(href,2)的难题剖析及处理

2021-03-21 14:30 jianzhan

简述
在IE6、7下,1般的a标识(写好在HTML中的,根据dom实际操作插进到网页页面中的a标识)中,倘若href的值是1个相对性相对路径时,立即根据a.getAttribute("href"),获得到的并不是href的初始值,但能够根据a.getAttribute("href",2)获得到初始值;但假如这类a标识是根据innerHTML插进的话,即便根据a.getAttribute("href",2)也没法获得初始的href值。估算在innerHTML='<a href="/haha">test</a>'的情况下,IE6、7会对其做适配解决,添加1些物品,这个情况下根据outerHTML查询,a的href早已是详细详细地址-_-! 听说img的src也会出現相近状况。
匆匆途经的……看完上面便可……下面刚开始瞎扯:
---------------------------------------------------------------------------------------------------------------------------------
初始总体目标:1个单页运用,想依据a的href特性的值,是不是http://开始。假如是,则再次自动跳转;假如并不是,则根据适配的pushState改动url详细地址,开启route。
难题:检测IE6、7时,发现a未能正确阻拦……
处理方法:问谷姐……获知IE6、7的getAttribute有第2个主要参数,设为2便可取回来原先的特性值。详细介绍连接以下:
http://msdn.microsoft.com/en-us/library/ie/ms536429%28v=vs.85%29.aspx
看到这里,内心暗爽,立刻补1句编码……在按下Ctrl+F5检测后…立刻歇菜……为啥不好呢?!百思不可其解……
这时候候跟1位盆友瞎扯……不知道道扯哪去了……最终在问Frank的全过程中,我清除了编码中别的影响,用下列编码检测:

拷贝编码
编码以下:

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

 在IE6、7下点一下,都弹出大大的“/haha”!!!我就刚开始怀疑是别的物品在捣鬼了。这时候候,想起我的a标识是如何来的(根据标识符串的js模版,innerHTML)……因而,再根据下列编码仿真模拟:

拷贝编码
编码以下:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<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>

再度检测……sister's……重现难题了!实测,在转化成a以后,对a再度setAttribute("href","/haha",2),再getAttribute("href",2)能够拿回“/haha”。但假如要在模版中做这类事儿,好像太恶心想吐了,坚决舍弃!還是听Frank的话……简简易单加个特性标志两种连接元素,别钻牛角尖。
再钻1钻-_-!:

拷贝编码
编码以下:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<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>

最终,怀疑根据innerHTML插进连接点时,ie6、7会做1些它觉得正确的“容错机制”解决……容着容着,就让我错了……