8.1 window对象

window是是 BOM（浏览器对象模型）的核心对象之一，它是全局作用域的顶层对象，所以引用的时候也可以忽略window对象，直接访问这些属性和方法，比如document对象，可以用window.document访问，也可以直接用document。如果在函数中声明变量时没有使用 var、let 或 const 关键字，则该变量将成为全局变量，也会成为 window 对象的一个属性。例如：

function myFunction() {
  myVariable = 123; // 全局变量，相当于 window.myVariable = 123;
}

window.open()

window.open() 方法是 BOM（浏览器对象模型）中的一个方法，用于在新窗口或标签页中打开一个 URL。该方法的语法如下： window.open(url, target, features); 其中，各参数的含义如下： 1 url：要打开的 URL 地址，可以是相对路径或绝对路径。 2 target：打开窗口的目标名称，可以是 _self（在当前窗口中打开）、_blank（在新窗口中打开）、_parent（在父级窗口中打开）、_top（在顶级窗口中打开）或自定义名称（在指定名称的窗口中打开）。 3 features：新窗口的特性设置，例如窗口大小、位置、菜单栏、工具栏等等，可以使用逗号分隔的字符串或者一个 JavaScript 对象来指定。 window.open() 方法返回一个新窗口的引用，可以使用该引用来操作新窗口的各种属性和方法。第2个参数target，如果不传则默认在新窗口打开，如果是指定了自定义的名称，则每次执行都会在这个固定name的窗口打开或者刷新。第3个参数是可选的 features 字符串，用于指定打开新窗口的特性，如窗口大小、位置、菜单栏等。features 字符串由多个特性名和特性值对组成，每个特性之间用逗号分隔，每个特性名和特性值之间用等号分隔,下是一些常用的特性名和特性值： 1 width：窗口的宽度，以像素为单位。 2 height：窗口的高度，以像素为单位。 3 top：窗口距离屏幕顶部的距离，以像素为单位。 4 left：窗口距离屏幕左侧的距离，以像素为单位。 5 scrollbars：是否显示滚动条，取值为 yes 或 no。 6 resizable：是否允许用户改变窗口大小，取值为 yes 或 no。 7 menubar：是否显示菜单栏，取值为 yes 或 no。 8 location：是否显示地址栏，取值为 yes 或 no。 9 toolbar：是否显示工具栏，取值为 yes 或 no。以下是一些示例： // 打开一个宽度为 800 像素、高度为 600 像素的新窗口，并将其置于屏幕中央 window.open('http://www.example.com', '_blank', 'width=800,height=600,top=' + (screen.height - 600) / 2 + ',left=' + (screen.width - 800) / 2);

// 打开一个没有地址栏和工具栏的新窗口，并且允许用户改变窗口大小 window.open('http://www.example.com', '_blank', 'location=no,toolbar=no,resizable=yes');

需要注意的是，features 字符串中的特性名和特性值不区分大小写，而且浏览器可能会忽略某些特性或将其作为可选特性处理，具体表现取决于浏览器的实现。建议使用浏览器支持的标准特性，避免使用浏览器特有的非标准特性。

window.name

window.name是一个特殊的属性，用它可以有2个作用：

第一个是可以共享数据，因为window.name属性即使在页面刷新之后仍然存在，这是和其他变量不同的地方，所以它可以用于在这个窗口打开的所有页面之间共享数据。需要注意的是，使用 window.name 属性来存储大量数据并不是最好的选择，因为在浏览器中，window.name 属性的值是全局变量，容易被恶意脚本访问和修改。如果需要在浏览器中存储大量数据，可以考虑使用 localStorage、sessionStorage 或者 IndexedDB 等存储方案。

第二个是可以指定窗口打开页面，通过window.open的target参数，可以指定窗口来打开页面。例如如果使用 window.open('www.example.com', 'exampleWindow'); 打开窗口，则每次指定target为'exampleWindow'都会使用相同的窗口打开页面。

window.closed

window.closed 是一个只读属性，它用于判断一个窗口是否已经被关闭。以下是一个示例代码：

// 打开一个新窗口
var newWin = window.open('https://www.baidu.com');
console.log(newWin)

// 等待 5 秒钟后判断窗口是否已经关闭
setTimeout(function() {
  if (newWin.closed) {
    console.log('窗口已经关闭');
  } else {
    console.log('窗口还没有关闭');
  }
}, 5000);

window.opener

window.opener是在一个窗口中打开了另一个窗口时，新窗口可以通过window.opener获取到原窗口的引用。这个属性可以用来在新窗口中操作原窗口。例如，在一个页面中打开了一个新窗口： var newWindow = window.open("https://www.example.com", "example"); 在新窗口中，可以通过window.opener获取到原窗口的引用： var originalWindow = window.opener; 通过originalWindow就可以在新窗口中操作原窗口了。但是需要注意的是，这种方式只适用于两个窗口同源的情况。如果两个窗口不同源，那么window.opener将为null，新窗口就无法操作原窗口。这是浏览器的同源策略所限制的。

这里是第一次提到同源策略，同源限制是浏览器中的一项安全策略，用于保护用户信息和数据免受恶意网站的攻击。它指的是在同一个源（协议、域名和端口）下的文档之间可以相互通信和交互，而不同源的文档之间则不能互相访问和操作彼此的数据。例如，源为example.com的文档只能与源为https://example.co…

window.self

window.self 属性是指向当前窗口的窗口对象，它与 window 对象是等价的，通常可以直接使用 window 代替 window.self。以下是一个示例代码： console.log(window === window.self); // true 在上面的示例代码中，我们比较了 window 对象和 window.self 对象是否相等，结果为 true，说明它们是等价的。

window.window

window.window 属性也是指向当前窗口的窗口对象，它与 window 对象以及 window.self 对象是等价的，通常可以直接使用 window 或 window.self 代替 window.window。以下是一个示例代码：

    console.log(window === window.window); // true
    console.log(window === window.self); // true

在上面的示例代码中，我们比较了 window.window 对象、window 对象和 window.self 对象是否相等，结果均为 true，说明它们是等价的。

window.frames

window.frames 属性是一个类数组对象，它包含了当前窗口中所有的 iframe 元素，每个 iframe 对象在 frames 中都有一个相应的下标索引。它可以用来操作当前窗口中的 iframe 元素，例如获取 iframe 对象、修改 iframe 中的内容等。以下是一个示例代码：

<!-- 在当前窗口中创建一个 iframe -->
<iframe src="https://www.example.com" id="myFrame"></iframe>

<script>
// 通过下标索引获取 iframe 对象
var myFrame = window.frames[0];
console.log(myFrame.src); // 输出 "https://www.example.com"

// 修改 iframe 中的内容
myFrame.document.body.innerHTML = "Hello, world!";
</script>

在上面的示例代码中，我们首先在当前窗口中创建了一个 iframe 元素，然后通过 window.frames 属性获取了这个 iframe 对象，并对它的 src 属性和 body 内容进行了修改。注意，我们可以使用下标 0 或 id 来访问相应的 iframe 对象。

window.length

window.length 属性返回当前窗口中的 iframe 数量，即 window.frames.length 的别名。如果当前窗口没有 iframe 元素，则 window.length 的值为 0。

以下是一个示例代码：
<!-- 在当前窗口中创建两个 iframe -->
<iframe src="https://www.example.com"></iframe>
<iframe src="https://www.google.com"></iframe>

<script>
// 获取当前窗口中的 iframe 数量
console.log(window.length); // 输出 2
console.log(window.frames.length); // 输出 2
</script>

在上面的示例代码中，我们在当前窗口中创建了两个 iframe 元素，然后通过 window.length 属性和 window.frames.length 属性获取了当前窗口中的 iframe 数量，结果均为 2。

window.frameElement

window.frameElement 属性返回当前窗口所在的 iframe 元素，如果当前窗口不是嵌入在 iframe 元素中，或者是非同源的，则该属性的值为 null。以下是一个示例代码：

<!-- 在当前窗口中创建一个 iframe -->
<iframe id="my-iframe" src="https://www.example.com"></iframe>

<script>
// 在 iframe 中获取当前窗口所在的 iframe 元素
console.log(window.frameElement); // 输出 <iframe id="my-iframe" src="https://www.example.com"></iframe>

// 在父窗口中获取当前窗口所在的 iframe 元素
console.log(window.frameElement); // 输出 null
</script>

在上面的示例代码中，我们在当前窗口所在的 iframe 元素上设置了 id 属性为 "my-iframe"，然后在 iframe 中和父窗口中分别通过 window.frameElement 属性获取当前窗口所在的 iframe 元素。在 iframe 中，window.frameElement 的值为 <iframe id="my-iframe" src="https://www.example.com"></iframe>，即当前窗口所在的 iframe 元素；而在父窗口中，window.frameElement 的值为 null，因为当前窗口不是嵌入在 iframe 元素中。

window.top window.top 属性返回最顶层的窗口对象，即整个浏览器窗口的顶层窗口对象。如果当前窗口就是最顶层的窗口，则 window.top 属性返回当前窗口本身。以下是一个示例代码：

<!-- 在当前窗口中创建一个 iframe -->
<iframe id="my-iframe" src="https://www.example.com"></iframe>

<script>
// 在 iframe 中获取最顶层的窗口对象
console.log(window.top === window); // 输出 false

// 在父窗口中获取最顶层的窗口对象
console.log(window.top === window); // 输出 true
</script>

在上面的示例代码中，我们在当前窗口中创建了一个 iframe 元素，并将其 src 属性设置为 "www.example.com"。然后在 iframe 中和父窗口中分别通过 window.top 属性获取最顶层的窗口对象。在 iframe 中，window.top 的值为当前窗口所在的浏览器窗口的顶层窗口对象，即父窗口的窗口对象；而在父窗口中，window.top 的值为当前窗口本身。

window.parent

window.parent 属性返回当前窗口的父窗口对象。如果当前窗口没有父窗口，即当前窗口已经是最顶层的窗口了，则 window.parent 返回当前窗口本身。以下是一个示例代码：

<!-- 在当前窗口中创建一个 iframe -->
<iframe id="my-iframe" src="https://www.example.com"></iframe>

<script>
// 在 iframe 中获取父窗口对象
console.log(window.parent === window); // 输出 false

// 在父窗口中获取当前窗口对象
console.log(window.parent === window); // 输出 true
</script>

在上面的示例代码中，我们在当前窗口中创建了一个 iframe 元素，并将其 src 属性设置为 "www.example.com"。然后在 iframe 中和父窗口中分别通过 window.parent 属性获取当前窗口的父窗口对象。在 iframe 中，window.parent 的值为当前窗口所在的浏览器窗口的父窗口对象，即父窗口的窗口对象；而在父窗口中，window.parent 的值为当前窗口本身。无论是window.parent还是window.top, 需要注意的是，由于同源策略的限制，跨域的窗口无法直接访问其它窗口的全局属性和方法。

window.devicePixelRatio

window.devicePixelRatio是一个只读属性，返回当前显示设备的物理像素分辨率与CSS像素分辨率之比。换句话说，它表示了一个CSS像素所对应的物理像素数量。在高分辨率设备上，CSS像素相对于物理像素的比例会更高，因此需要更多的物理像素来呈现同样大小的内容，以保证显示效果的清晰度。这也是Retina屏幕、高分屏等概念的基础。例如，如果设备的物理像素分辨率为1920x1080，而CSS像素分辨率为960x540，则window.devicePixelRatio的值为2，表示一个CSS像素由2个物理像素来呈现。因此，对于同样大小的元素，Retina屏幕需要使用更高的CSS像素来显示，而非Retina屏幕使用更低的CSS像素显示，这样才能保证显示的清晰度。可以使用window.devicePixelRatio来检测设备的屏幕类型，从而针对不同的屏幕类型提供不同的显示效果。位置大小的属性 1 innerWidth：浏览器窗口的视口（viewport）宽度，即浏览器中网页可视区域的宽度，不包括工具栏和滚动条等边框和间距的部分。 2 innerHeight：浏览器窗口的视口（viewport）高度，即浏览器中网页可视区域的高度，不包括工具栏和滚动条等边框和间距的部分。 3 outerWidth：浏览器窗口的外部宽度，包括浏览器自身窗口的宽度、工具栏和滚动条等边框和间距的部分。 4 outerHeight：浏览器窗口的外部高度，包括浏览器自身窗口的高度、工具栏和滚动条等边框和间距的部分。 5 scrollX或pageXOffset：网页在水平方向上滚动的像素数，即左侧被隐藏的像素数。 6 scrollY或pageYOffset：网页在垂直方向上滚动的像素数，即上方被隐藏的像素数。注意，scrollX和scrollY是非标准属性，可以使用pageXOffset和pageYOffset作为它们的替代品。

alert(),confirm(),prompt()

三个可以在浏览器弹出窗口的方法alert、prompt和confirm，实际项目中都不会用，因为他们都会阻塞JavaScript代码的执行，并且样式无法定制。

window.alert()方法用于在页面上显示一个带有一个“确定”按钮的对话框，通常用于提示用户一些信息。其语法如下： window.alert(message); 其中，message 参数是要在对话框中显示的文本信息。例如，以下代码将在页面上显示一个对话框，告诉用户操作成功： window.alert('操作成功！');

window.confirm() 是 JavaScript 中的一个方法，用于显示一个带有确认和取消按钮的对话框，通常用于让用户确认一些操作。其语法如下： window.confirm(message); 其中，message 参数是要在对话框中显示的文本信息。当用户点击确认按钮时，该方法返回 true，否则返回 false。例如，以下代码将在页面上显示一个对话框，询问用户是否要删除当前的数据：

if (window.confirm('Are you sure you want to delete this data?')) {
  // 用户点击了确认按钮，执行删除操作
  // ...
} else {
  // 用户点击了取消按钮，取消删除操作
  // ...
}

window.prompt() 是 JavaScript 中的一个方法，用于显示一个带有输入框和确认、取消按钮的对话框，通常用于获取用户输入的信息。其语法如下： window.prompt(message, default); 其中，message 参数是要在对话框中显示的文本信息，用于提示用户输入什么内容。default 参数是一个可选参数，表示在输入框中默认显示的文本。当用户点击确认按钮时，该方法返回输入框中的内容，如果用户点击取消按钮，则返回 null。例如，以下代码将在页面上显示一个对话框，让用户输入姓名：

const name = window.prompt('请输入您的姓名：', '张三');
if (name) {
  // 用户输入了姓名，进行下一步操作
  // ...
} else {
  // 用户取消了输入，取消操作
  // ...
}

window.close()方法可以关闭当前窗口或者由当前窗口打开的子窗口。当在浏览器地址栏中直接输入window.close()时，它会被浏览器忽略，而不会关闭当前窗口。该方法只对顶层窗口有效，iframe框架之中的窗口使用该方法无效。在实际使用中，如果打开窗口是由代码自动打开的（如使用window.open()方法），那么可以使用window.close()方法来关闭这个窗口。如果打开的窗口是由用户操作打开的，那么在安全性考虑上，浏览器通常不允许使用代码自动关闭它。

stop()

window.stop() 方法用于停止当前页面的加载，类似于用户点击了“停止”按钮。当页面正在加载资源，或者正在进行长时间运行的脚本时，该方法可以立即停止加载或脚本执行，以提高用户体验。调用 window.stop() 会立即停止当前文档的加载，并清除当前文档和所有嵌入式框架的加载请求。如果在文档的 onload 事件中调用该方法，会立即停止所有加载操作，并在文档完成加载后不会触发 onload 事件。需要注意的是，window.stop() 方法只能停止当前窗口的加载，无法停止其他窗口或标签页的加载。

scrollTo(),scroll(),scrollBy()

window.scrollTo() 、window.scroll() 和 window.scrollBy() 方法都可以用于滚动窗口的位置。它们的区别如下： 1 window.scrollTo() 方法会将窗口的滚动位置设置为给定的坐标。 2 window.scroll() 方法是 window.scrollTo() 方法的别名。 3 window.scrollBy() 方法将窗口的滚动位置增加给定的值。具体来说，这些方法都接受两个参数：水平滚动位置和垂直滚动位置，单位为像素。如果只提供一个参数，它将被视为垂直滚动位置，而水平滚动位置将保持不变。以下是这些方法的使用示例：

// 将窗口的滚动位置设置为 (100, 200) 像素
window.scrollTo(100, 200);
// 将窗口的滚动位置增加 50 像素
window.scrollBy(0, 50);

注意，这些方法对于嵌套的窗口和跨域的窗口是有限制的，具体取决于浏览器的安全策略，如果页面内容没有超出视口大小，也就是没有滚动条，这些方法就没有效果。

print()

window.print() 方法用于调用浏览器的打印功能，将当前页面的内容打印出来。在调用这个方法时，会自动打开打印对话框，允许用户设置打印选项，例如选择打印机、纸张大小、打印方向等等。通常情况下，这个方法会在页面的某个按钮或链接被点击时触发，或者通过 JavaScript 代码在页面加载完成后自动调用。

getSelection()

window.getSelection() 方法用于获取用户在当前活动窗口中选取的文本，返回一个 Selection 对象，表示当前选中的文本范围。例如，可以使用以下代码获取选中的文本并弹出提示框显示：

let selection = window.getSelection();
let selectedText = selection.toString();
alert(selectedText);

注意，如果没有选中任何文本，返回的是一个空的 Selection 对象。此外，该方法只能获取当前窗口的选中文本，无法获取其他窗口或 iframe 中的选中文本。通常情况下，会将它与事件结合使用，以便在用户选择文本时对其进行操作。例如，在鼠标点击事件中可以调用getSelection()方法来获取选择的文本，然后在控制台中输出它。

window上的事件

load事件

load 事件是在文档及其所有依赖的资源（例如图片和样式表）都已加载完成后触发的事件。当 load 事件被触发时，表示页面的所有资源都已经加载完毕，可以执行一些需要依赖这些资源的操作，例如修改 DOM、绑定事件等。 load 事件可以通过在 window 对象上注册处理函数来监听。例如：

window.addEventListener('load', function() {
  console.log('页面已经加载完成！');
});

在这个例子中，当页面加载完成时，控制台会输出一条消息。需要注意的是，load 事件只会在整个页面及其依赖的资源都加载完成后触发。如果只想等待文档加载完成而不必等待所有资源加载完成，可以使用 DOMContentLoaded 事件。

DOMContentLoaded事件

DOMContentLoaded 事件是在文档的 DOM 树构建完成后触发的事件，此时所有的 HTML 元素都已经被解析成 DOM 对象，但是页面中的其他资源（例如图片和样式表）可能还没有加载完成。与 load 事件不同，DOMContentLoaded 事件不需要等待所有资源加载完成就可以触发。这使得我们可以在页面加载完成之前执行一些操作，例如绑定事件、修改 DOM 结构等。 DOMContentLoaded 事件可以通过在 document 对象上注册处理函数来监听。例如：

document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM 树构建完成！');
});

在这个例子中，当文档的 DOM 树构建完成时，控制台会输出一条消息。需要注意的是，DOMContentLoaded 事件并不是所有浏览器都支持的标准事件。在某些浏览器中，可以使用类似以下方式来监听DOMContentLoaded 事件：

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM 树构建完成！');
  });
} else {
  console.log('DOM 树已经构建完成！');
}

在这个例子中，我们首先检查 document.readyState 是否为 'loading'，如果是，就在 DOMContentLoaded 事件上注册处理函数；否则，直接输出一条消息。

beforeunload事件

beforeunload 事件是在用户正在离开当前页面时触发的事件。通常情况下，当用户点击关闭按钮、刷新页面或者输入新的 URL 时，都会触发 beforeunload 事件。可以使用 beforeunload 事件来提示用户保存未提交的数据、防止误操作等。 beforeunload 事件需要在 window 对象上注册处理函数来监听。例如：

window.addEventListener('beforeunload', function(event) {
  // event.returnValue = '确定要离开当前页面吗？'; // 设置提示内容
  // event.returnValue = ''; // 不进行弹窗提示
});

在这个例子中，当用户离开页面时，会提示一个默认的确认框。可以通过设置event.returnValue属性，设置确认框的文案。如果我们不想显示确认框，可以通过设置 event.returnValue为空字符串。需要注意的是，在某些浏览器中，例如 Chrome 和 Firefox，当 beforeunload 事件被触发时，不允许弹出自定义的确认框或者修改默认的确认框内容。这是出于安全考虑，防止网站滥用该事件来欺骗用户。

resize事件

resize 事件是在浏览器窗口大小改变时触发的事件。当用户改变浏览器窗口大小时，可以使用 resize 事件来执行一些相应的操作，例如重新布局页面、调整元素大小等。 resize 事件可以通过在 window 对象上注册处理函数来监听。例如：

window.addEventListener('resize', function() {
  console.log('浏览器窗口大小已改变！');
});

在这个例子中，当用户改变浏览器窗口大小时，控制台会输出一条消息。需要注意的是，resize 事件可能会频繁触发，因此建议尽量避免在处理函数中执行复杂的操作。另外，对于移动设备等屏幕较小的设备，建议使用响应式设计或其他适应性布局来避免出现滚动条。

scroll事件

scroll 事件是在文档在窗口中滚动时触发的事件。当用户滚动页面时，可以使用 scroll 事件来执行一些相应的操作，例如修改页面的导航条、加载更多内容等。 scroll 事件可以通过在 window 对象上注册处理函数来监听。例如：

window.addEventListener('scroll', function() {
  console.log('用户正在滚动页面！');
});

在这个例子中，当用户滚动页面时，控制台会输出一条消息。需要注意的是，scroll 事件可能会频繁触发，因此建议尽量避免在处理函数中执行复杂的操作。另外，对于移动设备等屏幕较小的设备，建议使用响应式设计或其他适应性布局来避免出现滚动条。

error事件

error 事件是在发生 JavaScript 运行错误或者网络请求失败时触发的事件。当 JavaScript 运行错误发生时，会在控制台输出错误信息；当网络请求失败时，会在浏览器的网络面板中显示错误信息。可以通过在 window 对象上注册 error 事件的处理函数来捕获 JavaScript 运行错误。例如：

window.addEventListener('error', function(event) {
  console.error('发生 JavaScript 运行错误：', event.error);
});

在这个例子中，当发生 JavaScript 运行错误时，控制台会输出错误信息。需要注意的是，error 事件不仅可以用来捕获 JavaScript 运行错误，还可以用来捕获其他类型的错误，例如网络请求失败、图片加载失败等。在这些情况下，event 对象的 target 属性会指向发生错误的元素或者对象。

第八章 JavaScript BOM 8.1 window对象