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

Question

Я читаю каждый пост, который я могу найти, но подходящий. Я понимаю, что попытка маскировки 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: 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: логин();» 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 разрешающего URL. Однако было бы лучше просто использовать onclick eventhandlers, которые напрямую вызывают функции. Вы могли бы реализовать его в верхней кода:

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