引言
window对象表示浏览器打开的窗口,在客户端JavaScript中window对象是全局的对象,由此可见window对象的重要的作用。所以接下来我们就一起看一看window对象的相关知识吧。
详细介绍
2.1 创建窗口
窗口对象表示一个窗口或者框架,同时窗口对象除了是客户端JavaScript的全局对象外还实现了核心JavaScript所定义的所有全局属性和方法。当然窗口对象的window属性和self属性引用都是自己的。
图2.1.1 window对象的属性
图2.1.2 window对象的方法
接下来举一个例子运用一下上面的属性和方法:
示例:关闭当前窗口。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <script language="JavaScript"> function shutwin(){ window.close(); return; } </script> <a href="javascript:shutwin();">关闭此窗口</a> </body> </html></html> |
图2.1.3 关闭窗口运行效果图
在这里我们创建了一个超级链接,然后给超级链接添加了一个事件:单机超级链接时,会调用函数shutwin。而在此函数中我们使用了window对象的close方法,最终达到关闭窗口的效果。
2.2 创建对话窗口
我们在使用浏览器浏览内容时,经常会弹出各种各样的对话框,我觉得这些对话框就是我们与页面之间的交流。JavaScript基于window对象提供了三个标准对话框:弹出对话框、选择对话框、输入对话框,接下来看一看这三种对话框吧。
对话框 |
说明 |
alert() |
弹出一个只有‘确定’按钮的对话框。 |
confirm() |
弹出一个包含‘确定’按钮、‘取消’按钮的对话框。当用户单击‘确定’按钮时,返回true值;当用户单击‘取消’按钮时,返回false值。 |
prompt() |
弹出一个包含‘确定’按钮、‘取消’按钮和文本框的对话框。用户可以在此对话框中输入一些数据。当用户单击‘确定’按钮时,文本框中的内容;当用户单击‘取消’按钮时,返回null值。当指定<初始值>时,文本框会有默认值 |
接下来我们就来用一用这三个对话框吧。
示例:对话框的使用:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <script type="text/javascript"> function disp_alert(){ alert("弹出对话框"); } function disp_prompt(){ var name = prompt("你的问题",""); if(name!=null && name!=""){ document.write(name + "!"); } } function disp_confirm(){ var b = confirm("点击按钮"); if (b == true){ document.write("单击确定按钮"); } else{ document.write("单击返回按钮") } } </script> <input type="button" onclick="disp_alert()" value="弹出对话框" /> <input type="button" onclick="disp_prompt()" value="输入对话框" /> <input type="button" onclick="disp_confirm()" value="选择对话框" />
</body> </html> |
图2.2.1 弹出对话框效果图
图2.2.2 输入对话框效果图1
图2.2.3 输入对话框效果图2
图2.2.4 选择对话框效果图
图2.2.5 选择对话框单击确认效果图
图2.2.6 选择对话框单击取消效果图
在这里我们创建了3个表单按钮,为3个表单按钮添加单击事件,实现单击不同的按钮时调用不同的JavaScript函数(调用window对象的alert方法、confirm方法、prompt方法),从而实现不同形式的对话框。
总结
window对象的重要性通过上面的示例,我们都有了一定的了解,但在这里我们只是对于window对象进行了简单的介绍,关于上面表格中window对象的属性和方法我们也只是举了几个简单的例子,窗口的相关操作还有很多,还需要我们更多的使用和学习。