JavaScript 复习之 window对象

浏览器里面，window对象指当前浏览器窗口。他是当前页面的顶层对象。

1、window 对象的属性

• window.name表示当前浏览器窗口的名字。
• window.closed返回一个布尔值，表示窗口是否关闭
• window.opener属性表示打开当前窗口的父窗口，若是没有，返回null
• window.self和window.window属性都指向窗口自己。
• window.frames返回一个类数组对象，成员为页面内全部框架窗口，包括frame元素和iframe元素。window.frames[0]表示页面中的第一个框架窗口。
• window.frameElement主要用于当前窗口嵌在另外一个网页的状况，返回当前窗口所在的那个元素节点。
• window.top指向最顶层窗口，主要用于框架窗口里面获取顶层窗口
• window.parent指向父窗口。若是没有父窗口，指向自身。

位置大小属性

• window.screenX，window.screenY返回浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离（单位像素），属性只读
• window.innerHeight，window.innerWidth返回网页在当前窗口中可见部分的高度和宽度（单位像素）。
• window.outerHeight，window.outerWidth属性返回浏览器窗口的高度和宽度，包括浏览器菜单和边框（单位像素）
• window.scrollX，window.scrollY返回页面的水平滚动距离和垂直滚动距离
• window.pageXOffset，window.pageYOffset分别是上面两个属性的别名

组件属性

• window.locationbat地址栏对象
• window.menubar菜单栏对象
• window.scrollbars窗口的滚动条对象
• window.toolbar工具栏对象
• window.statusbar状态栏对象
• window.personalbar用户安装的我的工具栏对象

这些对象的visible属性是一个布尔值，表示这些组件是否可见。这些属性只读。

window 对象的方法

• window.alert()弹出对话框，只有要给肯定按钮，每每用来通知用户某些信息。

• window.prompt()弹出对话框，提示文字的下方，有一个输入框，要求用户输入信息，并有“肯定”和“取消”两个按钮。

var result = prompt('您的年龄？', 25)
//方法的第二个参数是可选的，可是最好老是提供第二个参数，做为输入框的默认值。
复制代码

• window.confirm()弹出的对话框，除了提示信息以外，只有“肯定”和“取消”两个按钮，每每用来征询用户是否赞成。

var okay = confirm('Please confirm this message.');
if (okay) {
  // 用户按下“肯定”
} else {
  // 用户按下“取消”
}
复制代码

• window.open()用于新建另外一个浏览器窗口。

方法接受三个参数

window.open(url,windowName,[windowFeatures])
复制代码

windowFeatures：字符串，内容为逗号分隔的键值对（详见下文），表示新窗口的参数，好比有没有提示栏、工具条等等。 第三个参数能够设定以下属性。

• 参数以下：

  • left：新窗口距离屏幕最左边的距离（单位像素）。注意，新窗口必须是可见的，不能设置在屏幕之外的位置。
  • top：新窗口距离屏幕最顶部的距离（单位像素）。
  • height：新窗口内容区域的高度（单位像素），不得小于100。
    • width：新窗口内容区域的宽度（单位像素），不得小于100。
  • outerHeight：整个浏览器窗口的高度（单位像素），不得小于100。
  • outerWidth：整个浏览器窗口的宽度（单位像素），不得小于100。
  • menubar：是否显示菜单栏。
  • toolbar：是否显示工具栏。
  • location：是否显示地址栏。
  • personalbar：是否显示用户本身安装的工具栏。
  • status：是否显示状态栏。
  • dependent：是否依赖父窗口。若是依赖，那么父窗口最小化，该窗口也最小化；父窗口关闭，该窗口也关闭。
  • minimizable：是否有最小化按钮，前提是dialog=yes。
  • noopener：新窗口将与父窗口切断联系，即新窗口的window.opener属性返回null，父窗口的window.open()方法也返回null。
  • resizable：新窗口是否能够调节大小。
  • scrollbars：是否容许新窗口出现滚动条。
  • dialog：新窗口标题栏是否出现最大化、最小化、恢复原始大小的控件。
  • titlebar：新窗口是否显示标题栏。
  • alwaysRaised：是否显示在全部窗口的顶部。
  • alwaysLowered：是否显示在父窗口的底下。
  • close：新窗口是否显示关闭按钮。

• window.close方法用于关闭当前窗口，通常只用来关闭window.open方法新建的窗口。

• window.stop()方法彻底等同于单击浏览器的中止按钮，会中止加载图像、视频等正在或等待加载的对象。

• window.moveTo()方法用于移动浏览器窗口到指定位置。它接受两个参数，分别是窗口左上角距离屏幕左上角的水平距离和垂直距离，单位为像素。

• window.moveBy()方法将窗口移动到一个相对位置。它接受两个参数，分布是窗口左上角向右移动的水平距离和向下移动的垂直距离，单位为像素。

• window.resizeTo()方法用于缩放窗口到指定大小。接受两个参数，第一个是缩放后窗口的宽度（outWidth属性），第二个是缩放后窗口高度（outHeight属性）

window.resizeTo(
  window.screen.availWidth / 2,
  window.screen.availHeight / 2
)
//上面代码将当前窗口缩放到，屏幕可用区域的一半宽度和高度。
复制代码

• window.resizeBy()方法用于缩放窗口。它与window.resizeTo()的区别是，它按照相对的量缩放，window.resizeTo()须要给出缩放后的绝对大小。它接受两个参数，第一个是水平缩放的量，第二个是垂直缩放的量，单位都是像素。

window.resizeBy(-200, -200)
//上面的代码将当前窗口的宽度和高度，都缩小200像素。
复制代码

• window.scrollTo()方法用于将文档滚动到指定位置。接受两个参数，表示滚动后位于窗口左上角的页面坐标。也可接受一个配置对象做为参数。

window.scrollTo(options)

window.scrollTo({
  top: 1000,
  behavior: 'smooth'
});
复制代码

options有三个属性。

• top：滚动后页面左上角的垂直坐标，即 y 坐标。

• left：滚动后页面左上角的水平坐标，即 x 坐标。

• behavior：字符串，表示滚动的方式，有三个可能值（smooth、instant、auto），默认值为auto。

• window.scrollBy()方法用于将网页滚动指定距离（单位像素）。它接受两个参数：水平向右滚动的像素，垂直向下滚动的像素。

• window.print()调用打印

• window.focus()方法会激活窗口，使其得到焦点，出如今其余窗口的前面。

• window.blur()方法将焦点从窗口移除。

window.requestAnimationFrame()

方法跟setTimeout相似，都是推迟某个函数的执行，不一样之处，是setTimeout必须指定推迟的时间，window.requestAnimationFrame()则是推迟到浏览器下次重流时执行，执行完才会进行下次重绘。

若是某个函数改变了网页布局，通常放在window.requestAnimationFrame()里面执行，这样能够节省系统资源，是网页效果更加平滑。

该方法接受一个回调函数做为参数

window.requestAnimationFrame(callback)
复制代码

上面callback回调函数执行时，他的参数时系统传入的高精度时间戳，单位是毫秒，表示网页加载的时间。

window.requestAnimationFrame()返回值是一个整数，这个整数能够传入window.cancelAnimationFrame()，用来取消回调函数的执行。

let el = document.getElementById('animation');
el.style,position = 'absolute';

let start = null;
function step(timestamp){
    if(!start) start = timestamp;
    // 元素不断向左移，最大不超过200像素
    let progress = timestamp - start;
    el.style.left = Math.min(progress/10, 200) + 'px';
    // 若是距离第一次执行不超过 2000 毫秒，
  // 就继续执行动画
    if(progress < 2000){
        window,requestAnimationFrame(step);
    }
}
window,requestAnimationFrame(step);
复制代码

window.requestIdleCallback()

window.requestIdleCallback()跟setTimeout相似，也是将某个函数推迟执行，可是它保证将回调函数推迟到系统资源空闲时执行。也就是说，若是某个任务不是很关键，就可使用window.requestIdleCallback()将其推迟执行，以保证网页性能。

它跟window.requestAnimationFrame()的区别在于，后者指定回调函数在下一次浏览器重排时执行，问题在于下一次重排时，系统资源未必空闲，不必定能保证在16毫秒以内完成；window.requestIdleCallback()能够保证回调函数在系统资源空闲时执行。

该方法接受一个回调函数和一个配置对象做为参数。配置对象能够指定一个推迟执行的最长时间，若是过了这个时间，回调函数无论系统资源有无空虚，都会执行。

window.requestIdleCallback(callback[, options])
复制代码

callback参数是一个回调函数。该回调函数执行时，系统会传入一个IdleDeadline对象做为参数。IdleDeadline对象有一个didTimeout属性（布尔值，表示是否为超时调用）和一个timeRemaining()方法（返回该空闲时段剩余的毫秒数）。

options参数是一个配置对象，目前只有timeout一个属性，用来指定回调函数推迟执行的最大毫秒数。该参数可选。

window.requestIdleCallback()方法返回一个整数。该整数能够传入window.cancelIdleCallback()取消回调函数。

requestIdleCallback(myNonEssentialWork);

function myNonEssentialWork(deadline) {
  while (deadline.timeRemaining() > 0) {
    doWorkIfNeeded();
  }
}
复制代码

requestIdleCallback(processPendingAnalyticsEvents, { timeout: 2000 });
复制代码

上面代码指定，processPendingAnalyticsEvents必须在将来2秒以内执行。

若是因为超时致使回调函数执行，则deadline.timeRemaining()返回0，deadline.didTimeout返回true。

若是屡次执行window.requestIdleCallback()，指定多个回调函数，那么这些回调函数将排成一个队列，按照先进先出的顺序执行。