AitSchool

BOM

window

  • 地址栏操作
    • location.href
    • location.reload
  • 交互操作
    • alert
    • confirm
    • prompt
  • 大小和位置
    • outerHeight、outerWidth
    • innerHeight、innerWidth
  • 滚动
    • scroll
    • scrollBy
    • scrollTo
    • scrollX
    • scrollY
  • 窗口
    • open
    • opener
    • parent

location

location 是最有用的 BOM 对象之一，它提供了与当前窗口中加载的文档有关的信息。还提供了一些导航功能。

location属性

下面是 location 对象的所有属性：

假设当前的 URL 是: http://example.com:1234/test.htm#part2：
hash    设置或返回从井号 (#) 开始的 URL（锚）。//#part2
host    设置或返回主机名和当前 URL 的端口号。//example.com:1234
hostname    设置或返回当前 URL 的主机名。//example.com
href    设置或返回完整的 URL。//http://example.com:1234/test.htm#part2：
pathname    设置或返回当前 URL 的路径部分。///test/test.htm
port    设置或返回当前 URL 的端口号。//1234
protocol    设置或返回当前 URL 的协议。//http:

假设当前的 URL 是: http://www.w3school.com.cn/tiy/t.asp?f=hdom_loc_search
search    设置或返回从问号 (?) 开始的 URL（查询部分）。//?f=hdom_loc_search

assign()方法

为其传递一个 URL，这样就可以立即打开新 URL 并在浏览器的历史纪录中生成一条记录。也可以用 location.href 和 window.location 设置为一个 URL 的值。另外，也可以修改 location 对象的其他属性来改变 URL。这样会在浏览器的历史纪录中生成一条新的记录。

location.assign("http://www.baidu.com");

replace()方法

会导致浏览器位置的改变，但不回在历史纪录中生成新的记录。并且用户不能返回到值钱的页面。

// 三秒钟之后跳转到新的页面。
setTimeout(function(){
    location.replace("http://www.baidu.com");
}, 3000)

reload()方法

重新加载，接收一个可选参数，如下：

location.reload(); //可能从缓存中加载
location.reload(true); //从服务器重新加载

下面是存在于所有浏览器中的属性和方法

属性：
appCodeName    返回浏览器的代码名。
appMinorVersion    返回浏览器的次级版本。
appName    返回浏览器的名称。
appVersion    返回浏览器的平台和版本信息。
browserLanguage    返回当前浏览器的语言。
cookieEnabled    返回指明浏览器中是否启用 cookie 的布尔值。
cpuClass    返回浏览器系统的 CPU 等级。
onLine    返回指明系统是否处于脱机模式的布尔值。
platform    返回运行浏览器的操作系统平台。
systemLanguage    返回 OS 使用的默认语言。
userAgent    返回由客户机发送服务器的 user-agent 头部的值。
userLanguage    返回 OS 的自然语言设置。

方法：
javaEnabled()    规定浏览器是否启用 Java。
taintEnabled()    规定浏览器是否启用数据污点 (data tainting)。

如

console.log(window.navigator);

/*
[Log] Navigator (repetition.html, line 14)
appCodeName: "Mozilla"
appName: "Netscape"
appVersion: "5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/600.8.9 (KHTML, like Gecko) (Coda, like Safari)"
cookieEnabled: true
geolocation: Geolocation
language: "zh-cn"
mimeTypes: MimeTypeArray
onLine: true
platform: "MacIntel"
plugins: PluginArray
product: "Gecko"
productSub: "20030107"
userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/600.8.9 (KHTML, like Gecko) (Coda, like Safari)"
vendor: "Apple Computer, Inc."
vendorSub: ""
__proto__: NavigatorPrototype
*/

screen

screen 对象表明客户端信息的能力

availHeight    返回显示屏幕的高度 (除 Windows 任务栏之外)。
availWidth    返回显示屏幕的宽度 (除 Windows 任务栏之外)。

height    返回显示屏幕的高度。
width    返回显示器屏幕的宽度。

bufferDepth    设置或返回调色板的比特深度。
colorDepth    返回目标设备或缓冲器上的调色板的比特深度。

deviceXDPI    返回显示屏幕的每英寸水平点数。
deviceYDPI    返回显示屏幕的每英寸垂直点数。
logicalXDPI    返回显示屏幕每英寸的水平方向的常规点数。
logicalYDPI    返回显示屏幕每英寸的垂直方向的常规点数。
fontSmoothingEnabled    返回用户是否在显示控制面板中启用了字体平滑。

pixelDepth    返回显示屏幕的颜色分辨率（比特每像素）。
updateInterval    设置或返回屏幕的刷新率。

history

可以通过 history 对象借由用户访问过的页面列表，在不知道实际 URL 的情况下实现后退和前进。

go()方法

接收一个参数，表示向后或向前跳转的页面数的一个整数值。负数表示向后跳转，正数表示向前跳转，也可以传递给该参数一个字符串，如：

history.go(-1); //后退一页
history.go(1); //前进一页
history.go(3); //前进三页
history.go("baidu.com"); //跳转到最近的 baidu.com 页面

back()和forward()方法

这两个方法可以模仿浏览器的后退和前进按钮如：

history.back(); //后退一页

length属性

该属性保存着历史纪录的数量。对于加载的第一个页面而言，history.length 为0，通过下面的代码可以测试该属性的值，可以确定用户是否一开始就打开了你的页面：

if (history.length == 0){
    //第一个页面
}

history对象虽然不常用，但在创建自定义的“后退”和“前进”的按钮，以及检测当前页面是不是用户历史纪录中的第一个页面时，还是必须使用它的。

← 网络 →