IE下href 的 BUG问题

代码如下:

<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 值成为了绝对路径。
其实先人们早遇到这些问题（感谢 玉伯 提供的资料）：

  • 《getAttribute(”HREF”) is always absolute》
  • 《getAttribute href bug》
    在上面的文章中已提及了处理方案，就是在 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》

    • 赞 (0)

    相关推荐

    • IE下href 的 BUG问题

      复制代码 代码如下: <div id="test"> <a href="#"> test </a> </div> <div id="result"></div> <script type="text/javascript"> (function(){ var test = document.getElementById('test'); ale

    • python 如何获取页面所有a标签下href的值

      python 如何获取页面所有a标签下href的值

      看代码吧~ # -*- coding:utf-8 -*- #python 2.7 #http://tieba.baidu.com/p/2460150866 #标签操作 from bs4 import BeautifulSoup import urllib.request import re #如果是网址,可以用这个办法来读取网页 #html_doc = "http://tieba.baidu.com/p/2460150866" #req = urllib.request.Request

    • 提交gRPC-spring-boot-starter项目bug修复的pr说明

      提交gRPC-spring-boot-starter项目bug修复的pr说明

      目录 前言 gRPC-spring-boot-starter是什么? 选型gRPC-spring-boot-starter bug出现,grpc未优雅下线 定位bug,寻找真实原因 模拟环境,反复验证 验证定位的bug 验证修复后的效果 前言 为了更好的说明给gRPC-spring-boot-starter项目提交bug修复的pr的原因,解答作者的问题.以博文的形式记录了整个过程的上下文,目前pr未合并还在沟通处理中,希望此博文可以更清楚描述问题 pr地址:https://github.com/

    • JQuery Dialog(JS 模态窗口,可拖拽的DIV)

      JQuery Dialog(JS 模态窗口,可拖拽的DIV)

      效果图 调用示意图 交互示意图 如上图所示,这基本是JQueryDialog的完整逻辑流程了. 1.用户点击模态窗口的"提交"按钮时,调用JQueryDialog.Ok()函数,这个函数对应了用户提交事件. 2.用OO的概念来说,JQueryDialog.Ok()其实是一个虚函数,它的逻辑封装在子窗口ContentWindow.Ok()中,这一点我借鉴了FCKEditor,如下代码所示: JS代码 复制代码 代码如下: var JQueryDialog = { /// <summ

    • JS与HTML结合使用marquee标签实现无缝滚动效果代码

      最近在做一个前端开发的项目,需要实现无缝滚动效果,上下左右无缝滚动.下面小编把实现代码分享到我们平台,需要的朋友可以参考下,有bug欢迎提出,共同学习进步. 具体代码如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns=&

    • 浅析script标签中的defer与async属性

      浅析script标签中的defer与async属性

      一.前言 看到的前辈写的代码如下 <script src="#link("xxxx/xx/home/home.js")" type="text/javascript" async defer></script> 竟然同时有async和defer属性,心想着肯定是前辈老司机的什么黑科技,两个一块儿肯定会发生什么神奇化学反应,于是赶紧怀着一颗崇敬的心去翻书翻文档,先复习一下各自的定义. 二.调查一番 先看看async和defe

    • IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点

      公司WEB项目要求是必须兼容FF3,IE6/7/8.本文所述为IE6下的一个BUG. 项目里面写了一个自己封装的弹出层,原理是先动态添加一个遮罩层,再动态添加一个DIV(Table)层(做弹出层的PNG半透明边框效果),DIV里面动态添加一个IFrame,这个Iframe页面指向一个现存的HTM文件. 如果这个HTM文件中,包含文本输入框这样的一些表单元素,在IE6下就会出娄子了. 测试组的人说了,弹出层打开后,"经常"无法获取文本框的焦点,就是鼠标点文本框无法获取焦点并显示输入标记,

    • iOS设计模式——Category简单介绍

       什么是Category Category模式用于向已经存在的类添加方法从而达到扩展已有类的目的,在很多情形下Category也是比创建子类更优的选择.新添加的方法同样也会被被扩展的类的所有子类自动继承.当知道已有类中某个方法有BUG,但是这个类是以库的形式存在的,我们无法直接修改源代码的时候,Category也可以用于替代这个已有类中某个方法的实体,从而达到修复BUG的目的.然而却没有什么便捷的途径可以去调用已有类中原有的那个被替换掉方法实体了.需要注意的是,当准备有Category来替换某一

    • Java通过JsApi方式实现微信支付

      要使用JsApi进行微信支付,首先要从微信获得一个prepay_id,然后通过调用微信的jsapi完成支付,JS API的返回结果get_brand_wcpay_request:ok仅在用户成功完成支付时返回.由于前端交互复杂,get_brand_wcpay_request:cancel或者get_brand_wcpay_request:fail可以统一处理为用户遇到错误或者主动放弃,不必细化区分. 示例代码如下: function onBridgeReady(){ WeixinJSBridge

    • JS 有名函数表达式全面解析

      Example #1: Function expression identifier leaks into an enclosing scope 实例1:函数表达式标示符渗进了外围作用域 var f = function g(){}; typeof g; // "function" Remember how I mentioned that an identifier of named function expression is not available in an enclosi

    随机推荐