想到C/S架构的软件登录框在屏幕中央，想想能否在网站后台需要登录的地方也打开个输入框窗口,帐号密码正确后打开页面呢(前人也许早已实现,这里只是说说自己做的测试,不要拍砖噢)
马上就开始实验.想想在web开发时,javascript打开窗体的命令有window.open(),还有个模式窗口(showModalDialog),还有一种思路就是直接在打开页面时将页面改变大小(调整为登录框大小).
要用到javascript脚本来控制窗体,就先补补这方面的命令.(临时抱佛脚)，现在的搜索功能太强大了,随便baidu一下,google一下,资源一篇接一篇的,感慨啊,信息时代就是快啊.言规正传,为了普及js知识我将javascript的window对象相关说明就copy到这里了,大家也可以去看看其他教程,温习一下
在温习时看到window对象里有个resizeTo方法改变指定大小; moveTo方法移动到指定位置就是它们俩了.(没事偷着乐会)
新建一页面1.htm
录入如下简单代码:
window.resizeTo(400, 300);
window.moveTo(600, 200);
</script>
窗口大小是改变了,随后的问题是,如何在打开本页时将本页的menu、toolbar等统统隐掉，查了半天资料，只怪自己学艺不精（书到用时方恨少），顺便说个题外话，大家要老记毛主席的话“好好学习，天天向上”。我们不能就此打住啊，这条不行，我们走别的路。
下面用到window.open方法。
window.open ("page.html", "newwindow", "height=100, width=400, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no");
window.open 弹出新窗口的命令；
'page.html' 弹出窗口的文件名；
'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替；
height=100 窗口高度；
width=400 窗口宽度；
top=0 窗口距离屏幕上方的象素值；
left=0 窗口距离屏幕左侧的象素值；
toolbar=no 是否显示工具栏，yes为显示；
menubar，scrollbars 表示菜单栏和滚动栏。
Resizable=no 是否允许改变窗口大小，yes为允许；
location=no 是否显示地址栏，yes为允许；
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；
普及完了之后,开始动工,主要想法是用一页面做跳板,直接open一个窗口,打开子窗口的同时,关闭父窗口。新建2.htm(跳板页面),3.htm(登录页面)
<script type="text/javascript">
window.open ("3.htm", "newwindow", "height=100, width=400, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") ;
window.opener=null;
window.close();
</script>
3.htm是登录框代码(将1.htm去掉script代码)
效果向我们想的方向进了一小步,打开时没有什么采单栏,工具栏,地址栏了.大家一看代码,就知道了,对,js脚本只在IE上运行正常,发现问题,马上想方法,用js对客户端浏览器类型进行判断,不用IE的直接打开登录页面(locaction.href).
简单代码如下:
if(navigator.userAgent.indexOf("Firefox")!=-1)
{
OtherOpenWindow();
}
else if(navigator.userAgent.indexOf("Maxthon")!=-1)
{
OtherOpenWindow();
}
else if(navigator.userAgent.indexOf("Safari")!=-1)
{
OtherOpenWindow();
}
else if(navigator.userAgent.indexOf("Camino")!=-1)
{
OtherOpenWindow();
}
else if(navigator.userAgent.indexOf("Konqueror")!=-1)
{
OtherOpenWindow();
}
else if(navigator.userAgent.indexOf("MSIE")!=-1)
{
IEOpenWindow();
}
else
{
OtherOpenWindow();
}
function IEOpenWindow()
{
window.open ("3.htm", "newwindow", "height=100, width=400, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") ;
window.opener=null;
window.close();
}
function OtherOpenWindow()
{
location.href="3.htm";
}
</script>
User-Agent参数在这里就不在介绍了,大家可以用Fidder 分别看下各浏览器的User-Agent参数值.
模式方法略了,有兴趣的大家可以自己去测试了.主是就是用模式窗口中登录后,返回主页面(2.htm)时,要对返回结果进行判断,成功跳转到3.htm,失败就跳到错误页面(error.htm).
总结:略.
补充:
昨天去了 ublue.liao 的博客,进到他的精灵部落,效果不错.题外话..,哈..
参考:
http://www.diybl.com/course/1_web/javascript/jsjs/20071226/94568.html
http://blog.sina.com.cn/s/blog_49df2d0b01009epq.html