Question

我一直在阅读我能找到的所有帖子，但是很快就会出现。我知道试图掩盖网址不是最好的做法，但这是个人项目。目标是访问似乎没有可点击链接的页面。该页面包含显示登录表单的动画。

执行动画的javascript，第一次点击显示登录表单，点击任何图像将关闭表单并隐藏它。

function login() {
$(document).ready(function() {
    $('.loginlink').removeAttr('href');
    $('#ai1, #ai3, #ai4, #ai5').attr('href', 'javascript:logout();');
    $('#i1').animate({left: '-=110'});
    $('#i4').animate({top: '-=110'});
    $('#i5').animate({top: '+=110'});
    $('#di2').animate({opacity: 0});
    $('#i3').animate({left: '+=110'}, function() {
        $('#i2').replaceWith('<form id="f"><input class="a" value="Username" id="name" name="user" type="text" /><br /><div class="fs"><br /></div><input class="a" value="Password" id="pass" name="pass" type="password" /><br /><div class="fs"><br /></div><div style="position: relative; left: -25px; display: inline;"><input type="checkbox" name="remember" /> Remember me?</div><input style="position: relative; left: 25px;" type="submit" value=" Login " /></form>');
        $('#di2').animate({opacity: 1});
        $('#i1').css('z-index', '10');
    });
    $('.login').addClass('logout');
    $('.login').removeClass('login');
    $('#t1').animate({opacity: 0});
    $('#t2').animate({opacity: 0});
});
}
function logout() {
    $(document).ready(function() {
            $('.loginlink').removeAttr('href');
            $('#di2').animate({opacity: 0}, function() {
                $('#f').replaceWith('<img id="i2" src="/static/common/w.png" />');
    $('#di2').animate({opacity: 1}, function() {
                $('#i1').animate({left: '+=110'});
            $('#i4').animate({top: '+=110'});
                    $('#i5').animate({top: '-=110'});
                    $('#i3').animate({left: '-=110'}, function() {
            $('#t1').animate({opacity: 1});
                $('#t2').animate({opacity: 1});
        $('#ai1, #ai2, #ai3, #ai4, #ai5').attr('href', 'javascript:login();');
        });
        });
    });
            $('.logout').addClass('login');
    $('.logout').removeClass('logout');
    });
}

$(document).ready(function() {
$('#name').live("focus", function() {
    if($('#name').val() === "Username") $('#name').val("");
});
$('#name').live("blur", function() {
    if($('#name').val() === "") $('#name').val("Username");
});
    $('#pass').live("focus", function() {
            if($('#pass').val() === "Password") $('#pass').val("");
    });
    $('#pass').live("blur", function() {
            if($('#pass').val() === "") $('#pass').val("Password");
    });
});

我在这里发现的javascript来掩盖网址：hide url at status bar

<script type="text/javascript">
    $(function(){
        $("a.loginlink").each(function (index, element){
            var href = $(this).attr("href");
            $(this).attr("hiddenhref", href);
            $(this).removeAttr("href");
        });
        $("a.loginlink").click(function(){
            url = $(this).attr("hiddenhref");
            window.open(url, '_self');
        })
    });
</script>

最后是html：

<table id="derp">
            <td id="a"></td>
            <td id="b">
                    <span class="login">
                            <a id="ai4" class="loginlink" href="javascript:login();"><img id="i4" src="/static/common/top.png" /></a>
                            <a id="ai1" class="loginlink" href="javascript:login();"><img id="i1" src="/static/common/left.png" /></a>
                            <a id="ai3" class="loginlink" href="javascript:login();"><img id="i3" src="/static/common/right.png" /></a>
                            <a id="ai5" class="loginlink" href="javascript:login();"><img id="i5" src="/static/common/bottom.png" /></a>
                            <div id="di2"><a id="ai2" class="loginlink" href="javascript:login();"><img id="i2" src="/static/common/w.png" /></a></div>
                    </span><br /><br />
            </td>
            <td id="c"></td>
</table>

有人建议我使用的HTML很糟糕。但我有0经验，所有的工作都是通过劈砍我能找到的东西。

我目前无法解决的问题是在打开后隐藏表单。

重现的步骤： 1.加载页面 2.单击区域（链接被屏蔽时没有状态栏），没有状态栏，因为链接被替换为hiddenhref =“javascript：login（）;” 3.出现登录表单 4.然后图像应该采用链接javascript：logout（）并在悬停时隐藏，但这不会发生。而是链接保留javascript：login（）;并再次单击使图像动画为打开而不是关闭

Answer 1

怎么样：

window.onload=function(){
  var as=document.getElementsByTagName("a");
 for(key in as){
  (function(a){
    var url=a.href;
     a.href="javascript:void(0)";
    a.onclick=function(){
      if(url.split("javascript:")[0]){
        eval(url.split("javascript:")[0]);
      }else{
        location.href=url;
      }
   };
   })(as[key]);
  }
  };

支持解析javascript网址。但是，最好只使用onclick事件处理程序，直接调用函数。您可以在上面的代码中实现它，如下所示：

 if(url=="javascript:login()"){
  login.call(this);//you could also do login(), depends on wether you wanna use this...
 }else{
   //open url
 }

隐藏网址javascript点击后没有更新

1 个答案: