BOM
前端第七次预习博客
文章目录
提示：以下是本篇文章正文内容，下面案例可供参考
一、BOM是什么
浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话。
浏览器对象模型（Browser Object Model (BOM)）
- 不存在浏览器对象模型（BOM）的官方标准。
- 现代的浏览器已经（几乎）实现了 JavaScript 交互相同的方法和属性，因此它经常作为 BOM 的方法和属性被提到。
二、Window对象
Window对象： 是BOM中所有对象的核心，同时也是BOM中所有对象的父对象。
定义在全局作用域中的变量、函数以及JavaScript中的内置函数都可以被Window对象调用。
- Window对象只存在于浏览器环境中，在其他环境内，是以
Global为对象的。在浏览器中，Window对象既是通过 JS 访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。这意味着在网页中定义的任何一个对象、变量和函数，都以Window作为其Global对象。 所有浏览器都支持 window 对象，它代表浏览器的窗口。- 所有全局 JavaScript 对象，函数和变量
自动成为 window 对象的成员。 - 全局变量是 window 对象的
属性。 - 全局函数是 window 对象的
方法。
1. 窗口关系与框架
所谓窗口关系及框架指的就是通过 iframe 标签来引入的页面与当前页面的关系。
首先要先声明，目前 W3C 已经不推荐使用
frameset + frame，而推荐使用iframe来代替它们。
top指向最外层的框架
parent指向当前的父框架
self指向自己
实现效果：
无论 iframe 如何嵌套，我们都可以将其分为两种相对情况：父页面对子页面的操作，子页面对父页面的操作。而想要操作 iframe 中的内容，必须要满足以下几点要求：
- 父页面与子页面符合同源策略；
- 子页面没有禁止被其他页面以
iframe形式调用； - 子页面已经成功加载完毕；
父页面操纵子页面
在父页面中获取子页面的方法。
上例
// 使用 window.onload 保证子页面已经加载完毕
window.onload = function(){
// 获取子页面 iframe 对象
var oChild = window.frames["child1"];
// 获取子页面元素
oChild.document.getElementsByTagName("h1")[0];
// 获取子页面变量
oChild.name1;
// 调用子页面方法
oChild.fn1();
}
子页面操纵父页面
以上述实例;
子页面可以直接使用 window.parent 属性获取父页面对象，也可以省略 window ，在子页面 中获取父页面的方法。
// parent 即代表当前页面的父页面
parent;
// 获取父元素对象
parent.document.getElementsByTagName("h1")[0];
// 获取子页面变量
parent.pageName;
// 调用子页面方法
parent.paretnName();
如果想要在父页面 index.html 操作孙子页面3.html，我们可以先获取到子页面 1.html ，在获取 1.html 的子页面 3.html：
window.frames["child1"].frames["child3"].name3; // "3.html"
如果想要在孙子页面 3.html 操作最顶级页面 index.html，可以先获取到 父页面 1.html，再获取 1.html 的父页面index.html：
parent.parent.name; // "index.html"
如果确定是要访问最顶级的页面时，可以直接使用 window.top 来获取：
window.top.name; // "index.html"
总结:
- 如果
iframe具有name属性，可以通过window.frames[name]来获取； - 如果
iframe没有name属性，可以通过window.frames[index]来获取； - 想要对
iframe进行操作需要满足同源策略等基本要求； - 子页面可以直接通过
window.parent来获取父页面； - 可以直接使用
window.top来获取最顶级页面；
2、窗口位置
我们可以通过screenLeft和 screenTop 属性来分别获取窗口相对于屏幕左边和上边的位置，screenX 与screenY可以达到相同的效果。
但是在
IE环境下只支持使用 screenLeft 和 screenTop 属性，Firefox只支持使用 screenX 和 screenY 属性。而Chrome 、Safari 和 Opera同时支持这两个属性，但Opera浏览器环境下 screenX 和 screenY 属性与 screenLeft 和 screenTop 属性获得的值并不对应。
注意:
由于各个浏览器中存在不同的问题，我们是无法在跨浏览器的条件下使用一个方法取得窗口左边和上边的精确坐标值。必须针对浏览器的不同使用不同的方法才能获得精确的坐标。
3、窗口大小
视口大小
在 IE9 版本以前的浏览器，并没有提供获得浏览器窗口本身的大小的方法，只能使用document.documentElement.clientWidth 和 document.documentElement.clientHeight方法，通过DOM来获取当前页面的可视区域大小。
- window.innerHeight - 浏览器窗口的内高度（以像素计）
- window.innerWidth - 浏览器窗口的内宽度（以像素计）
浏览器窗口（浏览器视口）不包括工具栏和滚动条。
对于 Internet Explorer 8, 7, 6, 5：
- document.documentElement.clientHeight
- document.documentElement.clientWidth
或
- document.body.clientHeight
- document.body.clientWidth
一个实用的 JavaScript 解决方案（包括所有浏览器）：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
var x = document.getElementById("demo");
x.innerHTML = "浏览器内窗宽度：" + w + "，高度：" + h + "。";
</script>
</body>
</html>
页面效果：
该例显示浏览器窗口的高度和宽度：（不包括工具栏和滚动条）
窗口本身的尺寸
outerWidth 和 outerHeight返回浏览器窗口本身的尺寸。
outerWidth(options)
获取第一个匹配元素外部宽度（默认包括补白和边框）。
此方法对可见和隐藏元素均有效。
返回值：Integer；
参数：options(Boolean) : (false) 设置为 true 时，计算边距在内。
outerHeight(options)
获取第一个匹配元素外部高度（默认包括补白和边框）。
此方法对可见和隐藏元素均有效。
返回值：Integer；
参数：options(Boolean) : (false) 设置为 true 时，计算边距在内。
页面视图区的大小（减去边框）
innerHeight属性返回当前窗口的高度， innerWidth属性返回当前窗口的宽度。
innerWidth()方法/innerheight用于获得包括内边界（padding）的元素宽度/高度。
由于这些属性附加到窗口的大小，因此必须更改其值的大小。 调整浏览器窗口的大小，然后再次查看这些属性。
窗口位置移动
使用resizeTo()和resizeBy()方法可以调整浏览器窗口的大小。
这两个方法都接受两个参数，其中resizeTo()接受浏览器窗口新宽度和新高度，而resizeBy()接受新窗口与原窗口的宽度和高度只差。
这两个方法与移动窗口位置的方法类似，也有可能被浏览器禁用；而且在Opera和IE7中默认就是禁用的。另外，这两个方法同样不适用于框架，而只能对最外层的window对象使用
4、 打开窗口open
使用 window.open() 可以导航到一个特定的URL，也可以打开一个新的浏览器窗口，该方法可以接收四个参数，但一般情况下我们只传入第一个参数。
- URL ：表示要加载窗口的地址；
- target ：已有窗口或框架的名字，表示在其中打开新页面；
- 第三个参数为特性字符串，可选值如下方表格所示；
- replace：布尔值，决定是否取代浏览记录
| 属性 | 值 | 作用 |
|---|---|---|
| fullscreen | yes /no | 浏览器窗口是否最大化。仅限IE |
| height | 数值 | 新窗口的高度。不能小于100 |
| left | 数值 | 新窗口的左坐标。不能是负值 |
| top | 数值 | 新窗口的上坐标。不能是负值 |
| width | 数值 | 新窗口的宽度。不能小于100 |
| location | yes /no | 是否在浏览器窗口中显示地址栏。不同浏览器的默认值不同。 |
| menubar | yes /no | 是否在浏览器窗口中显示菜单栏。默认值为no |
| resizable | yes /no | 是否可以通过拖动浏览器窗口的边框改变其大小。默认值为no |
| scrollbars | yes /no | 如果内容在视口中显示不下，是否允许滚动。默认值为no |
| status | yes /no | 是否在浏览器窗口中显示状态栏。默认值为no |
| toolbar | yes /no | 是否在浏览器窗口中显示工具栏。默认值为no |
5、 间歇与超时调用
超时调用 setTimeout();
语法：setTimeout(function,millisecond)
作用：延迟指定millisecond的时间，调用一次 function。
间歇调用 setlnterval();
setTimeout和setInterval的区别仅在于setTimeout只会被调用一次。
清除定时器的方法同样有两个 clearTimeout 和 clearInterval ，两个方法用于清除不同类型的定时器，接收的参数，起到的效果是一致的。
语法：clearInterval(order) // clearTimeout(order)
作用：根据定时器的序号清除定时器。
注 定时器在调用的时候，都会返回一个数字，这个数字代表着定时器的序号，清除定时器时，order 代表的就是这个序号。
6、对话框
浏览器提供三种弹出框用于展示消息，分别是：alert() 、confirm() 和 prompt()。
alert()可以看做是一个警告提示框，用于向用户展示一条信息，该方法接受一个参数，即显示内容，无返回值。confirm()可以看做是一个选择框，该方法同样接受一个参数，即显示内容，根据用户选择不同的按钮返回不同的布尔值。
-prompt()可以看做是一个输入框 ，该方法接受一个参数，即显示内容，返回值为用户输入的内容。
三、location对象
window.location 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面。
window.location 对象可不带 window 前缀书写。
一些例子：
- window.location.href 返回当前页面的 href (URL)
- window.location.hostname 返回 web 主机的域名
- window.location.pathname 返回当前页面的路径或文件名
- window.location.protocol 返回使用的 web 协议（http: 或 https:）
- window.location.assign 加载新文档
属性
| 属性 | 作用 |
|---|---|
| window.location.href | 返回当前页面的 URL |
| window.location.hostname | 返回（当前页面的）因特网主机的名称 |
| window.location.pathname | 返回当前页面的路径名 |
| window.location.protocol | 返回页面的 web 协议 |
| window.location.port | 返回（当前页面的）互联网主机端口的编号 |
刷新页面
1、刷新当前页面（带有历史纪录时）
a.window.location.assign() 方法加载新文档。
b.通过给location.href赋值的方式
有：
- window,location=“http://www.”
- location.href="http://www."
较常用
2、重新加载文档
location.reload()方法
1）window.location.reload()及window.location.reload(false)
浏览器会先判断服务器端的文件是否发生改变。
若改变：就会从服务器端响应数据给客户端来重新加载；
若未改变：就会直接从客户端的缓存中加载文档。
2）window.location.reload(true)
会直接从服务器端响应数据给客户端
3、使用新文档替换旧文档（不带有历史记录）
window.location.replace()方法
四、nevigator对象
window.navigator 对象包含有关访问者的信息。
五、history对象
window.history 对象包含浏览器历史。
常见history对象方法：
| 方法 | 作用 |
|---|---|
| go(参数) | 前进（正值）/后退（负值） |
| history.back() | 加载历史列表中前一个 URL （等同于在浏览器中点击后退按钮） |
| history.foward() | 加载历史列表中下一个 URL（等同于在浏览器中点击前进按钮） |
六、Screen对象
window.screen 对象包含用户屏幕的信息。
window.screen 对象不带 window 前缀也可以写：
1）screen.width 属性返回以像素计的访问者屏幕宽度。
2）screen.height 属性返回以像素计的访问者屏幕的高度。
3）screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去诸如窗口工具条之类的界面特 征。
4）screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去诸如窗口工具条之类的界面特征。
5）screen.colorDepth 属性返回用于显示一种颜色的比特数。
6）screen.pixelDepth 属性返回屏幕的像素深度。
扫一扫
187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
