文章目录
- 一、BOM对象
-
- 1.BOM对象模型结构
- 2.BOM结构介绍
- 3.window常用属性
-
- （1）window.name：获取当前窗口的名字
- （2）window.innerWidth、innerHeight： 返回窗口内部(内容区域)宽高
- （3）window.outerWidth、outerHeight ：返回窗口外部(整个浏览器窗口)宽高
- （4）window.screenX、screenY ：返回整个浏览器窗口距离桌面的左边上边的距离
- （5）window.pageYOffset、pageXOffset：返回页面被卷去的上边左边的距离
- 4.window常用对象及其方法
-
- （1）window.open()：打开新窗口
- （2）window.close()：关闭当前窗口
- （3）window.location对象：浏览器地址
- （4）window.navigator对象：返回当前代码的客户端浏览器的相关信息
- （5）window.screen对象：屏幕高宽信息
- （6）window.history对象：记录了当前窗口浏览记录
- （7）frames框架：嵌入在页面中的页面
- （8）window.setTimeout()、setInterval()：定时器
- 总结
一、BOM对象
BOM（Browser Object Model）是指浏览器对象模型，可以对浏览器窗口进行访问和操作。
使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。
1.BOM对象模型结构
2.BOM结构介绍
代码如下（示例）：
运行如下
由此可知docment、locahost、navigathion、screen、history都是window下的属性，可以 window.属性名 调用
window.是可以省略的
3.window常用属性
（1）window.name：获取当前窗口的名字
window.name="index";
console.log(window.name);
（2）window.innerWidth、innerHeight： 返回窗口内部(内容区域)宽高
console.log(window.innerWidth);
console.log(window.innerHeight);
（3）window.outerWidth、outerHeight ：返回窗口外部(整个浏览器窗口)宽高
console.log(window.outerWidth);
console.log(window.outerHeight);
（4）window.screenX、screenY ：返回整个浏览器窗口距离桌面的左边上边的距离
console.log(window.screenX);
console.log(window.screenY);
（5）window.pageYOffset、pageXOffset：返回页面被卷去的上边左边的距离
console.log(window.pageYOffset);
console.log(window.pageXOffset);
4.window常用对象及其方法
（1）window.open()：打开新窗口
语法：window.open(url,name,param)
url：要打开的网址
name：窗口名字
parm：width、heigth、left、top等信息
示例如下：
（2）window.close()：关闭当前窗口
示例如下：
（3）window.location对象：浏览器地址
| 属性 | 描述 |
|---|---|
| href | 返回当前窗口完整url，更改此属性达到页面跳转的目的 |
| host | 返回当前窗口的主机名（域名）,如：www.baidu.com |
| search | 获取form 参数 |
| pathname | 返回资源路径地址，即主机名后面的部分 |
| port | 返回端口号 |
console.log("href："+window.location.href);
console.log("host："+window.location.host);
console.log("post："+window.location.port);
console.log("pathname："+window.location.pathname);
console.log("search："+window.location.search);
结果如下：
| 方法名 | 描述 |
|---|---|
| reload() | 重新刷新页面,参数true 为强制刷新 |
（4）window.navigator对象：返回当前代码的客户端浏览器的相关信息
| 属性 | 描述 |
|---|---|
| userAgent | 用户系统和浏览器相关信息 |
| onLine | 是否联网 |
| cookieEnabled | 是否启用cookie |
| language | 浏览器主语言 |
console.log("userAgent："+window.navigator.userAgent);
console.log("onLine："+window.navigator.onLine);
console.log("cookieEnabled："+window.navigator.cookieEnabled);
console.log("language ："+window.navigator.language);
结果如下：
（5）window.screen对象：屏幕高宽信息
| 属性 | 描述 |
|---|---|
| width、height | 屏幕高宽 |
| availWidth、availHeight | 屏幕可用高宽（不包括任务栏） |
console.log(window.screen.width);
console.log(window.screen.height);
console.log(window.screen.availWidth);
console.log(window.screen.availHeight );
结果如下
（6）window.history对象：记录了当前窗口浏览记录
| 属性 | 描述 |
|---|---|
| length | 历史记录数目 |
| 方法名 | 描述 |
| -------- | ----- |
| back() | 后退一页 |
| forward() | 前进一页 |
| go() | 跳转到指定页，参数为-1代表后退，参数1为前进 |
window.history.back(); //后退
window.history.forward(); //前进
window.history.go(1); //前进
window.history.go(-1); //后退
类似于浏览器自带的前进后退
（7）frames框架：嵌入在页面中的页面
frames框架语法：<iframe src="" name=“框架名字”>
每个框架都有自己的window对象
在父页面中,获取子页面window对象：
在子页面中获取父页面window对象
var frame=window.parent
（8）window.setTimeout()、setInterval()：定时器
相关讲解：定时器
总结
注意 innerWidth和outerWidth的区别