在浏览器 IE6 、IE7、Firefox2+、Firefpx3+、Opera9.6+、Safari3.1+中测试以下代码(Demo):

<div id="test">
    <a href="#"> test </a>
</div>
<div id="result"></div>

<script type="text/javascript">
(function(){
    var test = document.getElementById('test');
    alert(test.innerHTML);

    var result =  document.getElementById('result');
    result.innerHTML = test.innerHTML;
    alert(result.innerHTML)
})();
</script>

结果会发现,在 IE6、IE7 浏览器中第二次弹出的 result.innerHTML 中的 A 元素的 href 值成为了绝对路径。

其实先人们早遇到这些问题(感谢 玉伯 提供的资料):

在上面的文章中已提及了处理方案,就是在 IE 下使用 getAttribute( ‘href’ , 2 ) 方法。 Microsoft 给此方法扩展了第二个参数,可设置为 0、1、2,如果设置为 2 ,则返回属性原始值。

脚本修正为:

(function(){
    var test = document.getElementById('test');
    alert(test.innerHTML);

    var result =  document.getElementById('result');
    result.innerHTML = test.innerHTML;

    if(/*@cc_on!@*/0 ) { //if ie
        var links1 = test.getElementsByTagName('a');
        var links2 = result.getElementsByTagName('a');
        for(var i = 0, len = links1.length; i < len; ++i ) {
            links2[i].href = links1[i].getAttribute('href', 2);
        }
    }

    alert(result.innerHTML);

})();

在寻找此问题的过程中还搜索到 Hedger Wang 发现的一个有趣的 BUG 问题:在 IE 中当重新设置新的 href 属性值时,如果链接文字含有 “http://” 或 “@” ,则其 innerHTML 将显示不正确,显示成设置的 href 属性。

解决方法(sHref 为要设置的 href 新值):

sHref = 'http://www.hedgerwow.com';
var isMSIE = /*@cc_on!@*/false;
if( isMSIE ){
    sHref = ' ' + sHref; //add extra space before the new href
};

详细:《Internet Explorer might reset Anchor’s innerHTML incorrectly when a new “href” is assigned》

共有18 条评论

  1. 1. 我的头像最帅! 小马

    抢到沙发!

  2. 2. 我的头像最帅! yoom

    看来还是用DOM操作来得保险些,尽管innerHTML非常方便。

  3. 3. 我的头像最帅! xling

    经你这么一说,我才知道 getAttribute 还有另外一个参数。
    vAttrValue = object.getAttribute(sAttrName [, iFlags])

    Parameters

    sAttrName Required. String that specifies the name of the attribute.

    iFlags Optional. Integer that specifies one or more of the following flags:
    0 Default. Performs a property search that is not case-sensitive, and returns an interpolated value if the property is found.

    1 Performs a case-sensitive property search. To find a match, the uppercase and lowercase letters in sAttrName must exactly match those in the attribute name. If the iFlags parameter for setAttribute is set to true and this option is set to 0 (default), the specified property name might not be found.

    2 Returns the value exactly as it was set in script or in the source document.

    我原来用一笨方法得到 一个文件 的完整路径,看来现在得改改了。

    $.getFullPath = function(path) {

    if (!$$.Browser.ie) {

    var a = document.createElement(”A”);

    a.href = path;

    return a.href;

    } else {

    // 不能用 appendChild(a), return a.href; 这样得到的 href 依然是 path

    var div = $$.$c(”DIV”);

    div.innerHTML = ““;

    //div.innerHTML “

    return div.innerHTML.match(/href=\”(.*)\”/)[1];

    }

  4. 4. 我的头像最帅! Macji

    又一次邪恶的注释。。。。

  5. 5. 我的头像最帅! Robin

    用jquery的飘过~

  6. 6. 我的头像最帅! poor

    纯属瞎顶。

  7. 7. 我的头像最帅! firebug

    这应该和ie内核的渲染引擎有关,比如在ie下另存为html完整页面后,可以看到所有属性的双引号都没有了,文档结构和源文件差别很大,所有标签全部大写,样式表所有的简写如padding,margin的四个属性会全部解析出来,所有属性名称也是大写,而firefox另存之后就没有此问题,和源文件保持是一致的。

  8. 8. 我的头像最帅! 大仙

    又一个前端开发的博客,看来这里有很多东西学,下次一定经常来。

  9. 9. 我的头像最帅! arthuridea

    学习学习~~

  10. 10. 我的头像最帅! 二十二

    顶一个(虽然不是很懂0_o!!)

  11. 11. 我的头像最帅! 达达

    太神奇了~~~

  12. 12. 我的头像最帅! rukey67

    算不上bug吧,只是ie解析方式的不同
    就像用file表单,浏览选择文件后,ie里面能读到完整的文件地址
    ff里面读到的只有文件名

  13. 13. 我的头像最帅! 怿飞

    @rukey67 第一个的确严格来说不能算BUG,只能算解析的不一致,不过第二个的确是个BUG,呵呵

  14. 14. 我的头像最帅! vampire

    最近几篇总是先看到英语原文。。。

  15. 15. 我的头像最帅! u206.com

    还真第一次听说
    学习了

  16. 16. 我的头像最帅! rukey67

    有些东西说不清道不明,再给个demo你看下:

    function test1(){
    var text=escape(document.getElementById(”text”).innerHTML);
    var str=”";
    document.getElementById(”input1″).innerHTML=str;
    }
    function test2(){
    var text=document.getElementById(”text”).innerHTML;
    document.getElementById(”input2″).value=text;
    }

    我是一行文字'我前面有个分号

  17. 17. 我的头像最帅! rukey67

    不怪我刷屏,提交了评论没提示成功还是失败
    都删了吧·

  18. 18. 我的头像最帅! rukey67

    发不了代码,看这个demo:http://www.rukey.cn/test/innerHTML_test.html

发表评论

(必填)

(必填,会为您保密)

评论仅支持“a、abbr、strong、em、blockquote、code”几个简单的标签