单击后隐藏url javascript未更新
我一直在阅读我能找到的每一篇文章,但都有不足之处。我理解试图屏蔽url不是最佳实践,但这是针对个人项目的。目标是访问一个似乎没有可点击链接的页面。该页面具有显示登录表单的动画 执行动画的javascript,第一次单击显示登录表单,单击任何图像将关闭表单并将其隐藏单击后隐藏url javascript未更新,javascript,jquery,html,Javascript,Jquery,Html,我一直在阅读我能找到的每一篇文章,但都有不足之处。我理解试图屏蔽url不是最佳实践,但这是针对个人项目的。目标是访问一个似乎没有可点击链接的页面。该页面具有显示登录表单的动画 执行动画的javascript,第一次单击显示登录表单,单击任何图像将关闭表单并将其隐藏 function login() { $(document).ready(function() { $('.loginlink').removeAttr('href'); $('#ai1, #ai3, #ai4, #a
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");
});
});
函数登录(){
$(文档).ready(函数(){
$('.loginlink').removeAttr('href');
$('ai1,'ai3,'ai4,'ai5').attr('href','javascript:logout();');
$('#i1')。设置动画({left:'-=110'});
$('#i4')。设置动画({top:'-=110'});
$('#i5')。设置动画({top:'+=110'});
$('#di2')。设置动画({opacity:0});
$('#i3')。动画({left:'+=110'},function(){
$(“#i2”)。替换为(“
还记得我吗?”);
$('#di2')。设置动画({opacity:1});
$('#i1').css('z-index','10');
});
$('.login').addClass('logout');
$('.login').removeClass('login');
$('#t1')。设置动画({opacity:0});
$('#t2')。设置动画({opacity:0});
});
}
函数注销(){
$(文档).ready(函数(){
$('.loginlink').removeAttr('href');
$('#di2')。设置动画({opacity:0},function(){
$('#f')。替换为('');
$('#di2')。设置动画({opacity:1},function(){
$('#i1')。设置动画({左:'+=110'});
$('#i4')。设置动画({top:'+=110'});
$('#i5')。设置动画({top:'-=110'});
$('#i3')。动画({left:'-=110'},函数(){
$('#t1')。设置动画({opacity:1});
$('#t2')。设置动画({opacity:1});
$('ai1,'ai2,'ai3,'ai4,'ai5').attr('href','javascript:login();');
});
});
});
$('.logout').addClass('login');
$('.logout').removeClass('logout');
});
}
$(文档).ready(函数(){
$('#name').live(“焦点”,函数(){
如果($('#name').val()==“Username”)$('#name').val(“”);
});
$('#name').live(“模糊”,函数(){
如果($('#name').val()==“”)$('#name').val(“用户名”);
});
$('#pass').live(“焦点”,函数(){
if($('#pass').val()=“Password”)$('#pass').val(“”);
});
$('#pass').live(“模糊”,函数(){
if($('#pass').val()=='')$('#pass').val(“密码”);
});
});
我在这里找到的用于屏蔽url的javascript:
$(函数(){
$(“a.loginlink”)。每个(函数(索引,元素){
var href=$(this.attr(“href”);
$(this.attr(“hiddenhref”,href);
$(this.removeAttr(“href”);
});
$(“a.loginlink”)。单击(函数(){
url=$(this.attr(“hiddenhref”);
window.open(url,''u self');
})
});
最后是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很糟糕。但我没有经验,所有的工作都是通过破解我能找到的东西
我目前无法解决的问题是在打开表单后隐藏表单
复制步骤:
1.加载页
2.单击区域(没有状态栏,因为链接被屏蔽),没有状态栏,因为链接被替换为hiddenhref=“javascript:login();”
3.出现登录表单
4.然后,图像应该使用链接javascript:logout()并在悬停时隐藏,但这不会发生。相反,该链接保留了javascript:login();再次单击会使图像以“打开”而不是“关闭”的方式设置动画,那么:
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事件处理程序,直接调用函数。您可以在上面的代码中实现它,如下所示:
if(url=="javascript:login()"){
login.call(this);//you could also do login(), depends on wether you wanna use this...
}else{
//open url
}
该代码旨在打开一个URL隐藏的新窗口,并且可能被弹出窗口阻止程序阻止。@cuniculus弹出窗口阻止程序通常允许在堆栈中有用户启动的事件时弹出新窗口。在这里,对
login()
的调用从href
移动到弹出窗口阻止程序允许的onclick
属性。
if(url=="javascript:login()"){
login.call(this);//you could also do login(), depends on wether you wanna use this...
}else{
//open url
}