hide url javascript wird nach dem Klick nicht aktualisiert

Question

Ich habe jeden Beitrag gelesen, den ich finden kann, aber kurz kommen. Ich verstehe, dass der Versuch, die URL zu maskieren, nicht die beste Vorgehensweise ist, aber dies ist für ein persönliches Projekt. Ziel ist es, eine Seite aufzurufen, auf der keine anklickbaren Links angezeigt werden. Die Seite hat eine Animation, die ein Login-Formular anzeigt.

Javascript, das die Animation ausführt, 1. Klick zeigt das Login-Formular, klicken Sie auf eines der Bilder wird das Formular geschlossen und es ausblenden.

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, dass ich hier die URL zu maskieren gefunden: 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> 

und schließlich die 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> 

Es wurde vorgeschlagen, dass die HTML-I verwendet, ist schrecklich. Aber ich habe Erfahrung und die ganze Arbeit besteht darin, zu hacken, was ich finden kann.

Das Problem, das ich derzeit nicht lösen kann, ist das Ausblenden des Formulars nach dem Öffnen.

Schritte zum Reproduzieren: „: login() Javascript,“ 1. Legen Sie Seite 2. Klicken Sie auf die Region (kein Statusleiste als Link maskiert ist), wird keine Statusleiste als Verbindung mit hiddenhref = ersetzt 3. Login-Formular erscheint 4. Bilder sollten dann auf den Link javascript: logout() übernehmen und bei Hover versteckt werden, aber das passiert nicht. Stattdessen behält der Link javascript: login(); und erneutes Anklicken macht die Bilder mit offenen animieren statt schließen

Answer 1

Was:

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

, die JavaScript-URLs unterstützt zu lösen. Es wäre jedoch besser, nur onclick-Eventhandler zu verwenden, die die Funktionen direkt aufrufen.

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