前端|窗口（window）对象介绍
引言
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对象的属性和方法我们也只是举了几个简单的例子，窗口的相关操作还有很多，还需要我们更多的使用和学习。
END