在浏览器 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》



共有22 条评论

  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

  19. 19. 头像 股吧

    dom操作,如果采用w3c标准的方法,兼容性问题很少,innerHTML是被排除在外的,看来有它的道理。

  20. 20. 头像 动态网页

    不错的博客,我收藏了能学到不少的东西

  21. 21. 头像 Supersah

    使用getAttribute的第二个参数虽然可以解决href的问题,但是对于一些事件属性,比如onclick等等还是会有出入。
    我在我的网站里提供了一个这种的方式,href通过这种方式来解决,其他的获取事件属性可以通过getAtributeNode来获取,这个就可以兼顾到很多兼容性的问题。
    可惜本人的blog现在不能访问。

  22. 22. 头像 simaopig

    看了你的代码我才知道 @cc_on 条件编译,很好很强大。。。

    如果你也用 ‘\v’ !== ‘\v’这种我就郁闷了。呵。

发表评论

(必填)

(必填,会为您保密)

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