JavaScript高级程序设计 第8章 BOM 对象

8.1 window 对象

8.1.1 全局作用域

• window 对象同时扮演着 ECMAScript 中的 Global 对象的角色
• 在全局作用域定义的变量和函数，它们会被自动归在 window 对象名下
• 全局变量和 window对象上直接定义的变量的差别是：
  • 全局变量不能通过 delete 删除，因为它的 configurable 为 false
  • window 对象上直接定义的变量可以通过 delete 删除
  • 访问声明的变量会报错，但是访问 window 下未声明的属性不会，因为是通过查询 window 对象下的属性

 

8.1.2 窗口关系及框架

• 如果页面包含框架，则每个框架都拥有自己的 window 对象，并且保存在 frames 集合中。
• 在 frames 集合中，可以通过数值索引（从 0 开始，从左至由，从上到下）。
• 也可以通过框架名称来访问相应的 window 对象。每个 window 对象都有一个 name 属性，其中包含框架的名称。

<frameset rows="160, *"> // 第一个占160像素，第二个自适应占满剩下的全部
  <frame src="./1.html" name="topFrame">
  <frameset cols="50%,50%">
    <frame src="./2.html" name="leftFrame">
    <frame src="./3.html" name="rightFrame">
  </frameset>
</frameset>

 

• top对象始终指向最高（最外）层的框架，也就是浏览器窗口。其中的 window 对象指向的都是那个框架的特定实例。

 

• parent对象：parent对象始终指向当前框架的直接上层框架。在某些情况下，parent 有可能等于 top，但在没有框架的情况下 parent 一定等于 top。
• 除非最高层窗口是通过 window.open() 打开的，否则其 window 对象的 name 属性不会包含任何值。

 

• self 对象。它始终指向 window 

 

8.1.3 窗口位置

表示窗口左边和上边的位置

• screenLeft、screenTop
  • 支持浏览器： IE、Safari、Chrome、Opera
• screenX、screenY
  • 支持浏览器：Firefox、Safari、Chrome

 

跨浏览器取得窗口左边和上边的位置：

const leftPos = (typeof window.screenLeft === 'number') ? window.screenLeft : window.screenX
const topPos = (typeof window.screenTop === 'number') ? window.screenTop : window.screenY

 

问题：

• Opera、IE 返回的是屏幕距离 页面可视区域的距离（返回的高度会少了浏览器工具栏的像素高度）
• Chrome、Firefox、Safari 返回的是屏幕距离 整个浏览器窗口距离的距离

 

• moveTo(x, y)：把浏览器窗口移动到 x，y 坐标的位置。
• moveBy(x, y)：把浏览器窗口向左移动 x 的单位，向下移动 y 的单位。

 

8.1.4 窗口大小

• innerWidth、innerHeight：表示该容器中页面视图的大小（减去边框宽度）
• outerWidth、outerHeight：返回浏览器窗口本身尺寸（每个浏览器返回的值不一样）

let pageWidth = window.innerWidth, // IE8及以上不支持
  pageHeight = window.innerHeight
if (typeof pageWidth !== 'number') {
  if (document.compatMode === 'CSS1Compat') { // 判断页面是否属于标准模式
    pageWidth = document.documentElement.clientWidth
    pageHeight = document.documentElement.clientHeight
  } else {
    clientWidth = document.body.clientWidth
    pageHeight = document.body.clientHeight
  }
}

 

• 移动设备
  • innerHeight、innerWidth 保存的是可见视口（屏幕上可见页面区域大小）
    • 移动 IE 不支持，只能通过 document.documentElement.clientWidth 访问
• 在其他浏览器中，document.documentElement 保存的是布局视口，即渲染后页面的实际大小
  • 移动 IE 的话保存在 document.body 之中

 

8.1.5 导航和打开窗口

• window.open() 既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口
  • 参数：
    • URL
    • 打开的窗口目标或 _self、_parent、_top、_blank
    • 以逗号分隔的特性字符串，表示在新窗口都显示哪些特性
    • 是否取代浏览器历史记录中当前页面的布尔值
  • 返回值：返回一个指向新窗口的引用
  • PS：
    • 通过 window.open() 打开的新窗口可以调整大小或移动位置。
    • 新创建的 window 对象有一个 opener 属性，保存这打开它的原始窗口。如果把这个属性设置为 null，则表示不需要与原来的窗口进行通信。一旦切断，将无法恢复。
  • 弹出窗口屏蔽程序：
    • 如果是浏览器窗口内置的屏蔽程序阻止弹出的窗口，那么返回值有可能为null
    • 如果是浏览器插件或其他程序阻止的，window.open() 通常会抛出一个错误。
    • 以下是准确地检测出弹出窗口是否被屏蔽

let blocked = false
try {
  let wroxWin = window.open('https://www.baidu.com', '_black')
  if (wroxWin == null) {
    blocked = true
  }
} catch (e) {
  blocked = true
}

if (blocked)
  console.log('The popup was blocked')

 

 

 

8.1.6 间歇调用和超时调用

JavaScript 是一个单线程的解释器，因此在一定时间内只能执行一段代码。就有了 JavaScript 任务队列，这些任务会按照它们添加到队列的顺序执行。

 

• 超时调用：setTImeout()
• 间歇调用：setInterval()
  • 超时调用和间接调用的第一个参数都是要执行的代码，第二个参数表示告诉 JS 再过多久把当前任务添加到队列中。
  • 返回值是一个 ID(数字)，表示超时调用，这个超时调用 ID 是计划执行代码的唯一标识，可以用它来取消超时调用。可以通过 clearTimeout(ID) 来取消超时调用
  • 在开发中一般很少使用 setInterval 因为间接调用的后一个调用可以在前一个调用之前执行

 

8.2 location 对象

• 属性：
  • hash（哈希值带#）
  • host（主机名）
  • hostname（带端口主机名）
  • href（链接）
  • pathname（文件路径）
  • port（端口）
  • protocol（协议）
  • search（查询字符串）
• 方法：
  • assign(url)：跳转到url，有历史记录，location.href 底层就是调用这个函数
  • replace(url)：跳转到url，无历史记录
  • reload(boolean)：重新加载当前页面，如果不传 true 有可能从缓存加载，传 true 从服务器重新加载

 

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
    
    items.forEach(item => {
        item = item.split('=')
        name = item[0].decodeURIComponent(item[0])
        value = item[1].decodeURIComponent(item[0])
        if(name.length) {
            args[name] = value
        }
    })
    return args
}

 

 

8.3 navigation 对象

8.3.1 检测插件

// IE 中无效

function hasPlugin(name) {
    name = name.toLowerCase()
    for (let i = 0; i < navigator.plugins.length; i++) {
        if (navigator.plugins[i].toLowerCase().indexOf(name) >-1)
            return true
    }
    return false
}

// IE 不支持 Netscape 插件，只能用专有的 ActiveXObject
// IE 中检测插件
function hasIEPlugin(name) {
    try {
        new ActiveXObject(name)
        return true
    } catch(e) {
        return false
    }
}

 

 

8.3.2 处理注册程序（没用过）

navigator.registerContentHandler

navigator.registerProtocoIHandler

这两个方法可以让一个站点指明它可以处理特定类型的信息。

 

8.4 screen 对象

主要用来报错浏览器窗口外部显示器信息

 

8.5 history 对象

• history.go(1)：前进一页等同于 history.forward()
• history.go(-1)：后退一页等同于 history.back()
• 也可以给 go() 方法传递一个字符串，此时浏览器会跳转到历史记录中包含该字符串的第一个位置（可能前进，也可以后退）
• history.length
  • 保存着历史记录的数量，包括前进和后退的记录，当 length = 0 的时候为第一个打开的页面