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

　　再钻一钻-_-!：

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

　　最后，怀疑通过innerHTML插入节点时，ie6、7会做一些它认为正确的“容错”处理……容着容着，就让我错了……

 

 

　　by Lcllao.

posted @ 2013-02-26 01:01  Lcllao  阅读(852)  评论(0)  编辑  收藏  举报