zoukankan      html  css  js  c++  java
  • <a>标签的伪协议在ie下的bug解决与总结

    今天有个同事问了我一个项目里的问题 ,即一个献花功能,每次点击时会有个jsonp跨域的处理,用的jquery1.7.2

    代码是这样的

    $("#id  a").click(funciton() {
    
      
    
       $.ajax({
           type : "get", 
           async:false, 
           url : "http://screen.app.7k7k.com/awardflower?flowerid=38229639&form=4&callback=success_jsonpCallback",
           dataType : "jsonp",
           success : function(json){ 
                alert(json); 
    
            },
            error:function(){
                alert('fail');
            }
          });
    
    });

    这段代码在chrome, firefox都是对的。但在ie下会alert('fail'),

    最起初我一直以为是jquery的兼容问题,但经过很多测试发现不是此问题,那么排除jquery本身的问题,再看看自身写的ajax代码,将这段代码单独拿出执行,也没问题。

    再才可能是和click相关,我们是click的<a>标签。

    <a> 标签上 , <a  href="javascript:;" >  ,  我们通常会这样写来阻止a的默认事件, 难道是这个问题? 就排除性的改为<a href="#" > , 果然就可以了。

    但href=#会默认跳到top , 故改称href="#bottom" ,  就达到了之前相同的效果 ,

    但为什么href="javascript:;" 或者 href="javascript:void(0);" 在ie下都会alert("fail")呢,这个应该是ie为协议的bug , 即如果不return false, 所有请求都会abort掉,

    所以我又将代码恢复用javascript: ,  在onclick事件里面 增加了一个renturn false.  果然也解决了问题。

    故以后要小心<a>标签为协议的坑。

    1. 尽量减少通过<a>标签触发ajax或者jsonp,可以改为span或者其他的

    2.如果必须要用<a>标签 ,请在使用javascript:的同时, 要在click的方法里面return false.  当然如果允许也可以 href="#bottom"。

    另:在碰到一些非常怪的bug ,排除法是首选。

    希望可以很多朋友看到blog可以减少改坑。

  • 相关阅读:
    洛谷 P3384 【模板】树链剖分
    codevs 4633 [Mz]树链剖分练习
    看一个人的回答有感(怎么判断数组中有没有未定义的值,如:[,,1,,3])
    bzoj2754: [SCOI2012]喵星球上的点名
    bzoj4456: [Zjoi2016]旅行者
    bzoj4574:Zjoi2016线段树 dp
    bzoj4455: [Zjoi2016]小星星
    bzoj4516: [Sdoi2016]生成魔咒
    uoj#207. 共价大爷游长沙
    bzoj4530:[Bjoi2014]大融合
  • 原文地址:https://www.cnblogs.com/fang9159/p/weixieyi.html
Copyright © 2011-2022 走看看