web模拟C/S软件登陆框

 

想到C/S架构的软件登录框在屏幕中央，想想能否在网站后台需要登录的地方也打开个输入框窗口,帐号密码正确后打开页面呢(前人也许早已实现,这里只是说说自己做的测试,不要拍砖噢)

 

马上就开始实验.想想在web开发时,javascript打开窗体的命令有window.open(),还有个模式窗口(showModalDialog),还有一种思路就是直接在打开页面时将页面改变大小(调整为登录框大小).

要用到javascript脚本来控制窗体,就先补补这方面的命令.(临时抱佛脚)，现在的搜索功能太强大了,随便baidu一下,google一下,资源一篇接一篇的,感慨啊,信息时代就是快啊.言规正传,为了普及js知识我将javascript的window对象相关说明就copy到这里了,大家也可以去看看其他教程,温习一下

Code
Window对象


Window对象表示浏览器窗口，它位于对象模型的顶层。
Window对象的集合
集合 说明
frames[] 取得Window对象中所有已命名的frame

Window对象的属性
属性 说明
closed 窗口是否关闭
defaultStatus 窗口状态栏的默认文本
document Document对象
history History对象
length Window对象的frame个数
location Location对象
name Window对象的名称
opener 打开当前Window的窗口的引用
parent 父窗口
self 返回当前窗口的引用
status 窗口状态栏文本
top 最顶层窗口

Window对象的方法
方法 说明
alert([Message]) 显示带有警告信息Message的窗口，并有“确定”按钮
blur() 移除本窗口的焦点
clearInterval(iIntervalID) 取消先前用setInterval方法开始的标识为iIntervalID的间隔事件
clearTimeout(iTimeoutID) 取消先前用setTimeout方法开始的标识为iTimeoutID的超时事件
close() 关闭当前窗口
confirm([message]) 显示带有确认信息message的窗口，有“确定”和“取消”按钮
createPopup() 创建弹出窗口，返回该窗口对象的引用
focus() 使本窗口获得焦点
moveBy(x,y) 将窗口的位置移动到指定的x和y偏移值
moveTo(x,y) 将窗口左上角的屏幕位置移动到指定的x和y位置
open() 打开新窗口，显示指定的页面
print() 打印与窗口关联的文档
prompt([message][,defaultValue]) 显示提示对话框，带有提示消息message和默认值defaultValue的输入框，返回用户输入的字符串
resizeBy(x,y) 更改窗口的当前位置缩放指定的x和y偏移量
resizeTo(x,y) 将窗口的大小更改为指定的宽度值x和高度值y
scrollBy(x,y) 将窗口滚动x和y偏移量
scrollTo(x,y) 将窗口滚动到指定的x和y偏移量
setInterval(code,ms[,language]) 每经过ms毫秒后执行代码code,language指定语言属性。返回整形标识,以便clearInterval方法取消该定时器
setTimeout(code,ms[,language]) 经过ms毫秒后执行代码code,language指定语言属性。返回整形标识，以便clearTimeout方法取消该定时器

 

 

在温习时看到window对象里有个resizeTo方法改变指定大小; moveTo方法移动到指定位置就是它们俩了.(没事偷着乐会)

新建一页面1.htm

录入如下简单代码:

 

Code
  <script type="text/javascript">
    
   window.resizeTo(400, 300);
  window.moveTo(600, 200);

    </script>

 

 

窗口大小是改变了,随后的问题是,如何在打开本页时将本页的menu、toolbar等统统隐掉，查了半天资料，只怪自己学艺不精（书到用时方恨少），顺便说个题外话，大家要老记毛主席的话“好好学习，天天向上”。我们不能就此打住啊，这条不行，我们走别的路。

下面用到window.open方法。

 

Code
用一小实例说明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(登录页面)

 

Code
2.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).

 

简单代码如下:

 

 

Code
<script type="text/javascript">
  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