JavaScript 对话框和状态栏使用说明


Posted in Javascript onOctober 25, 2009

今天为大家简单介绍一下 JavaScript 对话框和状态栏。

javascript 与 对话框:

  • 三种对话框图示:

    在客户端浏览器中,三种常见的Window方法用来弹出简单对话框,它们分别是 alert(),confirm()和prompt()。alert()用于向用户显示消息。confirm()要求用户点击确认或取消。prompt()要求用户输入一个字符串。下面的三幅图分别为alert(),confirm()和prompt()。

    JavaScript 对话框和状态栏使用说明

    alert()对话框提示


    JavaScript 对话框和状态栏使用说明

    confirm()对话框提示


    JavaScript 对话框和状态栏使用说明

    prompt()对话框提示

  • 三种对话框简介:

    alert()方法弹出的对话框只是显示提示信息,对用户起提醒作用。

    confirm()方法用于询问用户是否确认,展示两个按钮——确认和取消。相当于if/else结构,如果点击确认按钮,则继续执行下面的程序,如果点击取消按钮,则返回false。

    prompt()方法带有一个输入框,其返回的内容就是用户在输入框中输入的内容。目的就是获取用户的输入。

  • 对话框阻塞进程简介:

    无论是confirm()和prompt()都会产生阻塞,也就是说,在用户关掉它们所显示的对话框之前,它们不会返回。同时也就意味着在弹出一个对话框时,代码会停止运行。如果当前正在装载文档,也会停止装载,直到用户用要求的输入进行了响应为止。没有方法可以防止这些方法产生阻塞,因为它们的返回值是用户的输入,所以在返回之前它们必须等待用户进行输入。

    在大多数浏览器中,alert()也会产生阻塞,并等待用户关闭对话框。但是在某些浏览器中(尤其是UNIX平台上的Netscape3和4),alert()方法并不产生阻塞。不过小小子在fedora11上面做测试,也是会产生阻塞的,当然我没有用netscape试验,我用的是Firefox浏览器测试,同样阻塞。不过犀牛的作者说:


在实践中,这点小小的不兼容性很少引起问题。
alert(),confirm()和prompt()的用法:
alert('这是一个alert提示,你滴明白?');
confirm('这是一个confirm提示,你是愿意看啊,还是愿意看啊?');
prompt('来,帅哥,告诉哥你的名字吧');

javascript 与 状态栏:
当用户将鼠标放在一个超链接上面的时候,浏览器会在状态栏上面显示出这个超链接所指向的url地址。但是有的时候你会发现当你的鼠标放在超链接或者图片上面的时候,状态栏的上面显示的是一些文本而不是链接地址。
在 javascript 中,浏览器的状态栏上面的内容由 Window 对象的两个属性控制,即 status 和 defaultStatus。所以通过 javascript 可以改变状态栏的默认行为,显示我们所希望显示给用户的信息。
属性status 主要用于存放瞬时消息,即当有触发事件发生的时候才会改变状态栏的信息。而defaultStatus属性指定了显示在状态栏中默认的文本。只有当触发事件发生的时候,状态栏上面的文本才会被指定的status替换,否则将一直显示defaultStatus属性指定的内容。

<!-- 
当鼠标放在上面代码的时候,状态栏会显示:鼠标放在这个链接上面,状态栏显示的内容。 
--> 
<a href='https://3water.com' target='_blank' onmouseover="window.status='鼠标放在这个链接上面,状态栏显示的内容。';return true;">三水点靠木</a>

上例中的事件处理程序必须得return true;这就通知了浏览器当事件发生的时候不应该执行自己的默认的动作,也就是说不应该在状态栏中显示链接的URL,如果忘记了return true;那么浏览器就会用它自己的URL覆盖处理程序在状态栏中显示的所有信息。

再来看一个defaultStatus的例子吧,将页面状态栏的默认值设定为:欢迎来到本站,小小子感谢您的到来。

defaultStatus = '欢迎来到本站,小小子感谢您的到来';
window.defaultStatus = defaultStatus;
代码演示及说明:

也许有的时候,各位无法看到状态栏上面显示的信息,下面给出方法,希望可以帮助大家:

in Firefox:

1. Go to Tools > Options
2. Click the Content tab
3. Ensure that the JavaScript option is checked
4. Click Advanced (next to the Enable JavaScript option)
5. Check the Change status bar text option
6. Click OK to save this screen
7. Click OK again

In Internet Explorer:

1. Go to Tools > Internet Options
2. Click the Security tab
3. Ensure that the Internet option is selected/highlighted
4. Click Custom Level… (this launches the security settings for the Internet zone)
5. Scroll down until you see Allow status bar updates via script (under the Scripting option). Click Enable
6. Click OK to save this screen
7. Click OK again

Javascript 相关文章推荐
另一个javascript小测验(代码集合)
Jul 27 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
Apr 12 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 Javascript
利用forever和pm2部署node.js项目过程
May 10 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
基于vue.js的分页插件详解
Nov 27 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
微信小程序实现音频文件播放进度的实例代码
Mar 02 Javascript
Node登录权限验证token验证实现的方法示例
May 25 Javascript
JavaScript实现简单的音乐播放器
Aug 14 Javascript
5款Javascript颜色选择器
Oct 25 #Javascript
11款基于Javascript的文件管理器
Oct 25 #Javascript
JavaScript 三种不同位置代码的写法
Oct 25 #Javascript
JavaScript 事件的一些重要说明
Oct 25 #Javascript
javascript写的一个链表实现代码
Oct 25 #Javascript
JavaScript的变量作用域深入理解
Oct 25 #Javascript
理解JavaScript变量作用域更轻松
Oct 25 #Javascript
You might like
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
php二维数组用键名分组相加实例函数
2013/11/06 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
php带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
JavaScript window.setTimeout() 的详细用法
2009/11/04 Javascript
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
也说JavaScript中String类的replace函数
2011/09/22 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
javascript实现控制浏览器全屏
2015/03/30 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
2019/09/16 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
2020/07/20 Javascript
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
python 字符串常用方法汇总详解
2019/09/16 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
到底Java是如何传递参数的?是by value或by reference?
2012/07/13 面试题
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
2014年团总支工作总结
2014/11/21 职场文书
校长新学期致辞
2015/07/30 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang