浏览器模型/window对象

发表于 分类于 阅读次数：
本文字数： 8.5k 阅读时长 ≈ 7 分钟
  • 浏览器里面，window对象（注意，w为小写）指当前的浏览器窗口。它也是当前页面的顶层对象，即最高一层的对象，所有其他对象都是它的下属
    • 主要有以下三部分
      • window 对象的属性
      • window 对象的方法
      • 事件

1 window 对象的属性

  • 1.1 window.name

  • 1.2 window.closed，window.opener

  • 1.3 window.self，window.window

    • window.self === window // true
    • window.window === window // true

  • 1.4 window.frames，window.length

    • window.frames.length === window.length // true

  • 1.5 window.frameElement

  • 1.6 window.top，window.parent

    • window.top属性指向最顶层窗口，主要用于在框架窗口（frame）里面获取顶层窗口。
    • window.parent属性指向父窗口。如果当前窗口没有父窗口，window.parent指向自身
    • 对于不包含框架的网页，这两个属性等同于window对象

  • 1.7 window.status

  • 1.8 window.devicePixelRatio

  • 1.9 位置大小属性

    • 1 window.screenX，window.screenY

      • window.screenX和window.screenY属性，返回浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离（单位像素）。这两个属性只读

    • 2 window.innerHeight，window.innerWidth

      • window.innerHeight和window.innerWidth属性，返回网页在当前窗口中可见部分的高度和宽度，即“视口”（viewport）的大小（单位像素）。这两个属性只读

    • 3 window.outerHeight，window.outerWidth

      • window.outerHeight和window.outerWidth属性返回浏览器窗口的高度和宽度，包括浏览器菜单和边框（单位像素）。这两个属性只读

    • 4 window.scrollX，window.scrollY

      • window.scrollX属性返回页面的水平滚动距离，window.scrollY属性返回页面的垂直滚动距离，单位都为像素。这两个属性只读
      • 注意，这两个属性的返回值不是整数，而是双精度浮点数。如果页面没有滚动，它们的值就是0

    • 5 window.pageXOffset，window.pageYOffset

      • window.pageXOffset属性和window.pageYOffset属性，是window.scrollX和window.scrollY别名

  • 1.10 组件属性

    • 组件属性返回浏览器的组件对象。这样的属性有下面几个

      • window.locationbar：地址栏对象

      • window.menubar：菜单栏对象

      • window.scrollbars：窗口的滚动条对象

      • window.toolbar：工具栏对象

      • window.statusbar：状态栏对象

      • window.personalbar：用户安装的个人工具栏对象

        1
        2
        3
        4
        5
        6
        window.locationbar.visible     // visible属性是一个布尔值
        window.menubar.visible         // 表示这些组件是否可见。这些属性只读
        window.scrollbars.visible
        window.toolbar.visible
        window.statusbar.visible
        window.personalbar.visible

  • 1.11 全局对象属性

    • 全局对象属性指向一些浏览器原生的全局对象
      • window.document：指向document对象。注意，这个属性有同源限制。只有来自同源的脚本才能读取这个属性。
      • window.location：指向Location对象，用于获取当前窗口的 URL 信息。它等同于document.location属性。
      • window.navigator：指向Navigator对象，用于获取环境信息。
      • window.history：指向History对象，表示浏览器的浏览历史。
      • window.localStorage：指向本地储存的 localStorage 数据。
      • window.sessionStorage：指向本地储存的 sessionStorage 数据。
      • window.console：指向console对象，用于操作控制台。
      • window.screen：指向Screen对象，表示屏幕信息。

  • 1.12 window.isSecureContext

    • window.isSecureContext属性返回一个布尔值，表示当前窗口是否处在加密环境。如果是 HTTPS 协议，就是true，否则就是false。

2 window 对象的方法

  • 2.1 window.alert()，window.prompt()，window.confirm()

    • window.alert()方法的参数只能是字符串，没法使用 CSS 样式，但是可以用\n指定换行
    • window.prompt() 用户点击了“取消”（或者按了 ESC 按钮），则返回值是null
    • window.prompt()方法的第二个参数是可选的，但是最好总是提供第二个参数，作为输入框的默认值
      • 这三个方法都具有堵塞效应，一旦弹出对话框，整个页面就是暂停执行，等待用户做出反应

  • 2.2 window.open(), window.close()，window.stop()

    • window.open()
      • open方法一共可以接受三个参数 window.open(url, windowName, [windowFeatures])
        • url：字符串，表示新窗口的网址。如果省略，默认网址就是about:blank。
        • windowName：字符串，表示新窗口的名字。如果该名字的窗口已经存在，则占用该窗口，不再新建窗口。如果省略，就默认使用_blank，表示新建一个没有名字的窗口。另外还有几个预设值，_self表示当前窗口，_top表示顶层窗口，_parent表示上一层窗口。
        • windowFeatures：字符串，内容为逗号分隔的键值对（详见下文），表示新窗口的参数，比如有没有提示栏、工具条等等。如果省略，则默认打开一个完整 UI 的新窗口。如果新建的是一个已经存在的窗口，则该参数不起作用，浏览器沿用以前窗口的参数
    • window.close() 该方法只对顶层窗口有效，iframe框架之中的窗口使用该方法无效
    • window.stop() window.stop()方法完全等同于单击浏览器的停止按钮，会停止加载图像、视频等正在或等待加载的对象

  • 2.3 window.moveTo()，window.moveBy()

    • window.moveTo()方法用于移动浏览器窗口到指定位置。它接受两个参数，分别是窗口左上角距离屏幕左上角的水平距离和垂直距离，单位为像素
    • window.moveBy方法将窗口移动到一个相对位置。它接受两个参数，分布是窗口左上角向右移动的水平距离和向下移动的垂直距离，单位为像素
      • 为了防止有人滥用这两个方法，随意移动用户的窗口，目前只有一种情况，浏览器允许用脚本移动窗口：该窗口是用window.open方法新建的，并且它所在的 Tab 页是当前窗口里面唯一的。除此以外的情况，使用上面两个方法都是无效的

  • 2.4 window.resizeTo()，window.resizeBy()

    • window.resizeTo()方法用于缩放窗口到指定大小。它接受两个参数，第一个是缩放后的窗口宽度（outerWidth属性，包含滚动条、标题栏等等），第二个是缩放后的窗口高度（outerHeight属性
    • window.resizeBy()方法用于缩放窗口。它与window.resizeTo()的区别是，它按照相对的量缩放，window.resizeTo()需要给出缩放后的绝对大小。它接受两个参数，第一个是水平缩放的量，第二个是垂直缩放的量，单位都是像素
      • chrome 无效

  • 2.5 window.scrollTo()，window.scroll()，window.scrollBy()

    • window.scrollTo()
      • window.scrollTo方法用于将文档滚动到指定位置。它接受两个参数，表示滚动后位于窗口左上角的页面坐标
        • window.scrollTo(x-coord, y-coord)
      • 它也可以接受一个配置对象作为参数
        • window.scrollTo(options)
        • 配置对象options有三个属性
          • top：滚动后页面左上角的垂直坐标，即 y 坐标。
          • left：滚动后页面左上角的水平坐标，即 x 坐标。
          • behavior：字符串，表示滚动的方式，有三个可能值（smooth、instant、auto），默认值为auto
    • window.scroll()
      • window.scroll()方法是window.scrollTo()方法的别名。
    • window.scrollBy()
      • 方法用于将网页滚动指定距离（单位像素）。它接受两个参数：水平向右滚动的像素，垂直向下滚动的像素
        • window.scrollBy(0, window.innerHeight) // 将网页向下滚动一屏
    • 如果不是要滚动整个文档，而是要滚动某个元素，可以使用下面三个属性和方法。
      Element.scrollTop
      Element.scrollLeft
      Element.scrollIntoView()

  • 2.6 window.print()

    • window.print方法会跳出打印对话框，与用户点击菜单里面的“打印”命令效果相同
      • 非桌面设备（比如手机）可能没有打印功能，这时可以这样判断
        • if (typeof window.print === 'function') {// 支持打印功能}

  • 2.7 window.focus()，window.blur()

  • 2.8 window.getSelection()

    • window.getSelection方法返回一个Selection对象，表示用户现在选中的文本
      • var selObj = window.getSelection();
    • 使用Selection对象的toString方法可以得到选中的文本。
      • var selectedText = selObj.toString();

  • 2.9 window.getComputedStyle()，window.matchMedia()

    • window.getComputedStyle()方法接受一个元素节点作为参数，返回一个包含该元素的最终样式信息的对象，详见《CSS 操作》一章。
    • window.matchMedia()方法用来检查 CSS 的mediaQuery语句，详见《CSS 操作》一章

  • 2.10 window.requestAnimationFrame()

    • window.requestAnimationFrame()方法跟setTimeout类似，都是推迟某个函数的执行。不同之处在于，setTimeout必须指定推迟的时间，window.requestAnimationFrame()则是推迟到浏览器下一次重流时执行，执行完才会进行下一次重绘。重绘通常是 16ms 执行一次，不过浏览器会自动调节这个速率，比如网页切换到后台 Tab 页时，requestAnimationFrame()会暂停执行。
    • 如果某个函数会改变网页的布局，一般就放在window.requestAnimationFrame()里面执行，这样可以节省系统资源，使得网页效果更加平滑。因为慢速设备会用较慢的速率重流和重绘，而速度更快的设备会有更快的速率。
    • 该方法接受一个回调函数作为参数。
      • window.requestAnimationFrame(callback)

  • 2.11 window.requestIdleCallback()

    • window.requestIdleCallback()跟setTimeout类似，也是将某个函数推迟执行，但是它保证将回调函数推迟到系统资源空闲时执行。也就是说，如果某个任务不是很关键，就可以使用window.requestIdleCallback()将其推迟执行，以保证网页性能
      • 它跟window.requestAnimationFrame()的区别在于，后者指定回调函数在下一次浏览器重排时执行，问题在于下一次重排时，系统资源未必空闲，不一定能保证在16毫秒之内完成；window.requestIdleCallback()可以保证回调函数在系统资源空闲时执行
    • 该方法接受一个回调函数和一个配置对象作为参数。配置对象可以指定一个推迟执行的最长时间，如果过了这个时间，回调函数不管系统资源有无空虚，都会执行
      • window.requestIdleCallback(callback[, options])
        • callback参数是一个回调函数。该回调函数执行时，系统会传入一个IdleDeadline对象作为参数。IdleDeadline对象有一个didTimeout属性（布尔值，表示是否为超时调用）和一个timeRemaining()方法（返回该空闲时段剩余的毫秒数）
1
2
3
4
5
6
7
requestIdleCallback(myNonEssentialWork);

function myNonEssentialWork(deadline) {
  while (deadline.timeRemaining() > 0) {
    doWorkIfNeeded();
  }
}
  • requestIdleCallback(processPendingAnalyticsEvents, { timeout: 2000 })
    • 如果由于超时导致回调函数执行，则deadline.timeRemaining()返回0，deadline.didTimeout返回true
    • 如果多次执行window.requestIdleCallback()，指定多个回调函数，那么这些回调函数将排成一个队列，按照先进先出的顺序执行

3 事件

  • 3.1 load 事件和 onload 属性

    • load事件发生在文档在浏览器窗口加载完毕时。window.onload属性可以指定这个事件的回调函数

  • 3.2 error 事件和 onerror 属性

    • 浏览器脚本发生错误时，会触发window对象的error事件。我们可以通过window.onerror属性对该事件指定回调函数
1
2
3
window.onerror = function (message, filename, lineno, colno, error) {
  console.log("出错了！--> %s", error.stack);
};

  • 由于历史原因，window的error事件的回调函数不接受错误对象作为参数，而是一共可以接受五个参数，它们的含义依次如下

    • 出错信息
    • 出错脚本的网址
    • 行号
    • 列号
    • 错误对象
    • 代码的crossorigin=”anonymous”表示，读取文件不需要身份信息，即不需要 cookie 和 HTTP 认证信息

  • 4.3 window 对象的事件监听属性

    • 除了具备元素节点都有的 GlobalEventHandlers 接口，window对象还具有以下的事件监听函数属性
      • window.onafterprint：afterprint事件的监听函数。
      • window.onbeforeprint：beforeprint事件的监听函数。
      • window.onbeforeunload：beforeunload事件的监听函数。
      • window.onhashchange：hashchange事件的监听函数。
      • window.onlanguagechange: languagechange的监听函数。
      • window.onmessage：message事件的监听函数。
      • window.onmessageerror：MessageError事件的监听函数。
      • window.onoffline：offline事件的监听函数。
      • window.ononline：online事件的监听函数。
      • window.onpagehide：pagehide事件的监听函数。
      • window.onpageshow：pageshow事件的监听函数。
      • window.onpopstate：popstate事件的监听函数。
      • window.onstorage：storage事件的监听函数。
      • window.onunhandledrejection：未处理的 Promise 对象的reject事件的监听函数。
      • window.onunload：unload事件的监听函数。

4 多窗口操作

  • 4.1 窗口的引用

    • 各个窗口之中的脚本，可以引用其他窗口。浏览器提供了一些特殊变量，用来返回其他窗口
      • top：顶层窗口，即最上层的那个窗口
      • parent：父窗口
      • self：当前窗口，即自身
    • 下面的代码让父窗口的访问历史后退一次
      • window.parent.history.back()
    • 与这些变量对应，浏览器还提供一些特殊的窗口名，供window.open()方法、a 标签、form 标签等引用。
      • _top：顶层窗口
      • _parent：父窗口
      • _blank：新窗口
        • <a href="somepage.html" target="_top">Link</a>

  • 4.2 iframe 元素

    • 对于iframe嵌入的窗口，document.getElementById方法可以拿到该窗口的 DOM 节点，然后使用contentWindow属性获得iframe节点包含的window对象
      • frame.contentWindow可以拿到子窗口的window对象。
      • iframe 元素的contentDocument属性，可以拿到子窗口的document对象
      • iframe 窗口内部，使用window.parent引用父窗口。如果当前页面没有父窗口，则window.parent属性返回自身
      • iframe 窗口的window对象，有一个frameElement属性，返回iframe 在父窗口中的 DOM 节点

  • 4.3 window.frames 属性

    • window.frames属性返回一个类似数组的对象，成员是所有子窗口的window对象。可以使用这个属性，实现窗口之间的互相引用。比如，frames[0]返回第一个子窗口，frames[1].frames[2]返回第二个子窗口内部的第三个子窗口，parent.frames[1]返回父窗口的第二个子窗口。
    • 注意，window.frames每个成员的值，是框架内的窗口（即框架的window对象），而不是iframe标签在父窗口的 DOM 节点。如果要获取每个框架内部的 DOM 树，需要使用window.frames[0].document的写法
    • 另外，如果 iframe 元素设置了name或id属性，那么属性值会自动成为全局变量，并且可以通过window.frames属性引用，返回子窗口的window对象。
    • 另外，name属性的值会自动成为子窗口的名称，可以用在window.open方法的第二个参数，或者 a 和frame 标签的target属性。
1
2
3
// HTML 代码为 <iframe id="myFrame">
window.myFrame // [HTMLIFrameElement]
frames.myframe === myFrame // true
0%