JavaScript 复习之 window对象-CSDN博客

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

一、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()，指定多个回调函数，那么这些回调函数将排成一个队列，按照先进先出的顺序执行。