前几天别的项目组的要求说要那我们的项目出去演示,要做个能自动登录其B/S系统的东西。于是就写了一个html文件,在浏览器中打开这个文件之后,就可以自动登陆到我们系统的主界面。
我们的系统使用的是Spring Security那一套的权限控制机制,简单的自动登录比较简单,只要定义一个<form>表单,提交的action指向项目根目录下的j_spring_security_check页面,并在表单中定义两个字段,名字分别为j_username和j_password,并分别给定用户名和密码值,然后提交表单即可。这样的登录方式,相当于直接从系统的登录界面登录,只不过把登录过程自动化了而已。
后来,他们又提出登录之后,最好能把原系统的标题给替换掉,显示一个他们给定的名字;还想自动实现页面中的一些操作(这是一个车辆的GPS监控系统,他们想一登录就自动选上几辆车并开始监控)。琢磨之后发现第二个要求应该是不可能的,因为这样就相当于跨域访问了。关于第一部分,我使用了一个命名的iframe,也就是把我们的系统嵌入到一个另一个页面之中。并且为了正好练习一下javascript,我给这个页面加上了根据主窗口的大小调节iframe大小的功能,是跨浏览器的;这样,跟直接登录系统看到的界面是完全一样的,只不过可以自定义一个title,并且可以添加一些额外的js代码。全部的代码如下:
<html>
<head>
<title>GPS监控系统演示</title>
</head>
<body>
<iframe id='i_iframe' name="n_iframe" frameborder="0"></iframe>
<form target="n_iframe" name="loginform" method="post" action="http://***/GPSMonitor/j_spring_security_check">
<input name="j_username" type='hidden' value='NearEast' /><!-- sxys -->
<input name="j_password" type='hidden' value='123' />
</form>
<script type="text/javascript">
function addCookie(name, value) {
var Days = 2;
var exp = new Date();
exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
document.cookie = name + "=" + escape(value) + ";expires="+ exp.toGMTString();
}
function GetPageSize() {
var actW, actH;
if(window.innerHeight && window.scrollMaxY) {
// Mozilla
actW = window.innerWidth + window.scrollMaxX;
actH = window.innerHeight + window.scrollMaxY;
} else if(document.body.scrollHeight > document.body.offsetHeight){
// all but IE Mac
actW = document.body.scrollWidth;
actH = document.body.scrollHeight;
} else if(document.body) { // IE Mac
actW = document.body.offsetWidth;
actH = document.body.offsetHeight;
}
var winW, winH;
if(window.innerHeight) { // all except IE
winW = window.innerWidth;
winH = window.innerHeight;
} else if (document.documentElement
&& document.documentElement.clientHeight) {
// IE 6 Strict Mode
winW = document.documentElement.clientWidth;
winH = document.documentElement.clientHeight;
} else if (document.body) { // other
winW = document.body.clientWidth;
winH = document.body.clientHeight;
}
// for small pages with total size less then the viewport
var pageW = (actW<winW) ? winW : actW;
var pageH = (actH<winH) ? winH : actH;
return {PageW:pageW, PageH:pageH, WinW:winW, WinH:winH};
}
var frm = document.getElementById('i_iframe');
frm.style.position = "absolute";
frm.style.left="0px";
frm.style.top="0px";
window.onresize = function(){
info = GetPageSize();
frm.style.width=info.WinW;
frm.style.height=info.WinH;
};
window.onresize();
addCookie('mapType',2);
loginform.submit();
setTimeout(sendAjax,5000);
</script>
</body>
</html>
其中addCookie('mapType',2);这句是为了写登录过程中需要用到的一个cookie值。就这么简单!
另附两个封装好的获取和删除cookie值的函数,以及原来企图实现第二部分功能时参考的一个跨浏览器的发送Ajax请求的函数:
function getCookie(name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
function delCookie(name) {
var exp = new Date();
exp.setTime(exp.getTime() - 2000000000);
var cval = getCookie(name);
if (cval != null)
document.cookie = name + "=; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
function sendAjax(){
var xmlhttp;
var txt,x,i;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("title");
for (i=0;i<x.length;i++){
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;
}
}
xmlhttp.open("POST","http://***/GPSMonitor/tiles/chooseVehicle.action",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send();
}