一、前言

今天,遇到一个别人挖的坑,问题是这样的。

做了一个列表页,可以筛选数据,有很多筛条件。主要是有input复选框和<a>标签两种。如图:

其中房价的筛选条件使用<a>标签,代码如下

1 <a href="javascript:;" name="price">150元-300元</a>

用javascript:; 来阻止了a标签跳转链接。

但是,却发现在IE下面点击a标签,居然清除了其他input复选框的筛选项,what?

第一次碰到这种情况,然后我仔细研究了一番,发现是伪协议搞的鬼。那么我们一起看看这到底是怎么回事。

二、什么是伪协议

伪协议不同于因特网上所真实存在的协议,如http://,https://,ftp://,

而是为关联应用程序而使用的.如:tencent://(关联QQ),data:(用base64编码来在浏览器端输出二进制文件),还有就是javascript:

我们可以在浏览地址栏里输入"javascript:alert('JS!');",点转到后会发现,实际上是把javascript:后面的代码当JavaScript来执行,并将结果值返回给当前页面。

三、深入代码找问题

想了半天实在想不出所以然,然后我返回页面看这个<a>标签, 难道是javascript:;这个写法有问题?

于是我改成了我常用javascript:vioid(0);写法,但是问题依然没有解决。真是奇怪。。。

心烦意乱,然后打算先跳出这个问题,看了一看javascript:void(0);和javascript:;的区别:

其实两种都是javascript:URL 的形式,在浏览器打开javascript:URL的时候,它会先运行URL中的代码,当返回值不为undefined的时候,前页链接会替换为这段代码的返回值。

javascript:void(0), 我们知道void运算符会对给定的表达式进行求值,然后直接返回 undefined,javascript:; 也是返回 undefined,所以两种方法是等价的。

回到问题本身,想想好奇怪,为什么点击<a>标签会取消其他input复选框的选中呢?

因为是维护别人的代码,所以突然想到,会不会是有代码执行了这个操作,于是我搜索了一下代码,看哪里执行了取消input复选框的选中操作。

很快,我就定位到了页面中onbeforeunload函数中执行了取消input复选框选中的操作,估计写这段代码的同学,是想要在页面销毁之前取消input的选中,

避免浏览器前进后退复选框仍选中,造成数据不符的问题。

到了这一步,问题清晰了一点,那么只需要测试,是否在IE下,点击这种写有javascript:;的a标签会触发onbeforeunload。

于是我打开浏览器做了测试,果真在ie9及其以下的浏览器触发了这个事件。

虽然之前就知道IE中a标签事件调用顺序:onclick->window.onbeforeunload->href ,但是通常页面中很少会使用onbeforeunload方法,很多时候是忽略的。

最后说一下我的解决办法,

在<a>标签绑定的click事件中,使用event.preventDefault();取消它的默认行为,页面可以正常运行了。

不知道大家有没有其他更好的方法,有的话,还希望大家在留言中告诉我,多多交流。

四、聊聊a标签使用伪协议

问题终于解决了,让我们放松心情,聊聊<a> 标签使用javascript:伪协议吧。通常我们为<a>标签增加href属性,一般有两个目的:

  1. 跳转到指定的页面,也就是:link选择器可以选择到它。

  2. 有href属性的<a>标签才有cursor:pointer的效果,特别实在低版本浏览器里面。

下面我们主要是聊聊不想要<a>标签跳转到实际页面的几种方法。

  1. <a href="#"></a>

  2. <a href="#none"></a>

  3. <a href="###"></a>

  4. <a href="javascript:"></a>

  5. <a href="javascript:;"></a>

  6. <a href="javascript:void(0)"></a>

  7. <a href="javascript :void(0);"></a>

 

第1种,点击这个链接后,会让页面跳到页面顶部,在location.href后面增加#号。

第2种,点击这个链接后, 如果页面里面有id为none的元素,会执行锚点机制跳转到这个元素上缘。

第3种,不跳转,可以阻止默认的跳转行为,但是这个在后端代码中容易识别成注释,后面的代码不显示,之前遇到过这种坑,之后再没用过。

后面几种使用了javascript伪协议。我们上面已经对5和7进行了说明,想详细了解void运算符,可前往https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/void查看。

为什么我要列出4和6呢,有时候有些同学会忘记写分号,这样在IE6下面点击a标签,会造成页面中的gif暂停。

本博客文章皆为原创,未尽许可,请勿转载 (http://www.cnblogs.com/song-song/p/5277838.html)

A标签使用javascript:伪协议相关推荐

  1. java伪协议_JavaScript中伪协议 javascript:使用探讨

    将javascript代码添加到客户端的方法是把它放置在伪协议说明符javascript:后的URL中.这个特殊的协议类型声明了URL的主体是任意的javascript代码,它由javascript的 ...

  2. php伪协议xss,XSS漏洞学习

    XSS漏洞的原理 XSS漏洞是发生在目标网站中目标用户的浏览层面上,当用户浏览器渲染整个HTML文档的过程中,出现了不被预期的脚本指令并执行时,XSS就会发生. XSS漏洞的危害 获取用户或者管理员的 ...

  3. base64 转文件_PHP伪协议与文件包含

    PHP伪协议与文件包含 PHP伪协议与文件包含 php:// 协议 php://input php://filter data:// 协议 file:// 协议 zip://.bzip2://.zli ...

  4. java伪协议_通过伪协议解决父页面与iframe页面通信的问题

    我们经常会有父页面与iframe页面的操作,比如 这个iframe里面的内容是js写的.如以下代码 var iframe = document.getElementById("iframe& ...

  5. a标签href=”javascript;void(0)

    href="javascript:void(0)" href="javascript:void(0)"这个的含义是,让超链接去执行一个js函数,而不是去跳转到一 ...

  6. php://filter伪协议(总结)

    文章目录 php://filter伪协议总结 php://filter伪协议介绍 php://filter伪协议使用方法 php://filter过滤器分类 filter字符串过滤器 string.r ...

  7. LFI(本地文件包含)、RFI(远程文件包含)、PHP封装协议(伪协议)安全问题学习

    友情链接:https://www.cnblogs.com/LittleHann/p/3665062.html 目录 一.文件包含的基本概念 1.要想成功利用文件包含漏洞,需要满足下面的条件 (1)in ...

  8. php伪协议语法,php文件包含漏洞(input与filter)

    php://input php://input可以读取没有处理过的POST数据.相较于$HTTP_RAW_POST_DATA而言,它给内存带来的压力较小,并且不需要特殊的php.ini设置.php:/ ...

  9. PHP Filter伪协议Trick总结

    PHP Filter伪协议Trick总结 前言:最近在学习的过程中碰到了很多的filter协议的小trick,在此做一个总结以及对filter协议的一些探索. PHP Filter协议介绍 ​ php ...

最新文章

  1. 【Applet编写应用小程序】Applet类APIの基本知识和第一个程序
  2. ZYAR20A 亚克力2驱 蓝牙 298寻迹避障机器人 —— 小车红外避障实验(带后退掉头避障)
  3. maven原型_创建自定义Maven原型
  4. python写http post请求的四种请求体
  5. STM32F103单片机J-TAG引脚功能关闭方法
  6. 纯新手DSP编程--5.21--RTDX
  7. 江湖救急、就从今天开始吧
  8. excel数据分析常用图表制作案例
  9. rgba通道转rgb,将RGBA颜色转换为RGB
  10. 在Windows使用mingw32编译opencv
  11. 信息学奥赛一本通|1194:移动路线
  12. css 效果之并列排列
  13. 编写MTK6737平台的GPIO驱动例程(一)
  14. 为什么VDI(桌面虚拟化)对于硬核UNIX/Linux工程应用程序是有意义的?
  15. openssl库android版的编译
  16. 计算机视觉——相机定位
  17. 每一个优秀的人,都有一段默默努力的时光
  18. 【无标题】win11打不开微软商店Microsoft Store
  19. 五种方法限制计算机禁用USB接口
  20. 2013中秋大同三日游

热门文章

  1. Oracle数据库之PL/SQL
  2. xml教程之java解析xml文档
  3. 不停应用重启oracle数据库,此类情况下解决Oracle数据库重启的四种方案
  4. shell grep 变量_Shell应用:巧用xargs 轻松实现上万文件的筛选压缩
  5. LeetCode 96不同的二叉搜索树95不同的二叉搜索树Ⅱ
  6. 高性能的索引实现——《深究MySQL》
  7. onenote怎么同步到电脑_OneNote“此分区文件似乎已损坏”的解决办法
  8. .describe() python_Python编程从入门到实践日记Day26
  9. Dubbo 3.0 前瞻:重塑 Spring Cloud 服务治理
  10. 阿里张磊:如何构建以应用为中心的“Kubernetes”?(内含 QA 整理)