【高程3】8 BOM - 重读随笔
作者：互联网
8 BOM
8.1 window对象
既是通过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。
8.1.1 全局作用域
所有在全局作用域中声明的变量、函数都会变成 window 对象的属性和方法。
全局变量不能通过 delete 操作符删除，而直接在 window 对象上的定义的属性可以。
var age = 29; window.color = "red";
//在 IE < 9 时抛出错误，在其他所有浏览器中都返回 false
delete window.age;
//在 IE < 9 时抛出错误，在其他所有浏览器中都返回 true
delete window.color; // returns true
alert(window.age); //29
alert(window.color); //undefined
8.1.3 窗口位置
IE、Safari、Opera 和 Chrome 都提供了screenLeft 和 screenTop 属性，分别用于表示窗口相对于屏幕左边和上边的位置。
Firefox 则在screenX 和 screenY 属性中提供相同的窗口位置信息，Safari 和 Chrome 也同时支持这两个属性。Opera 虽然也支持 screenX 和 screenY 属性，但与 screenLeft 和 screenTop 属性并不对应。
var leftPos = (typeof window.screenLeft == "number") ?
window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ?
window.screenTop : window.screenY;
8.1.4 窗口大小
IE9+、Firefox、Safari、Opera 和 Chrome 均为此提供了 4 个属性：innerWidth、innerHeight、outerWidth 和 outerHeight。
8.1.5 导航和打开窗口
window.open()方法既可以导航到一个特定的 URL，也可以打开一个新的浏览器窗口。
可以接收 4 个参数：要加载的 URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。
第三个参数是一个逗号分隔的设置字符串，表示在新窗口中都显示哪些特性。
| 设 置 | 值 | 说 明 |
|---|---|---|
| fullscreen | yes或no | 表示浏览器窗口是否最大化。仅限IE |
| height | 数值 | 表示新窗口的高度。不能小于100 |
| left | 数值 | 表示新窗口的左坐标。不能是负值 |
| location | yes或no | 表示是否在浏览器窗口中显示地址栏。不同浏览器的默认值不同。如果设置为no，地址栏可能会隐藏，也可能会被禁用（取决于浏览器） |
| menubar | yes或no | 表示是否在浏览器窗口中显示菜单栏。默认值为no |
| resizable | yes或no | 表示是否可以通过拖动浏览器窗口的边框改变其大小。默认值为no |
| scrollbars | yes或no | 表示如果内容在视口中显示不下，是否允许滚动。默认值为no |
| status | yes或no | 表示是否在浏览器窗口中显示状态栏。默认值为no |
| toolbar | yes或no | 表示是否在浏览器窗口中显示工具栏。默认值为no |
| top | 数值 | 表示新窗口的上坐标。不能是负值 |
| width | 数值 | 表示新窗口的宽度。不能小于100 |
8.1.6间歇调用和超时调用
setTimeout() / clearTimeout()
setInterval() / clearInterval()
8.1.7系统对话框
alert()、confirm()和 prompt()
if (confirm("Are you sure?")) {
alert("I'm so glad you're sure! ");
} else {
alert("I'm sorry to hear you're not sure. ");
}
var result = prompt("What is your name? ", "");
if (result !== null) {
alert("Welcome, " + result);
}
还有两个可以通过 JavaScript 打开的对话框
//显示“打印”对话框
window.print();
//显示“查找”对话框
window.find();
8.2 location 对象
location 是最有用的 BOM 对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。
既是 window 对象的属性，也是document 对象的属性，window.location 和 document.location 引用的是同一个对象。
| 属性名 | 例子 | 说 明 |
|---|---|---|
| hash | “#contents” | 返回URL中的hash（#号后跟零或多个字符），如果URL中不包含散列，则返回空字符串 |
| host | “www.wrox.com:80” | 返回服务器名称和端口号（如果有） |
| hostname | “www.wrox.com” | 返回不带端口号的服务器名称 |
| href | “http:/www.wrox.com” | 返回当前加载页面的完整URL。而location对象的toString()方法也返回这个值 |
| pathname | “/WileyCDA/” | 返回URL中的目录和（或）文件名 |
| port | “8080” | 返回URL中指定的端口号。如果URL中不包含端口号，则这个属性返回空字符串 |
| protocol | “http:” | 返回页面使用的协议。通常是http:或https: |
| search | “?q=javascript” | 返回URL的查询字符串。这个字符串以问号开头 |
8.2.1 查询字符串参数
function getQueryStringArgs() {
//取得查询字符串并去掉开头的问号
var qs = location.search.length > 0 ? location.search.substring(1) : "",
//保存数据的对象args = {},
//取得每一项
items = qs.length ? qs.split("&") : [],
item = null,
name = null,
value = null,
//在 for 循环中使用
i = 0,
len = items.length,
args = {};
//逐个将每一项添加到 args 对象中
for (i = 0; i < len; i++) {
item = items[i].split("=");
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1]);
if (name.length) {
args[name] = value;
}
}
return args;
}
8.2.2 位置操作
使用 location 对象可以通过很多方式来改变浏览器的位置。
// 立即打开新 URL 并在浏览器的历史记录中生成一条记录
location.assign("http://www.wrox.com");
//假设初始 URL 为 http://www.wrox.com/WileyCDA/
//将 URL 修改为"http://www.wrox.com/WileyCDA/#section1"
location.hash = "#section1";
//将 URL 修改为"http://www.wrox.com/WileyCDA/?q=javascript"
location.search = "?q=javascript";
//将 URL 修改为"http://www.yahoo.com/WileyCDA/"
location.hostname = "www.yahoo.com";
//将 URL 修改为"http://www.yahoo.com/mydir/"
location.pathname = "mydir";
//将 URL 修改为"http://www.yahoo.com:8080/WileyCDA/"
location.port = 8080;
replace()方法
只接受一个参数，即要导航到的 URL；结果虽然会导致浏览器位置改变，但不会在历史记录中生成新记录。
reload()，重新加载当前显示的页面。
location.reload(); //重新加载（有可能从缓存中加载）
location.reload(true); //重新加载（从服务器重新加载）
8.3 navigator 对象
| 属性或方法 | 说明 |
|---|---|
| appCodeName | 浏览器的名称。通常都是Mozilla，即使在非Mozilla浏览器中也是如此 |
| appMinorVersion | 次版本信息 |
| appName | 完整的浏览器名称 |
| appVersion | 浏览器的版本。一般不与实际的浏览器版本对应 |
| buildID | 浏览器编译版本 |
| cookieEnabled | 表示cookie是否启用 |
| cpuClass | 客户端计算机中使用的CPU类型（x86、68K、Alpha、PPC或Other） |
| javaEnabled() | 表示当前浏览器中是否启用了Java |
| language | 浏览器的主语言 |
| mimeTypes | 在浏览器中注册的MIME类型数组 |
| onLine | 表示浏览器是否连接到了因特网 |
| opsProfile | 似乎早就不用了。查不到相关文档 |
| oscpu | 客户端计算机的操作系统或使用的CPU |
| platform | 浏览器所在的系统平台 |
| plugins | 浏览器中安装的插件信息的数组 |
| preference() | 设置用户的首选项 |
| product | 产品名称（如 Gecko） |
| productSub | 关于产品的次要信息（如Gecko的版本） |
| register- ContentHandler() | 针对特定的MIME类型将一个站点注册为处理程序 |
| register- ProtocolHandler() | 针对特定的协议将一个站点注册为处理程序 |
| securityPolicy | 已经废弃。安全策略的名称。为了与Netscape Navigator 4向后兼容而保留下来 |
| systemLanguage | 操作系统的语言 |
| taintEnabled() | 已经废弃。表示是否允许变量被修改（taint）。为了与Netscape Navigator 3向后兼容而保留下来 |
| userAgent | 浏览器的用户代理字符串 |
| userLanguage | 操作系统的默认语言 |
| userProfile | 借以访问用户个人信息的对象 |
| vendor | 浏览器的品牌 |
| vendorSub | 有关供应商的次要信息 |
8.4 screen 对象
| 属 性 | 说 明 |
|---|---|
| availHeight | 屏幕的像素高度减系统部件高度之后的值（只读） |
| availLeft | 未被系统部件占用的最左侧的像素值（只读） |
| availTop | 未被系统部件占用的最上方的像素值（只读） |
| availWidth | 屏幕的像素宽度减系统部件宽度之后的值（只读） |
| bufferDepth | 读、写用于呈现屏外位图的位数 |
| colorDepth | 用于表现颜色的位数；多数系统都是32（只读） |
| deviceXDPI | 屏幕实际的水平DPI（只读） |
| deviceYDPI | 屏幕实际的垂直DPI（只读） |
| fontSmoothingEnabled | 表示是否启用了字体平滑（只读） |
| height | 屏幕的像素高度 |
| left | 当前屏幕距左边的像素距离 |
| logicalXDPI | 屏幕逻辑的水平DPI（只读） |
| logicalYDPI | 屏幕逻辑的垂直DPI（只读） |
| pixelDepth | 屏幕的位深（只读） |
| top | 当前屏幕距上边的像素距离 |
| updateInterval | 读、写以毫秒表示的屏幕刷新时间间隔 |
| width | 屏幕的像素宽度 |
8.5 history 对象
go():
//后退一页
history.go(-1);
//前进一页
history.go(1);
//前进两页
history.go(2);
也可以给 go()方法传递一个字符串参数，此时浏览器会跳转到历史记录中包含该字符串的第一个位置——可能后退，也可能前进，具体要看哪个位置最近。
//跳转到最近的wrox.com 页面
history.go("wrox.com");
两个简写方法 back()和 forward()
//后退一页
history.back();
//前进一页
history.forward();
length 属性，保存着历史记录的数量。
if (history.length == 0){
//这应该是用户打开窗口后的第一个页面
}
8.6 小结
浏览器对象模型（BOM）以 window 对象为依托，表示浏览器窗口以及页面可见区域。同时，window 对象还是 ECMAScript 中的 Global 对象，因而所有全局变量和函数都是它的属性，且所有原生的构造函数及其他函数也都存在于它的命名空间下。本章讨论了下列 BOM 的组成部分。
- 在使用框架时，每个框架都有自己的 window 对象以及所有原生构造函数及其他函数的副本。每个框架都保存在 frames 集合中，可以通过位置或通过名称来访问。
- 有一些窗口指针，可以用来引用其他框架，包括父框架。
- top 对象始终指向最外围的框架，也就是整个浏览器窗口。
- parent 对象表示包含当前框架的框架，而 self 对象则回指 window。
- 使用 location 对象可以通过编程方式来访问浏览器的导航系统。设置相应的属性，可以逐段或整体性地修改浏览器的 URL。
- 调用 replace()方法可以导航到一个新 URL，同时该 URL 会替换浏览器历史记录中当前显示的页面。
- navigator 对象提供了与浏览器有关的信息。到底提供哪些信息，很大程度上取决于用户的浏览器；不过，也有一些公共的属性（如 userAgent）存在于所有浏览器中。
BOM 中还有两个对象：screen 和 history，但它们的功能有限。screen 对象中保存着与客户端显示器有关的信息，这些信息一般只用于站点分析。history 对象为访问浏览器的历史记录开了一个小缝隙，开发人员可以据此判断历史记录的数量，也可以在历史记录中向后或向前导航到任意页面。
标签：浏览器,URL,对象,window,BOM,随笔,com,重读,location 来源： https://blog.csdn.net/github_39365750/article/details/120657137