本节重点
- BOM 模型的主要应用 windows对象模型 + location对象 + history对象
1. windows对象模型
每个新打开的窗口都有自己的window对象
windows对象模型window 对象下的六大属性也都是对象
-
window的主要属性
window的主要属性 -
window的主要方法
window的主要方法 -
系统对话框
alert() / confirm() / prompt()
-
alert() 弹出警告对话框
-
confirm() 可以点击确定或者取消(得到相应的 ture 或 false)
-
prompt() 提示框,可以得到返回值
var num = prompt('请输入一个数字', 0); alert(num);
-
print(); 得到打印对话框
-
find(); 得到查找对话框
-
浏览器的底部状态值(系统属性)
defaultStatus = '状态栏默认文本'; //浏览器底部状态栏初始默认值 status = '状态栏文本 '; //浏览器底部状态栏设置值
-
-
window.open() 新建浏览器窗口
-
window.open() 接收四个参数
第一个: 需要加载的 URL 地址 第二个: 窗口的名称/窗口的目标 第三个: 表示浏览器特性的字符串 第四个: boolean 值 (表示取代当前正在进行的页面)
-
第三个字符串参数的传值
-
设置 | 值 | 说明 |
---|---|---|
width | 数值 | 新窗口的宽度 ,不能小于100 |
height | 数值 | 新窗口的高度, 不能小于100 |
top | 数值 | 新窗口的坐标, 不能为负值 |
left | 数值 | 新窗口的坐标, 不能为负值 |
location | yes/no | 在浏览器中是否显示地址栏 |
menubar | yes/no | 在浏览器中是否显示菜单栏 |
resizable | yes/no | 是否可以拖动改变浏览器的大小 |
scrollbars | yes/no | 是否为溢出的内容显示浏览器的滚动条 |
status | yes/no | 是否显示浏览器下面的状态栏 |
toolbar | yes/no | 是否显示浏览器的工具栏 |
- 第三个参数的设置:
open('http://www.baidu.com','baidu','width=400,height=400,top=200,left=200,toolbar=yes');
-
窗口的位置和大小
-
窗口的位置信息
screenLeft 和 screenTop //IE 支持属性 screenX 和 screenY //firefox 支持属性
-
窗口的 大小 信息
innerWidth 和 innerHeight //返回浏览器窗口的尺寸 outerWidth 和 outerHeight //浏览器窗口 + 边框的尺寸
IE中的尺寸获取
document.documentElement.clientWidth document.documentElement.clientHeight
-
-
间歇调用和超时调用
-
超时调用
var timeOut = setTimeout(function(){},time);
说明:超时调用返回一个数值信息 timeOut,表示该超时调用的 ID
clearTimeout(timeOut); //可以通过该 ID 信息清除超时调用
-
间歇调用
var interval = setInterval(function(){},time);
间歇调用表示每隔 time 时长的时间调用一次,反复执行
因为间歇调用是反复执行的 所以在必要的时候清除间歇调用是非常必要的
说明:间歇调用返回数值信息interval,表示间歇调用的 ID clearTimeout(interval); //清除间歇调用
-
使用超时调用模拟间歇调用
一般认为,使用超时调用来模拟间歇调用是一种最佳模式 。在开发环境下,很少使用真 正的间歇调用,因为需要根据情况来取消 ID,并且可能造成同步的一些问题,我们建议不使用间歇调用,而去使用超时调用。
var num = 0; var max = 5; function timeOut() { num++; if (num == max) { alert('5 秒后结束!'); } else { setTimeout(box, 1000); } } setTimeout(timeOut,1000);
-
2. Location 对象
window.location 和 document.location 等效。大家想想为什么呢??
- location对象的属性 (获取当前浏览器的URL)
属性 | 描述的URL的内容 |
---|---|
hash | 若存在,表示锚点部分 |
host | 主机名 : 端口号 |
hostname | 主机名 |
href | 整个URL |
pathname | 路径名 |
port | 端口号 |
search | 查询字符串(包括传递的参数等等) |
- Location对象的方法
方法 | 功能 |
---|---|
assign("url") | 跳转到指定的 URL,与 href 等效 |
reload() | 重载当前的url , 无参数 |
replace("url") | 用新的 URL 替换当前的 URL. |
3. history 对象
保存着用户上网的记录,从窗口被打开的那一刻算起。
- history 对象的属性
属性 | 描述 URL 中的部分 |
---|---|
length | 描述当前的历史记录中的个数 |
- history 对象的方法
属性 | 实现的功能 |
---|---|
back() | 向前一个历史记录,类似后退 |
forword() | 向后一个历史记录 , 类似前进 |
go(num) | 根据参数设置向前或者向后 |
网友评论