BOM 浏览器对象模型_window 对象的常见 window.属性_window.方法

1. 常用属性

• window.devicePixelRatio        像素比 = css / 物理像素
• window.scrollX，window.scrollY    滚动条 卷曲距离

• if (window.scrollY < 75) {
      window.scroll(0, 75);
  }

获取浏览器组件对象

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

全局对象属性

• 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 对象，表示屏幕信息
• window.isSecureContext 属性返回一个布尔值，表示当前窗口是否处在加密环境。

如果是 HTTPS 协议，就是 true，否则就是 false

弹出不同的对话框

• window.alert()

只有一个“确定”按钮，往往用来通知用户某些信息

对话框弹出期间，浏览器窗口处于冻结状态，如果不点“确定”按钮，用户什么也干不了

参数只能是字符串，没法使用 CSS 样式，但是可以用\n指定换行

• window.prompt()

弹出的对话框，提示文字的下方，还有一个输入框，要求用户输入信息，并有“确定”和“取消”两个按钮。

它往往用来获取用户输入的数据

• window.confirm()

弹出的对话框，除了提示信息之外，只有“确定”和“取消”两个按钮，往往用来征询用户是否同意

• window.onunload = function () {
      return window.confirm('你确定要离开当面页面吗？');
  };

2. 常用方法

window.open()

新建另一个浏览器窗口，类似于浏览器菜单的新建窗口选项。

它会返回新窗口的引用，如果无法新建窗口，则返回 null

• var popup = window.open('somefile.html');

有 3 个参数

• url        字符串，表示新窗口的网址。

如果省略，默认网址就是 about:blank。

• windowName        字符串，表示新窗口的名字

如果该名字的窗口已经存在，则占用该窗口，不再新建窗口。

如果省略，就默认使用_blank，表示新建一个没有名字的窗口。

另外还有几个预设值，_self表示当前窗口，_top表示顶层窗口，_parent表示上一层窗口。

• windowFeatures        字符串，内容为逗号分隔的键值对（详见下文），表示新窗口的参数

比如有没有提示栏、工具条等等。

如果省略，则默认打开一个完整 UI 的新窗口。

如果新建的是一个已经存在的窗口，则该参数不起作用，浏览器沿用以前窗口的参数。

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        新窗口是否显示关闭按钮

• var popup = window.open(
      'somepage.html',
      'DefinitionsWindows',
      'height=200,width=200,location=no,status=yes,resizable=yes,scrollbars=yes'
  );

  打开的新窗口高度和宽度都为 200  像素，没有地址栏和滚动条，但有状态栏，允许用户调整大小

• 注意，如果新窗口和父窗口不是同源的（即不在同一个域），它们彼此不能获取对方窗口对象的内部属性

• var w = window.open();
  console.log('已经打开新窗口');
  w.location = 'http://example.com';

  if (popup === null) {
  // 新建窗口失败
  }

• window.close()

一般只用来关闭 window.open() 方法新建的窗口

对顶层窗口有效，iframe 框架之中的窗口使用该方法无效

• window.stop()

完全等同于单击浏览器的停止按钮，会停止加载图像、视频等正在或等待加载的对象

• window.moveTo()

移动浏览器窗口到指定位置。

接受两个参数，分别是窗口左上角 距离 屏幕左上角的 水平距离 和 垂直距离 ，单位为像素

• window.moveTo(100, 200);

• window.moveBy()

将窗口移动到一个相对位置。

它接受两个参数，分别是相对于窗口左上角向右移动的水平距离 和 向下移动的垂直距离，单位为像素

注意，仅以下情况有效：

该窗口是用 window.open() 方法新建的，并且它所在的 Tab 页是当前窗口里面唯一的

• window.resizeTo()

缩放窗口到指定大小

接受两个参数：

第一个是缩放后的窗口宽度（outerWidth 属性，包含滚动条、标题栏等等）

第二个是缩放后的窗口高度（outerHeight 属性）

• 将当前窗口缩放到，屏幕可用区域的一半宽度和高度

• window.resizeTo(
      window.screen.availWidth / 2,
      window.screen.availHeight / 2
  );

• window.resizeBy()

用于 按照相对本身的量缩放 窗口

接受两个参数，第一个是水平缩放的量，第二个是垂直缩放的量，单位都是像素

• window.resizeBy(-200, -200);

  将当前窗口的宽度和高度，都缩小 200 像素

• window.scrollTo()    /    window.scroll()

将文档滚动到指定位置。

接受两个参数，也可以接受一个配置对象作为参数，表示 滚动后 相对于窗口左上角的页面坐标。

• window.scrollTo({
      top: 1000,
      behavior: 'smooth'
  });

top        滚动后页面左上角的垂直坐标，即 y 坐标。
left        滚动后页面左上角的水平坐标，即 x 坐标。
behavior        字符串，表示滚动的方式，有三个可能值（smooth、instant、auto），默认值为 auto。

• window.scrollBy()

将网页 相对当前位置 滚动指定距离（单位像素）。

接受两个参数：水平向右滚动的像素，垂直向下滚动的像素

• 将网页向下滚动一屏

• window.scrollBy(0, window.innerHeight);

注意：

如果不是滚动网页，而是滚动某个元素

• Element.scrollTop
• Element.scrollLeft
• Element.scrollIntoView()
• window.print()

会跳出打印对话框，与用户点击菜单里面的“打印”命令效果相同

• document.getElementById('printLink').onclick = function () {
      if (typeof window.print === 'function') {
          // 支持打印功能
          window.print();
      };
  };

• window.focus()

激活窗口，使其获得焦点，出现在其他窗口的前面

• 先检查popup窗口是否依然存在，确认后激活该窗口

• var popup = window.open('popup.html', 'Popup Window');
  
  if ((popup !== null) && !popup.closed) {
      popup.focus();
  };

• window.blur()

将焦点从窗口移除

当前窗口获得焦点时，会触发focus事件；

当前窗口失去焦点时，会触发blur事件

• window.getSelection()

返回一个 Selection 对象，表示用户现在选中的文本

• var selObj = window.getSelection();
  var theSel = selObj.toString();

• window.getComputedStyle()

接受一个元素节点作为参数，返回一个包含该元素的最终样式信息的对象

• window.matchMedia()

检查 CSS 的 mediaQuery 语句

• window.requestAnimationFrame()

跟 setTimeout() 类似，都是推迟某个函数的执行。

不同之处在于：

setTimeout()

必须指定推迟的时间，

window.requestAnimationFrame()

则是推迟到浏览器下一次重流时执行，该函数执行完才会进行下一次重绘。

重绘通常是 16ms 执行一次，不过浏览器会自动调节这个速率，

比如网页切换到后台 Tab 页时，requestAnimationFrame() 会暂停执行。

如果某个函数会改变网页的布局，一般就放在 window.requestAnimationFrame() 里面执行

这样可以节省系统资源，使得网页效果更加平滑。

因为慢速设备会用较慢的速率重流和重绘，而速度更快的设备会有更快的速率

接受一个回调函数作为参数

• window.requestAnimationFrame(callback);

  callback是一个回调函数。

• callback 执行时，它的参数就是

系统传入的一个高精度时间戳（performance.now() 的返回值），单位是毫秒，表示距离网页加载的时间。

• window.requestAnimationFrame() 的返回值是一个整数，
• 这个返回值整数可以传入 window.cancelAnimationFrame()，用来取消回调函数的执行
• window.requestAnimationFrame()执行网页动画的例子

• var element = document.getElementById('animate');
  element.style.position = 'absolute';
  
  var start = null;
  
  function step(timestamp) {
      if (!start){
          start = timestamp;
      };
      var progress = timestamp - start;
  
      // 元素不断向左移，最大不超过200像素
      element.style.left = Math.min(progress / 10, 200) + 'px';
  
      // 如果距离第一次执行不超过 2000 毫秒，
      // 就继续执行动画
      if (progress < 2000) {
          window.requestAnimationFrame(step);
      };
  };
  
  window.requestAnimationFrame(step);

• 实例

index.html

• <!DOCTYPE html>
  <html>
      <head>
          <meta charset="UTF-8" />
          <title>requestAnimationFrame</title>
  
          <link rel="stylesheet" type="text/css" href="./css/index.css" />
      </head>
  
      <body>
  
          <div id="test_box" class="clearfix">
  
          </div>
  
          <!-- javascript 代码 -->
          <script type="text/javascript" src="./js/index.js"></script>
      </body>
  </html>

index.css

• body {
      width: 100%;
      color: #000;
      background: #96b377;
      font: 14px Helvetica, Arial, sans-serif;
  }
  
  #test_box {
      width: 100px;
      height: 100px;
      background-color: red;
  }

index.js

• window.addEventListener("DOMContentLoaded", function(){
      var testBox = document.getElementById("test_box");
  
      /**** requestAnimationFrame ****/
      var element = testBox;
      element.style.position = 'absolute';
  
      var start = null;
      var offset = 0;
      var speed = 5;
      function step(timestamp) {
          if (!start){
              start = timestamp;
          };
          var progress = (timestamp - start)/speed;
          endPos = 500;
  
          // 元素不断向左移，最大不超过200像素
          offset = progress;
          if(parseInt(progress/endPos)%2 == 0){
              offset = progress%endPos;
          }else{
              offset = endPos - progress%endPos;
          };
  
          element.style.left = offset%endPos + 'px';
  
          // 如果距离第一次执行不超过 2000 毫秒，
          // 就继续执行动画
          //if (progress < 2000) {
              window.requestAnimationFrame(step);
          //};
      };
  
      window.requestAnimationFrame(step);
  }, false);

判断当前窗口是不是顶级窗口

window.top === window.self

访问历史后退一次

window.history.back();