📜  javascript 获取不带参数的当前窗口位置 - Javascript (1)

📅  最后修改于: 2023-12-03 15:31:45.572000             🧑  作者: Mango

JavaScript获取当前窗口位置

JavaScript可以轻松获取在浏览器中打开的当前窗口的位置。当然,这里所说的位置是指窗口在浏览器中的左上角的坐标值,而不是文档中某个元素的位置。在下面的代码片段中展示了如何获取不带参数的当前窗口位置:

let windowLeft = window.screenLeft ? window.screenLeft : window.screenX;
let windowTop = window.screenTop ? window.screenTop : window.screenY;

console.log(`当前窗口位置:${windowLeft}, ${windowTop}`);

在上面的代码片段中,首先使用window.screenLeftwindow.screenTop属性获取窗口在屏幕上的位置,然后根据不同的浏览器兼容性分别使用window.screenLeftwindow.screenXwindow.screenTopwindow.screenY来获取窗口在屏幕上的位置。最后将位置信息输出到控制台。

需要注意的是,这里获取的位置是相对于屏幕的位置,因此如果用户在浏览器中缩放了页面,那么获取到的位置信息并不一定准确。如果需要获取相对于文档的位置信息,可以使用document.documentElement.getBoundingClientRect()方法获取窗口位置信息,具体可参考下面的代码片段:

let {left: documentLeft, top: documentTop} = document.documentElement.getBoundingClientRect();

console.log(`当前窗口位置:${documentLeft}, ${documentTop}`);

在上面的代码片段中,使用document.documentElement.getBoundingClientRect()方法获取文档元素的位置信息,并将位置信息解构为documentLeftdocumentTop,然后输出到控制台。需要注意的是,由于getBoundingClientRect()方法返回的是相对于文档的位置信息,因此无需考虑用户在浏览器中缩放页面的情况。