取得窗口大小 兼容所有浏览器的js代码.docx

在JavaScript中，获取浏览器窗口的大小是一个常见的需求，这通常涉及到网页的响应式设计或动态布局。`window.innerWidth`和`window.innerHeight`是JavaScript提供的两个内置属性，它们分别用于获取浏览器视口的宽度和高度，但这些属性并不总是在所有浏览器中表现一致，尤其是在旧版本的浏览器中。因此，我们需要编写兼容所有浏览器的代码来获取窗口大小。 以下是一个兼容所有主流浏览器的JavaScript代码示例： ```javascript // 获取窗口大小 var pageWidth = window.innerWidth, pageHeight = window.innerHeight; // 检查window.innerWidth和window.innerHeight是否为数值 if (typeof pageWidth != "number") { // 如果不是数值，检查页面是否处于标准模式 if (document.compatMode) { // 标准模式下，使用document.documentElement的宽高 pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; } else { // Quirks模式下，使用document.body的宽高 pageWidth = document.body.clientWidth; pageHeight = document.body.clientHeight; } } ``` 这段代码首先尝试使用`window.innerWidth`和`window.innerHeight`获取窗口大小。如果这两个属性的值不是数字，说明某些旧版浏览器可能不支持这些属性，此时代码会进一步检查文档的兼容模式。如果`document.compatMode`为"CSS1Compat"，表示页面处于标准模式，那么宽度和高度应该通过`document.documentElement.clientWidth`和`document.documentElement.clientHeight`获取。否则，如果`document.compatMode`不存在或者为"BackCompat"（quirks模式），则使用`document.body.clientWidth`和`document.body.clientHeight`获取窗口大小。 另外，获取窗口在屏幕上的位置也有类似的问题。`window.screenLeft`和`window.screenTop`在Internet Explorer中可用，但在其他浏览器如Firefox中，需要使用`window.screenX`和`window.screenY`。所以，我们需要编写兼容性代码来确保在任何浏览器中都能正确获取窗口的位置： ```javascript // 获取窗口位置 var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX; var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY; ``` 这段代码使用了条件运算符来检查`window.screenLeft`和`window.screenTop`是否为数值，如果是，则使用它们的值，否则使用`window.screenX`和`window.screenY`。 为了在所有浏览器中准确地获取窗口大小和位置，我们需要对`window.innerWidth`、`window.innerHeight`、`window.screenLeft`以及`window.screenTop`等属性进行兼容性处理。这样的代码能够确保在不同浏览器环境下都能正确地得到窗口的尺寸和位置信息，从而实现更健壮的网页开发。