第八章 BOM（js高级程序设计）

window对象

• BOM 的核心对象是 window，它表示浏览器的一个实例。在浏览器中， window 对象有双重角色，
  它既是通过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。
• 尝试访问未声明的变量会抛出错误，但是通过查询 window 对象，可以知道某个可能未声明的变量是否存在

var newValue = oldValue;//error
var newValue = window.oldValue;//这里不会抛出错误 newValue 的值是 undefined

• Frame和iFrame框架的使用：（iframe本身就有很多问题，不常用，省略）

• 窗口的位置：（不常用）

  1. 获得窗口位置 window.screenLeft；window.screenTop
  2. 移动窗口位置 window.moveTo(0,100);window.moveBy(200,0);

• 窗口大小，视口大小：

1. window.innerWidth
2. window.innerHeight
3. document.documentElement.clientWidth
4. document.documentElement.clientHeight
   兼容性写法

width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

书中demo是为了兼容ie6的混合模式：

  var pageWidth = window.innerWidth,
    pageHeight = window.innerHeight;
  if (typeof pageWidth != "number") {
    if (document.compatMode == "CSS1Compat") {
      pageWidth = document.documentElement.clientWidth;
      pageHeight = document.documentElement.clientHeight;
    } else {
      pageWidth = document.body.clientWidth;
      pageHeight = document.body.clientHeight;
    }
  }
    console.log(pageWidth)
    console.log(pageHeight)

• 打开窗口
• 新标签中打开：window.open(url,name,type)
• type第三个参数字符串，有第三个参数，就会以弹出的形式打开，没有就会在标题栏中打开
• window.open()会返回一个对象，指向原窗口，新窗口对象中的opener == 原窗口window
• 可以调用返回对象的.resizeTo，moveTo，close方法去调整关闭新打开的窗口

var wroxWin = window.open("http://www.wrox.com/","wroxWindow","height=400,width=400,top=10,left=10,resizable=yes");
wroxWin.resizeTo(100,100)
wroxWin.moveTo(100,100)
wroxWin.close()

• 当前页面跳转：window.location.href="你所要跳转的页面";

• 安全：拦截弹窗（浏览器弹出窗口屏蔽程序）
  ps:有时候做打印需求，打印机页面也会被浏览器拦截，加上以下代码提高用户体验：

  var wroxWin = window.open("http://www.wrox.com", "_blank");
  if(wroxWin === null){
    alert('弹窗被浏览器拦截，请在关闭拦截后，重新加载页面！')
  }

• 间歇调用和超时调用（计时器）

  1. setTimeout setInterval
  2. clearTimeout clearInterval
  3. 会返回一个数值 ID（number类型），该ID是唯一标识，用来关闭计时器
  4. 尽量使用setTimeout 超时调用

• 对话框

  1. 简单提示警告对话框alert()
  2. 确认对话框confirm()有返回值：true/false

  if (confirm('继续操作')) {
    alert('用户继续了操作')
  } else {
    alert('用户取消了操作')
  }

confirm

3. 需要用户输入对话框prompt()，返回值null或者用户输入内容

  var result = prompt("Are you ok? ", "");
  if (result !== null) {
    alert("ok" + result);
  } else {
    alert('滚')
  }

4. //显示“打印”对话框 window.print();
5. //显示“查找”对话框 window.find();

location 对象

• 提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能.既是 window 对象的属性，也是document 对象的属性

location对象属性

• 解析查询字符串 ？a=1&b=2，书中实例

  function getQueryStringArgs() {
    //取得查询字符串并去掉开头的问号
    var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
      //保存数据的对象
      args = {},
      //取得每一项
      items = qs.length ? qs.split("&") : [],
      item = null,
      name = null, value = null,
      //在 for 循环中使用
      i = 0,
      len = items.length;
    //逐个将每一项添加到 args 对象中
    for (i = 0; i < len; i++) {
      item = items[i].split("=");
      name = decodeURIComponent(item[0]);
      value = decodeURIComponent(item[1]);
      if (name.length) {
        args[name] = value;
      }
    }
    return args;
  }

• 修改当前页面的方法

1. location.assign("http://www.wrox.com");
2. window.location = "http://www.wrox.com";
3. location.href = "http://www.wrox.com"; //常用，其实就是调用了assign（）
4. location.replace("http://www.wrox.com/");//不会在history中新增一条访问记录，而是替换当前页面的history
5. location.reload(); //重新加载（有可能从缓存中加载）
   location.reload(true); //重新加载（从服务器重新加载）//在版本更新时有用！

navigator 对象

• 用来获得浏览器的信息，操作信息等
• plugins() 浏览器安装的插件
• 注册处理程序:firefox的registerContentHandler，看了以下没懂

screen 对象

screen 对象基本上只用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素宽度和高度等。每个浏览器中的 screen 对象都包含着各不相同的属性

  const win = window.open('www.baidu.com', '', 'a')
  win.resizeTo(screen.availWidth, screen.availHeight);

以弹窗的形式打开窗口win，并调整win为最大宽高（有些浏览器会禁用resizeTo，可能无效）

history对象

history 对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。因为 history 是 window
对象的属性，因此每个浏览器窗口、每个标签页乃至每个框架，都有自己的 history 对象与特定的
window 对象关联。出于安全方面的考虑，开发人员无法得知用户浏览过的 URL。不过，借由用户访问过的页面列表，同样可以在不知道实际 URL 的情况下实现后退和前进。

• history.go(1) 前进一页
• history.go(-1) 后退一页
• history.go(0) 和 location.reload()一样能刷新页面
• history.go(’baidu.‘) 去history中包含baidu的页面
• history.back(); 后退一页
• history.forward(); 前进一页
• history.length；当前history中的url数

用户是否第一次打开页面：

  if (history.length == 1) {
    alert('这应该是用户打开窗口后的第一个页面')
  }

书中length==0？为什么我看的是1