BOM
文章目录
BOM综述
BOM(Browser Object Model) 窗口对象模型
Browser Object:浏览器提供的用户与浏览器窗口之间交互的对象及操作的接口。
Model:这些对象并不是独立存在的,对象与对象之间存在着层次结构,对象模型的作用就是描述这些层次结构。
window 对象
1. window 对象表示整个浏览器窗口
2. 系统对话框设置
① 警告框alert()
– window.alert( [message] )
– message 为要在警告框中显示的内容,如果传入其他类型的值,会转换成字符串。\
window.alert("你确定要关闭此窗口吗");
####② 确认窗口confirm()
– result = window.confirm( [message] );
– result 是一个布尔值
– message 为要在确认框中显示的文本内容
window.confirm("你确定要关闭此窗口吗");
####③ 输入框prompt()
– result = window.prompt([message],[defaultValue]);
– result 用来存储用户输入文字的字符串,或者是 null
– message 用来提示用户输入文字的字符串
– defaultValue 文本输入框中的默认值
window.prompt("请输入你的评价, 1(满意) 2(一般) 3(不满意)", "1");
3.周期性操作设置、延迟执行
####① window 对象定时器方法
方法 | 含义 |
---|---|
setTimeout | 在指定的时间后调用函数或计算表达式。 |
clearTimeout | 取消由 setTimeout() 设置的定时器。 |
setInterval | 按照指定的时间周期调用函数或计算表达式。 |
clearInterval | 取消由 setInterval() 设置的定时器。 |
②延迟执行
延迟执行 setTimeout( ) ----- 只执行一次
– setTimeout( code, interval )
– code 为要延迟执行的 JavaScript 代码
– interval 为延迟执行的间隔时间,单位为毫秒
取消延迟执行 clearTimeout( )
– clearTimeout( id )
– id 是 setTimeout( ) 方法返回的值
var t=setTimeout(function(){
window.alert("你确定要关闭此窗口吗");
},3000);
clearTimeout(t);
③周期执行
周期执行 setInterval( ) ----- 重复执行
– 重复执行,直到 clearInterval( ) 被调用或窗口被关闭
– setInterval( code,interval )
– code 为要周期执行的 JavaScript 代码
– interval 为周期执行的间隔时间,单位为毫秒
取消周期执行 clearInterval( )
– clearInterval( id )
– id 是 setInterval( ) 方法返回的值
var t=setInterval(function(){
window.alert("你确定要关闭此窗口吗");
},3000);
clearInterval(t);
4.浏览器窗口的打开和关闭
打开浏览器窗口 ----- open ( )
– window.open( url,name,features,replace )
– url : 在打开的窗口中加载文档的 URL 地址。(可选参数)
– name : 新开窗口的名称。(可选参数)
– features : 新开窗口的特性。(可选参数)
– replace : 是否替换窗口中浏览的当前历史,布尔值。(可选参数)
关闭浏览器窗口 close ( )
– window.close( )
window.open("https://www.baidu.com/");
window.close();
###history对象
history 对象可以访问浏览器窗口的浏览历史
对象 | 方法 | 说明 |
---|---|---|
history | back() | 后退到上一个访问过的页面 |
history | forward() | 前进到下一个访问过的页面 |
history | go(n) | 跳转到某个访问过的页面 |
go(n) 如果 n 为正数,则前进到第 n 个访问过的网页;如果 n 为负数,则后退到第 n 个访问过的网页。
location 对象
location 对象包含当前窗口的 URL 信息。
– 可以通过修改 location 对象的属性来加载另一个文档。
对象 | 属性 | 说明 |
---|---|---|
location | host | 主机名和端口 |
location | hostname | 主机名 |
location | href | 当前页面的 URL |
location | port | 端口号 |
对象 | 属性 | 说明 |
---|---|---|
location | reload | 重新加载当前页面 |
location | hash | 设置或返回 URL 的锚部分(从 # 号开始的部分) |
location | search | 设置或返回当前 URL 的查询部分(问号 ? 之后的部分) |
navigator 对象
– 包含浏览器的信息,浏览器的类型、版本信息等
对象 | 属性 | 说明 |
---|---|---|
navigator | appName | 浏览器名称 |
navigator | appVersion | 浏览器版本和运行平台 |
navigator | onLine | 是否在线(非脱机) |
navigator | platform | 浏览器运行平台 |
navigator | userAgent | HTTP 用户代理请求头的字符串 |
screen对象
- screen对象包含客户端显示器屏幕的相关信息。
对象 | 属性 | 说明 |
---|---|---|
screen | height | 屏幕的垂直分辨率,单位:像素 |
screen | width | 屏幕的水平分辨率,单位:像素 |
screen | availHeight | 可用屏幕高度 |
screen | availWidth | 可用屏幕宽度 |
document对象
• document 指向当前窗口内的文档节点
– document.write( ):将一串文本写入文档流