伪链接实现方法记录

  链接一般作为页面跳转的手段,但是有时候需要使用链接形式,来实现ajax请求(非直接的页面跳转),或者来实现特殊的页面动画效果(点击链接,一段文字展开和收起)。

  总结起来有以下三种方法:

  1、给href属性设置#,使得页面保持在当前页面, 但是页面位置会跳转到顶部,除非使用锚点跳转到特殊位置。

    <a href="#">click here(#)</a><br/>

  2、使用javascript伪协议,给href属性设置 javascript:void(0),详情见下面网页介绍

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void

按照介绍是, 借助javascript:之后的最后一个表达式的值是否为undefined来判断是否可以跳转,如果是不能跳转,否则能跳转。


    <a href="javascript:void(0);" target="blank">click here(javascript:void(0);)</a><br/>
<a href="javascript:undefined;" target="blank">click here(javascript:undefined;)</a><br/>

<a href="javascript:void(0);‘not undefined‘;" target="blank">click here(javascript:void(0);‘not undefined‘;)</a><br/>
<a href="javascript:‘not undefined‘;void(0);" target="blank">click here(javascript:‘not undefined‘;void(0);)</a><br/>

  最后一个表达式值得测试方法如下面:

         <script type=‘text/javascript‘>
alert(eval("‘not undefined‘;void(0);"))
alert(eval("void(0);‘not undefined‘;"))
</script>

  3、直接架空href属性的作用, 在onclick属性中, 添加return
false语句,这个语句会截止链接的原生行为,即href属性失效。

    <a href="#" onclick="return false;" target="blank">click here(onclick="return false;")</a><br/>

  原理见《Javascript Best Practices》说明,http://www.javascripttoolbox.com/bestpractices/#onclick

The javascript code that runs within the onclick handler must return
true or false (or an expression than evalues to true or false) back to the tag
itself - if it returns true, then the HREF of the anchor will be followed like
a normal link. If it returns false, then the HREF will be
ignored. This is why "return false;" is often included at the end of the code
within an onclick handler.

  最佳实践推荐使用 onclick 替换 javascript伪协议,来触发待执行的javascript代码。
这样做可以维持链接语义,在href中应该设置为页面地址URL, 支持浏览器平稳退化。

When you want to trigger javascript code from an anchor <A>
tag, the onclick handler should be used rather than the javascript:
pseudo-protocol.

下面给出完整测试代码:


<html>
<head>
         <style>
                 
         </style>
</head>
<body>
<a href="" target="blank">click here(normal archor)</a><br/>

<a href="#">click here(#)</a><br/>

<a href="javascript:void(0);" target="blank">click here(javascript:void(0);)</a><br/>
<a href="javascript:undefined;" target="blank">click here(javascript:undefined;)</a><br/>

<a href="javascript:void(0);‘not undefined‘;" target="blank">click here(javascript:void(0);‘not undefined‘;)</a><br/>
<a href="javascript:‘not undefined‘;void(0);" target="blank">click here(javascript:‘not undefined‘;void(0);)</a><br/>

<a href="#" onclick="return false;" target="blank">click here(onclick="return false;")</a><br/>

<script type=‘text/javascript‘>
         //alert(eval("‘not undefined‘;void(0);"))
//alert(eval("void(0);‘not undefined‘;"))
         </script>
</body>
</html>

伪链接实现方法记录

时间: 2024-08-06 04:36:44

伪链接实现方法记录的相关文章

64位 SQL Server2008链接访问Oracle 过程汇总解决方法记录

64位 SQL Server2008链接访问Oracle 过程汇总解决方法记录 经过几天不停的网上找资料,实验,终于联通了. 环境:系统:win 2008 ,SqlServer2008 R2, 连接Oracle10g 在SqlServer2008 R2机器上需要安装Oracle客户端32位和64位两个,然后配置连接别名.设置注册表.详细情况见下面 1.错误1 ------------------------------------------------ 64位机器上建立OLE_DB链接报错 报

ASP.NET页面优化性能提升方法记录

今天与大家分享:一种优化页面执行速度的方法.采用这个方法,可以使用页面的执行速度获得[8倍]的提升效果. 为了让您对优化的效果有个直观的了解,我准备了下面的测试结果截图: 测试环境:1. Windows Server 2003 SP22. Viaual Studio 2008,使用自带的WebDev.WebServer.EXE运行网站程序.3. (ThinkPad SL510):Core2 T6670 2.2GHz, 4G内存 二个红框中的数字反映了优化前后的执行时间.数字表明:优化前后,执行时

oracle account locked解决方法记录

今天在访问一个老项目时,后台报错提示 oracle account locked,之前一直可以正常访问的,不知道为什么会出现这个问题,百度一下原因大概是多次登陆失败造成的,一般数据库默认是10次尝试失败后锁住用户,找到原因后接下来就是解决问题了,解决思路很简单:对用户解锁就行了,但是问题就出现在了查找用户上. 本身对oracle的结构就不是很熟悉,所以在解锁用户的时候走了很多弯路,下面就一一道来: 一.因为数据库已久远,忘记了sys用户密码,所以只能远程到服务器登陆,在登陆是确遇到了另外一个错误

jupyter notebook 的使用说明 转自 http://blog.csdn.net/tina_ttl/article/details/51031113#pythonjupyter-notebook各种使用方法记录持续更新

Python·Jupyter Notebook各种使用方法记录·持续更新 标签(空格分隔): Python PythonJupyter Notebook各种使用方法记录持续更新 一 Jupyter NoteBook的安装 1 新版本Anaconda自带Jupyter 2 老版本Anacodna需自己安装Jupyter 二 更改Jupyter notebook的工作空间 1 方式一 2 方式二绝招绝招 三Jupyter的各种快捷键 四Jupyter Notebook如何导入代码 1 将本地的py文

微信更改分享图片和分享链接的方法

1.将以下代码加到head头里 <script>        function htmlEncode(e){return e.replace(/&/g,"&").replace(/ /g," ").replace(/</g,"<").replace(/>/g,">").replace(/\n/g,"<br />").replace(/&quo

JS控制伪元素的方法汇总

转载自:http://www.jb51.net/article/81984.htm 一. 缘由: 本文源于在OSC社区中,有人提问如何用jq获取伪元素.我第一想法是强大的CSS Query应该可以获取伪元素吧. 然而事实上,CSS Query并不能.即我们不能通过$(":before").$(dom).find(":before")或document.querySelector(":before")来获取:before伪元素. 为此,我不得不重新

THINKPHP短链接设置方法(路由设置)

//路由设置(短链接设置)'URL_ROUTER_ON' => true,'URL_ROUTE_RULES' => array('log' => 'Login/index','admin' => 'Login/admin','reg' => 'Login/register', 'c/:id' => 'Index/index/user' '/^C_(\d+)$/' => 'Index/index/user?id=:1'), 长链接:http://localhost/

黑色产业链-最明智的网站链接隐藏方法

黑色产业链可以称为隐藏链.顾名思义.它没有在链接显示,该搜索引擎可以看到链接,黑色短链优势,能够迅速提高排名. 黑色产业链属于外部链接,可以点添加网站链接地址PR值.这是一个受欢迎的网站权重.这就是为什么有些SEOer我喜欢买黑链的原因.以下我们就谈一谈挂黑链的几种方法. 第一种 CSS.DIV隐藏链接代码 黑链代码1.<div style="position: absolute; top: -999px; left: -999px;"> <a href="

asp.net DataTable导出 excel的方法记录(第三方)

官网:http://npoi.codeplex.com/ 简单应用,主要是可以实现我们想要的简单效果,呵呵 需要引入dll,可以在官网下载,也可在下面下载 C#代码   protected void getExcel(DataTable dt) { NPOI.HSSF.UserModel.HSSFWorkbook book = new NPOI.HSSF.UserModel.HSSFWorkbook(); NPOI.SS.UserModel.Sheet sheet = book.CreateSh