随手写的一个静态HTML页面JS加密URL,密码验证的jQuery插件
点击查看演示
HTML部分:
增加mrel属性,写入真实页面地址前缀,如真实页面地址为shang_mmpage0.html ,mrel里的地址写为shang.html.
CSS部分(主要为密码验证框的样式):
/* 密码框样式 */
.mm{cursor:pointer; position:relative;}
.passbox{position:relative; background:#f8f9fe; border:1px solid #e2e2e2; display:block; width:180px; height:80px; padding:10px 20px; z-index:999; border-radius:4px; font-size:12px;}
.passbox input{display:inline; width:120px; margin-top:10px; padding:3px 0px; background-color:transparent; border:1px solid #ccc;}
.passbox .btn{ display:inline-block; padding:0px 15px; height:25px; border:1px solid #ccc; background-color:#000; color:#fff; cursor:pointer; margin-top:3px; position:relative; top:-3px; border-radius:7px; }
.passbox .close{position:absolute; top:2px; right:10px; left:auto; cursor:pointer; font-family:Arial; color:#d92020; font-weight:bold; font-size:15px;}
.mpop{padding-left:5px; color:#ff0101;}
/* 密码框样式结束*/
JS部分:
(function($){
$.fn.jsPass=function(options){
var defaults={
passtag:".mm",
passcode:"passcode",
pagetagname:"_mmpage0.html"
};
var opts=$.extend(defaults,options);
var win_href=window.location.href;
var win_searchnum=win_href.lastIndexOf("/");
var win_path=win_href.substr(0,win_searchnum+1);
var mmcode=opts.passcode,ele=this.find(opts.passtag);
ele.each(function(i){
$(this).click(function(e){
var ele_url=$(this).attr("mrel");
var ele_sublength=ele_url.length-5;
var ele_href=win_path+ele_url.substr(0,ele_sublength)+opts.pagetagname;
var ele_passbox=$(".passbox");
if(ele_passbox.length==0){
var ele_parent=$(this).parent("li");
ele_parent.append("输入密码:确定X");
};
$(".passbox").find(".close").click(function(){
$(".passbox").detach();
});
$(".passbox").find(".btn").click(function(){
var input_val=$(".passbox").find("input").val();
if(input_val==mmcode){
$(".passbox").detach();
window.open(ele_href);
}else{
$(".passbox").find(".tip").html("密码错误!");;
}
});
});
});
}
})(jQuery)
使用方法:
$(function(){
$("body").jsPass();
$("body").jsPass({
passtag:".mm2", //加密码的元素可选(jQ选择器名)
passcode:"mm2", //密码(字符串)
pagetagname:"_page2.html" //加密码页面后缀
});
/*
以上参数都为可选,以下为默认的参数
passtag:".mm",
passcode:"passcode",
pagetagname:"_mmpage0.html" */
})
主要实现方式为页面内隐藏真实URL,由JS代码拼接后缀字符串组合为真实URL地址。通过密码验证成功打开真实URL地址。
最后将所有的JS代码加密压缩,达到静态页密码验证功能。
当然用JS来进行加密验证并不可能达到真正的加密,以上代码只作试验。