скрыть url javascript не обновляется после нажатия кнопки

Я читал каждый пост, который я могу найти, но подходит к концу. Я понимаю, что попытка замаскировать url-адрес не лучшая практика, но это для личного проекта. Цель состоит в том, чтобы посетить страницу, на которой, как представляется, нет ссылок для кликов. На странице есть анимация, которая показывает форму входа.

javascript, который выполняет анимацию, 1-й щелчок открывает форму входа в систему, щелчок любого из изображений закроет форму и скроет ее.

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, который я нашел здесь, чтобы замаскировать url: скрыть url в строке состояния

<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(); и при повторном щелчке изображения анимируются с помощью open вместо close

1 ответ

  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]);
      }
      };
    

    Поддерживает разрешение URL-адресов javascript. Однако лучше всего использовать onclick eventhandlers, которые вызывают функции напрямую. Вы можете реализовать его в верхнем коде, как это:

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