zoukankan      html  css  js  c++  java
  • 伪链接实现方法记录

      链接一般作为页面跳转的手段,但是有时候需要使用链接形式,来实现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>
  • 相关阅读:
    Ultra-QuickSort(归并排序求逆序对数)
    Power Network (最大流增广路算法模板题)
    Sorting It All Out
    Asteroids(二分图最大匹配模板题)
    昂贵的聘礼
    Borg Maze(bfs+prim)
    Currency Exchange(判断是否有正环)
    Children of the Candy Corn (bfs+dfs)
    Tautology
    Flip Game
  • 原文地址:https://www.cnblogs.com/lightsong/p/3705606.html
Copyright © 2011-2022 走看看