IE6、7下a.getAttribute(href,2)“抽风”的那点事儿

本文主要是介绍IE6、7下a.getAttribute(href,2)“抽风”的那点事儿，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

简述

在IE6、7下，一般的a标签（写好在HTML中的，通过dom操作插入到页面中的a标签）中，假如href的值是一个相对路径时，直接通过a.getAttribute("href")，获取到的不是href的原始值，但可以通过a.getAttribute("href",2)获取到原始值；但如果这种a标签是通过innerHTML插入的话，即使通过a.getAttribute("href",2)也无法获取原始的href值。估计在innerHTML='<a href="/haha">test</a>'的时候，IE6、7会对其做兼容处理，加入一些东西，这个时候通过outerHTML查看，a的href已经是完整地址-_-! 据说img的src也会出现类似情况。

匆匆路过的……看完上面即可……下面开始瞎扯：

---------------------------------------------------------------------------------------------------------------------------------

原始目标：一个单页应用，想根据a的href属性的值，是否http://开头。如果是，则继续跳转；如果不是，则通过兼容的pushState修改url地址，触发route。

问题：测试IE6、7时，发现a未能正确拦截……

解决办法：问谷姐……得知IE6、7的getAttribute有第二个参数，设为2即可取回原来的属性值。介绍链接如下：

http://msdn.microsoft.com/en-us/library/ie/ms536429%28v=vs.85%29.aspx

看到这里，心里暗爽，马上补一句代码……在按下Ctrl+F5测试后…马上歇菜……为啥不行呢？！百思不得其解……

这时候跟一位朋友瞎扯……不知道扯哪去了……最后在问Frank的过程中，我排除了代码中其他干扰，用以下代码测试：

<!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>

在IE6、7下点击，都弹出大大的“/haha”！！！我就开始怀疑是其他东西在搞鬼了。这时候，想到我的a标签是怎么来的（基于字符串的js模板，innerHTML）……于是，再通过以下代码模拟：

<!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" οnclick="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的话……简简单单加个属性标识两种链接元素，别钻牛角尖。

再钻一钻-_-!：

<!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>