1. 背景
Window对象即浏览器窗口对象,提供了很多实用的属性和方法,也包含多种交互的对话框。
一般开发人员习惯上使用UI框架提供的弹窗,能够提供更加精美的样式,而且在各个浏览器下表现一致。
其实Window对象自带的对话框功能还算比较丰富,也算是一种可行的选择,本篇就来具体了解下。
2. alert提示框
window.alert方法用来显示一个提示框,该方法没有返回值,注意弹窗后脚本将被阻塞,直到用户点击确定后才执行后面的脚本。
<button type="button" onclick="alertClick()">alert</button>
<script>
function alertClick() {
alert("你好");
}
</script>
效果:
3. confirm确认框
window.confirm用于弹出一个确认框,同样会阻塞后面的脚本执行,直到点击确认后者取消。
confirm方法会返回布尔值,表示用户点击的结果,代码如下:
<button type="button" onclick="confirmClick()">confirmClick</button>
<script>
function confirmClick() {
var result = confirm("您确认要删除吗,一旦删除不可恢复");
alert("选择结果:" + result);
}
</script>
效果如下:
4. prompt输入框
prompt输入框可以用来供用户在弹窗中输入一些内容,返回值即为用户输入内容。
<button type="button" onclick="promptClick()">promptClick</button>
<script>
function promptClick() {
var result = prompt("请输入姓名", "张三");
alert("输入内容为:" + result);
}
</script>
注意prompt方法的第一个参数表示输入提示,第二个参数为输入的默认值,所以效果如下:
还有一点,如果点击取消,则返回值为null。
5. showModalDialog弹窗
showModalDialog可以弹出指定URL的弹窗。
<button type="button" onclick="showModalDialogClick()">showModalDialogClick</button>
<script>
function showModalDialogClick() {
showModalDialog("http://www.baidu.com");
}
</script>
这个用的比较少,大家知道有这个方法即可。
6. 小结
其实Window对象提供了非常全面的功能,我们使用的很多前端框架,无非就是在文档对象模型、浏览器对象模型基础上开发的,适当的了解Window和Document对象的功能及方法,能够加深我们对浏览器的理解。