所谓的 BOM 即浏览器对象模型(Browser Object Model)。BOM 赋予了 JS 操作浏览器的能力,即 window 操作。DOM 则用于创建删除节点,操作 HTML 文档。BOM 尚无正式的标准,导致各浏览器对于 BOM 方法的支持各有不同,因此需要具体问题具体对待。
2、window 对象
window 对象是 BOM 的核心,window 对象指当前的浏览器窗口。所有 JS 全局对象、函数以及变量都属于 window 对象。全局变量是 window 对象的属性。全局函数是 window 对象的方法。甚至 DOM 的 document 也属于 window 对象的属性之一,只是大多数情况下可以忽略不写。
window 对象方法:
| 方法 | 描述 |
| alert() | 弹出带有文本消息和一个确认按钮的警告框 |
| prompt() | 弹出可提示用户输入的对话框 |
| confirm() | confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。 |
| open() | 打开一个新的浏览器窗口 |
| close() | 关闭浏览器窗口 |
| print() | 打印当前窗口的内容 |
| focus() | 把键盘焦点给予一个窗口 |
| blur() | 把键盘焦点从顶层窗口移开 |
| moveBy(xnum, ynum) | 相对窗口的当前坐标将对象移动指定的像素 |
| moveTo(x, y) | 把窗口的左上角移动到一个指定的坐标 |
| resizeBy(w, h) | 按照指定的像素调整窗口的大小 |
| resizeTo(w, h) | 将窗口的大小调整到指定的宽度和高度 |
| scrollBy(xnum, ynum) | 按照指定的像素值来滚动内容 |
| scrollTo(x, y) | 将内容滚动到指定的坐标 |
| setInterval() | 每隔指定的时间执行代码 |
| setTimeout() | 在指定的延迟时间之后来执行代码 |
| clearInterval() | 取消 setInterval() 的设置 |
| clearTimeout() | 取消 setTimeout() 的设置 |
1)prompt() 定义和用法
prompt() 方法用于显示可提示用户进行输入的对话框。
语法
prompt(text,defaultText)
| 参数 | 描述 |
|---|---|
| text | 可选。要在对话框中显示的纯文本(而不是 HTML 格式的文本)。 |
| defaultText |
可选。默认的输入文本。 |
说明
如果用户单击提示框的取消按钮,则返回 null。如果用户单击确认按钮,则返回输入字段当前显示的文本。
在用户点击确定按钮或取消按钮把对话框关闭之前,它将阻止用户对浏览器的所有输入。在调用 prompt() 时,将暂停对 JavaScript 代码的执行,在用户作出响应之前,不会执行下一条语句。
<html> <head> <meta charset='utf-8'/> <script> function disp_prompt() { var name=prompt("请输入您的名字","Bill Gates") if (name!=null && name!="") { document.write("你好," + name + "!今天过得好吗?") } } </script> </head> <body> <input type="button" onclick="disp_prompt()" value="显示一个提示框" /> </body> </html>
2)confirm()
confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。
说明
如果用户点击确定按钮,则 confirm() 返回 true。如果点击取消按钮,则 confirm() 返回 false。
在用户点击确定按钮或取消按钮把对话框关闭之前,它将阻止用户对浏览器的所有输入。在调用 confirm() 时,将暂停对 JavaScript 代码的执行,在用户作出响应之前,不会执行下一条语句。
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <script type="text/javascript"> 5 function disp_prompt() 6 { 7 var name=prompt("Please enter your name","") 8 if (name!=null && name!="") 9 { 10 document.write("Hello " + name + "!") 11 } 12 } 13 </script> 14 </head> 15 <body> 16 17 <input type="button" onclick="disp_prompt()" 18 value="Display a prompt box" /> 19 20 </body> 21 </html>