BOM-window对象

1.window对象

BOM 的核心是 window 对象，表示浏览器的实例。window 对象在浏览器中有两重身份，一个是 ECMAScript 中的 Global 对象，另一个就是浏览器窗口的 JavaScript 接口。这意味着网页中定义的所有对 象、变量和函数都以 window 作为其 Global 对象，都可以访问其上定义全局方法。

1.Global作用域

因为 window 对象被复用为 ECMAScript 的 Global 对象，所以通过 var 声明的所有全局变量和函数都会变 成 window 对象的属性和方法。比如：

<script>
 var name = 'zhangsan';
 var sayName = function () {
 console.log(this.name);
 }
 console.log(window.name); //zhangsan
 sayName();  //zhangsan
 window.sayName(); //zhangsan
 </script>

 这里，变量 name 和函数 sayName()被定义在全局作用域中，它们自动成为了 window 对象的成员。因 此，变量 name 可以通过 window.name 来访问，而函数 sayName()也可以通过 window.sayName()来访 问。因为 sayName()存在于全局作用域，this.name 映射到 window.name，所以就可以显示正确的结果 了。

2.Window窗口

窗口位置

screenLeft和screenTop 属性返回窗口相对于屏幕的X和Y坐标。(火狐浏览器不支持)

screenX和screenY 属性返回窗口相对于屏幕的X和Y坐标。(ie浏览器不支持，火狐可以使用此属性)

pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。

pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

窗口大小

innerWidth 页面视图区的宽度

innerHeight 页面视图区的高度

outerWidth 浏览器窗口的宽度

outerHeight 浏览器窗口的高度

screen对象

屏幕总宽度/高度(像素单位): screen.width screen.height

可用宽度/高度(像素单位): screen.availWidth screen.availHeight

颜色深度: screen.colorDepth

颜色分辨率: screen.pixelDepth

3.Window open()

window.open()方法可以用于导航到指定 URL，也可以用于打开新浏览器窗口。这个方法接收 4个参数： 要加载的 URL、目标窗口、特性字符串和表示新窗口在浏览器历史记录中是否替代当前加载页面的布尔 值。通常，调用这个方法时只传前 3 个参数，最后一个参数只有在不打开新窗口时才会使用。

语法 window.open(URL,name,specs,replace)

URL 地址 

name 可选。指定target属性或窗口的名称。支持以下值：

_blank - URL加载到一个新的窗口。（这是默认）

_parent - URL加载到父框架

_self - URL替换当前页面

_top - URL替换任何可加载的框架集

name - 窗口名称

specs  （逗号分隔）

replace

Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史 中的当前条目。支持下面的值：

true - URL 替换浏览历史中的当前条目。

false - URL 在浏览历史中创建新的条目。

<button onclick="openWindow()">打开新窗口</button>
 <button onclick="closeWindow()">关闭窗口</button>
 <script>
  function openWindow() {
    // 设置一个全局变量接收新窗口的打开
    w = window.open('https://www.baidu.com', '_blank', 'width=600,height=600', 
'false');
    // 调整窗口大小 浏览器窗口的新高度和新宽度
    w.resizeTo(400,400);
    // 移动窗体 接受的是新位置的x和y坐标值
w.moveTo(100, 100);
 }
 function closeWindow() {
 // 关闭窗口
w.close()
 }
 </script>

4.系统对话框

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

alert() 警告框

用法 alert('我是警告框')‘

confirm() 确认框通

 以判断 confirm()方法的返回值：true 表示单击了 OK 按钮，false 表示单击了 Cancel 按钮或者通过单击某一角上的 X 图标关闭了确认框。

<script>
 var result = confirm('你确定吗?');
 if (result) {
 console.log('确定');
 }else{
 console.log('取消');
 }
 </script>

prompt() 提示框 。提示框的用途是提示用户输入消息。除了 OK 和 Cancel 按 钮，提示框还会显示一个文本框，让用户输入内容。调用 prompt("你叫什么名字?")，如果用户单击了 OK 按 钮，则 prompt()会返回文本框中的值。如果用户单击了 Cancel 按钮，或者对话框被关闭，则 prompt()会 返回 null。

<script>
 var result = prompt("你叫什么名字?");
 if (result) {
 console.log(result);
 }else{
 console.log('取消');
 }
 </script>

5.location

location对象是最有用的BOM对象之一，提供了与当前窗口中加载的文档有关的信息，还提供一些导航 功能。 location是个神奇的对象，既是window的对象也是document的对象。经过我们的对比发现，直接使用 location对象也可以。

<script>
 console.log(window.location === document.location); //true
 console.log(location === document.location);  //true
 console.log(location === window.location);    
</script>

属性

host 返回服务器名称和端口号

hostname 返回不带端口号的服务器名称

href 返回当前加载页面的完整URL

pathname 返回URL的目录和文件名

port 返回URL中指定的端口号

protocol 返回页面使用的协议

search 方法 返回URL的查询字符串。这个字符串以问号开头

方法 assign()传递一个url参数，打开新url，并在浏览记录中生成一条记录。

replace() 参数为一个url，结果会导致浏览器位置改变，但不会在历史记录中生成新记录。

reload() 重新加载当前显示的页面，参数可以为boolean类型，默认为false，表示以最有效方式重新加载，可能 从缓存中直接加载。如果参数为true，强制从服务器中重新加载。

<button>跳转页面</button>
 <button>替换页面</button>
 <button>刷新页面</button>
 <script>
 var btn = document.getElementsByTagName('button');
 btn[0].onclick = function () {
 location.assign('./test2.html')
 }
 btn[1].onclick = function () {
 location.replace('./test2.html')
 }
btn[2].onclick = function () {
 location.reload()
 }
 </script>

6.history对象

length 返回历史列表中的网址数

注意：Internet Explorer和Opera从0开始，而Firefox、Chrome和Safari从1开始。

back() 加载 history 列表中的前一个 URL

forward() 加载 history 列表中的下一个 URL

go() 加载 history 列表中的某个具体页面，负数表示向后跳转，正数表示向前跳转。

7.间歇调用和超时调用

javascript是单线程语言，但是可以通过超时值和间歇时间来调度代码在特定时刻执行。 setTimeout() 该方法返回一个数值ID，表示超时调用，这个超时调用ID是计划执行代码的唯一标识符通过它来取消超 时调用。可以通过clearTimeout(ID);

参数： 1.要执行的代码 2.以毫秒表示的时间。 例如在1秒后执行输出语句

<script>
 var id = setTimeout(() => {
 console.log('Hello World');
 }, 1000);
 console.log(id);
 // 清除超时调用
clearTimeout(id);
 </script>

setInterval() 按照指定的时间间隔重复执行代码，直到间歇调用被取消或页面被卸载。调用该方法也会返回一个间歇 调用ID，该ID可以用户在将来某个时刻取消间歇调用。

参数： 1.要执行的代码 2.以毫秒表示的时间。 如动态显示时间

<script>
 var div = document.createElement('div');
 // 间歇调用
var id = setInterval(() => {
 div.innerHTML = new Date().toLocaleString();
 }, 1000);
 document.body.appendChild(div);
 // 清除计时器
clearInterval(id);
 </script>