BOM-之-window对象和location对象的属性和方法

window 对象

      BOM 的核心是 window 对象，表示浏览器打开的窗口的实例。如果文档包含框架（frame 或 iframe 标签），浏览器会为每个框架创建一个额外的 window 对象。

      window 对象在浏览器中有两重身份，一个是 ECMAScript 中的 Global 对象，另一个就是浏览器窗口的 JavaScript 接口。

Global作用域

      window 对象被复用为 ECMAScript 的 Global 对象，所以在全局作用域中声明的所有变量和函数，就都成为了 window对象的属性。很多浏览器API及相关构造函数 都以 window 对象属性的形式暴露出来。
      而ECMAScript 没有指出如何直接访问 Global 对象，Global对象只是作为window 对象的一部分加以实现的。

窗口关系

top 对象始终指向最上层(最外层)窗口，即浏览器窗口本身。
parent 对象则始终指向当前窗 口的父窗口。
self 对象始终会指向 window对象

窗口位置

window窗口位置属性：
IE、Safari 和 Opera ：
      screenLeft：只读整数，表示窗口相对于屏幕左侧的像素值
      screenTop：只读整数，表示窗口相对于屏幕顶部的像素值
Firefox 和 Safari ：
      screenX：只读整数，表示窗口相对于屏幕左侧的像素值
      screenY：只读整数，表示窗口相对于屏幕顶部的像素值

window窗口位置方法：
      moveTo(0,0)：接收两个参数，把窗口的左上角移动到一个指定的坐标。
      moveBy(0, 100)：接收两个参数，相对当前窗口坐标把它移动指定的像素

窗口大小

window窗口大小属性：
     innerWidth：浏览器窗口中文档显示区的宽度(不包含浏览器边框和工具栏)
     innerHeight：浏览器窗口中文档显示区的高度(不包含浏览器边框和工具栏)
     outerWidth：浏览器窗口自身的宽度
     outerHeight：浏览器窗口自身的高度
     screen.height：屏幕分辨率高
     screen.width：屏幕分辨率宽

窗口位置

window窗口位置方法：
      scrollTo() 把内容滚动到指定的坐标。
      scrollBy() 相对于当前视口按照指定的像素值来滚动内容。

导航与打开新窗口

      window.open()方法可以用于导航到指定 URL，也可以用于打开新浏览器窗口,或查找一个已命名的窗口。
      这个方法接收 4 个参数:

1. 要加载的 URL
2. 目标窗口名称name，该字符声明了新窗口的名称。这个名称等同于<a>属性 target 的值。如果该参数指定了一个已经存在的窗口名称，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。
3. 声明了新窗口要显示的标准浏览器的特征features。如果省略该参数，新窗口将具有所有标准特征。
4. 一个可选的布尔值replace。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。这个参数只有在不打开新窗口时才会使用。

      当第二个参数不是已有窗口，则会打开一个新窗口或者标签页。则第三个参数是窗口的特定字段，不传会带有所有默认的浏览器特性（工具栏，地址栏，状态栏）；当第二个参数是已有窗口，则会忽略第三个参数；
      第三个参数特性字符串是一个逗号分隔的设置字符串，用于指定新窗口包含的特性。下表列出了一些选项。

字符串	说明
fullscreen=yes/no/1/0	表示新窗口是否全屏模式。仅限 IE 支持，默认是 no；
height=pixels	窗口文档显示区的高度。以像素计；值最小是100，小于100按100算；
width=pixels	窗口文档显示区的宽度。以像素计；值最小是100，小于100按100算；
left=pixels	窗口的 x 坐标。以像素计；值最小是0，负数按0算；
top=pixels	窗口的 y 坐标。以像素计；值最小是0，负数按0算；
location=yes/no/1/0	是否显示地址栏。不同浏览器的默认值也不一样。在设置为"no"时，地址栏 可能隐藏或禁用(取决于浏览器)；
menubar=yes/no/1/0	是否显示菜单栏。默认为no
resizable=yes/no/1/0	窗口是否可调节尺寸。默认是 yes；
scrollbars=yes/no/1/0	是否显示滚动条。默认是 yes；
titlebar=yes/no/1/0	是否显示标题栏。默认是 yes；
toolbar=yes/no/1/0	是否显示浏览器的工具栏。默认为no;

注意：这些设置需要以逗号分隔的名值对形式出现，其中名值对以等号连接。(特性字符串中不能包含空 格。)

窗口不会跟踪记录自己打开的新窗口， 因此开发者需要自己记录。

let wroxWin = window.open("http://www.wrox.com/", "wroxWindow",
"height=400,width=400,top=10,left=10,resizable=yes");
// 缩放 
wroxWin.resizeTo(500, 500);
// 移动 
wroxWin.moveTo(100, 100);
// 关闭
wroxWin.close();

定时器

JavaScript 在浏览器中是单线程执行的，但允许使用定时器指定在某个时间之后或每隔一段时间就 执行相应的代码。

setTimeout()：在指定的毫秒数后调用函数或计算表达式。
clearTimeou()：取消由 setTimeout() 方法设置的 timeout。
setInterval()： 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()：取消由 setInterval() 设置的 timeout。

setTimeout(code,millisec):
接收两个参数:要执行的代码和在执行回调函数前等待的时间(毫秒)。

参数	描述
code	必需。要调用的函数后要执行的 JavaScript 代码串。
millisec	必需。在执行代码前需等待的毫秒数。

      第二个参数是要等待的毫秒数，而不是要执行代码的确切时间。JavaScript 是单线程的，所以每次只能执行一段代码。为了调度不同代码的执行，JavaScript 维护了一个任务队列。其中的任务会按照添加到队列的先后顺序执行。setTimeout()的第二个参数只是告诉 JavaScript 引擎在指定的毫秒数过后 把任务添加到这个队列。如果队列是空的，则会立即执行该代码。如果队列不是空的，则队列的执行时间需要等到前面的任务执行完才会执行，也就是等待所有的可执行代码执行完毕，才会轮到setTimeout执行其内部操作，并且按照其时延时间长短顺序执行代码！

     要取消等待中的排期任务，可以调用 clearTimeout()方法并传入超时 ID；只要是在指定时间到达之前调用 clearTimeout()，就可以取消超时任务。在任务执行后再调用 clearTimeout()没有效果。

注意：所有超时执行的代码(函数)都会在全局作用域中的一个匿名函数中运行，因此函 数中的 this 值在非严格模式下始终指向 window，而在严格模式下是 undefined。如果 给 setTimeout()提供了一个箭头函数，那么 this 会保留为定义它时所在的词汇作用域。

setInterval()与 setTimeout()的使用方法类似，只不过指定的任务会每隔指定时间就执行一
次，直到取消循环定时或者页面卸载

注意：这里的关键点是，第二个参数，也就是间隔时间，指的是向队列添加新任务之前等待的时间。比如，调用 setInterval()的时间为 01:00:00，间隔时间为 3000 毫秒。这意味着 01:00:03 时，浏览器会把任务添加到执行队列。浏览器不关心这个任务什么时候执行或者执行要花多长时间。因此，到了 01:00:06，它会再向队列中添加一个任务。由此可看出，执行时间短、非阻塞的回调函数比较适合 setInterval()。

系统对话框

alert()：显示带有一段消息和一个确认按钮的警告框。
confirm()： 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()： 显示可提示用户输入的对话框。
print(): 显示打印对话框。
find(): 显示查找对话框。

      这些对话框与浏览器中显示的网页无关，而且也不包含 HTML。它们的外观由操作系统或者浏览器决定， 无法使用 CSS 设置。这些对话框都是同步的模态，即在它们显示的时候，代码会停止执行， 在它们消失以后，代码才会恢复执行。

      alert()只接收一个参数。对话框只有一个“OK”(确定)按钮。如果传给 alert()的参数不是一个原始字符串，则会调用这个值的 toString()方法将其转换为字符串。

      confirm()确认框有两个按钮:“Cancel”(取消)和“OK”(确定)。返回一个boolean值，true 表示单击 了 OK 按钮，false 表示单击了 Cancel 按钮或者通过单击某一角上的 X 图标关闭了确认框。# location 对象

if (confirm("你去确定吗？")) {
 	alert("你点击了确定按钮");
} else {
	alert("你点击了取消按钮.");
}

      prompt()方法接收两个参数: 要显示的文本，以及文本框的默认值(可以是空字符串)。如果用户单击了 OK 按钮，则 prompt()会返回文本框中的值。如果用户单击了 Cancel 按钮，或者对话框被关闭，则 prompt()会返回 null。

let result = prompt("What is your name? ", "");
if (result !== null) { 7
  alert("Welcome, " + result);
}

location 对象

      location 是最有用的 BOM 对象之一。
      这个对象独特的地方在于，它既是 window 的属性，也是 document 的属性。也就是说， window.location 和 document.location 指向同一个对象。
     location 对象不仅保存着当前加载文档的信息，以及导航功能。也保存着把 URL 解析为离散片段后能够通过属性访问的信息。

location 对象的属性

      假设URL是 http://foouser:barpassword@www.wrox.com:80/WileyCDA/?q= javascript#contents，location 对象的属性如下表所示。

属性	值	描述
hash	“#contents”	设置或返回从井号 (#) 开始的 URL（锚）。如果没有则为空字符串
host	“www.wrox.com:80”	设置或返回服务器名和当前端口号。
hostname	“www.wrox.com”	设置或返回服务器名
href	“http://www.wrox.com:80/WileyCDA/ ?q=javascript#contents”	设置或返回完整 URL。location 的 toString() 方法返回这个值
pathname	“/WileyCDA/”	设置或返回当前 URL 的路径部分。
port	“80”	设置或返回当前 URL 的端口号。没有端口，则返回空字符串;
protocol	“http:”	设置或返回当前 URL 的协议。通常是"http:“或"https:”
search	“?q=javascript”	设置或返回URL 的查询字符串。这个字符串以问号开头
username	“foouser”	设置或返回域名前指定的用户名
password	“barpassword”	设置或返回域名前指定的密码
origin	“http://www.wrox.com”	URL 的源地址。只读

Location 对象方法

方法	说明
assign()	接收一 个 URL,修改浏览器的地址,加载新的页面文档。
replace()	接收一个 URL 参数，但重新加载后不会增加历史记录。调用 replace()之后，用户不能回到前一页。
reload()	重新加载当前显示的页面。调用 reload()而不传参 数，页面会以最有效的方式重新加载。

如果给 location.href 或 window.location 设置一个 URL，也会以同一个 URL 值调用 assign()方法。比如，下面两行代码都会执行与显式调用 assign()一样的操作:

window.location = "http://www.wrox.com"; 
location.href = "http://www.wrox.com";
//等同于
location.assign("http://www.wrox.com");

这3 种修改浏览器地址的方法中，设置 location.href 是最常见的。

注意：1. 除了 hash 之外，只要修改 location 的一个属性，就会导致页面重新加载新 URL。
2.修改hash的值会在浏览器历史中增加一条新记录。

      reload()也可以修改地址，它能重新加载当前显示的页面。调用 reload()而不传参数，页面会以最有效的方式重新加载。
      如果页面自上次请求以来没有修改过，浏览器可能会 从缓存中加载页面。如果想强制从服务器重新加载，可以像下面这样给 reload()传个 true:

location.reload(); // 重新加载，可能是从缓存加载 
location.reload(true); // 重新加载，从服务器加载

脚本中位于 reload()调用之后的代码可能执行也可能不执行，这取决于网络延迟和系统资源等因 素。为此，最好把 reload()作为最后一行代码。

参考文献： javascript 高级程序设计 第4版