dom - How to detect if current window is behind another window, using Javascript - Stack Overflow

admin管理员组

文章数量:1391964

Is it possible to detect whether the web browser window is currently covered by another window?

document.hidden and document.visibilityState only changes state on switching tabs or when the entire window is minimized.

document.hasFocus() returns false if the window is visible but not in focus (e.g. the focus is on the taskbar)

Is it possible to detect whether the web browser window is currently covered by another window?

document.hidden and document.visibilityState only changes state on switching tabs or when the entire window is minimized.

document.hasFocus() returns false if the window is visible but not in focus (e.g. the focus is on the taskbar)

• javascript
• dom

Share Improve this question Follow asked Apr 11, 2017 at 7:48 mocaxmocax 3122 bronze badges 7

• 3 if from same domain - with some trickery yes. if covered by window from different domain or even application - no – Peter Commented Apr 11, 2017 at 7:49
• 1 @Peter: Even then you still have no idea how large the toolbars are, or where on the screen the window is positioned. – Cerbrus Commented Apr 11, 2017 at 7:58
• @Cerbrus what about window.screenX ? – Kaiido Commented Apr 11, 2017 at 8:05
• @Kaiido: -1920 on the left monitor of my 2-screen setup, for a fullscreen window. I'm sure you could figure out the exact position and screen, but there's still no way to see what portion of the page is actually rendered, considering overlapping windows. – Cerbrus Commented Apr 11, 2017 at 8:07
• not sure for browser support plnkr.co/edit/uF6sK5nX5M0IMhgaMQaR?p=preview – Kaiido Commented Apr 11, 2017 at 9:30

 |  Show 2 more ments

5 Answers 5

Sorted by: Reset to default 3

Nope, that's not possible.

There's no way in JavaScript to know how visible the window is.

Browser windows overlapping one another, the position of the browser windows, and which one of them is on top - these functionalities are handled by the operating system.

No matter what code you write for your webpage, you cannot tell if your browser window is overlapped by another.

So yeah, the answer is NO.

It's been a while since the OP, but for me the Page Visiblity API does appear to allow you to event off of another application's window covering the browser window, at least in Firefox on Windows 11.

To test:

1. Open a window of window's File Explorer and change it so that it's smallish
2. Go to https://developer.mozilla/en-US/docs/Web/API/Page_Visibility_API in Firefox
3. Set the browser window to be wider or taller than the File Explorer window
4. Play the demo sound on the MDN page
5. Alt-Tab over to the file explorer window. The sound does not stop.
6. Drag the edges one by one until the file explorer window covers the browser window. Note that the sound only stops playing when the browser window is pletely covered.
7. Drag one of the edges of the file explorer window back so the browser isn't covered. The sound starts again.

Your information is incorrect. You should use document.hidden in this scenario. We tested this thoroughly in our own project and it is used to stop refreshing javascript from running on a map when the page is obscured from view, and it indeed instantly works simply by having the window behind another window. Minimizing is not a requirement. edit: As per the ment by xdhmoore, there is also an event available. The information is this:

document.addEventListener("visibilitychange", () => {
if (document.hidden) {
    dosomething();
  } else {
    dosomethingelse();
  }
});

The link is https://developer.mozilla/en-US/docs/Web/API/Page_Visibility_API but in case that link ever dies, a basic code sample is provided here.

It is very possible if your website runs as one website. By using Window Focus and Blur events.

Note: this is expecting that all code is executed in the same frame as the snippet below is executed in an iframe which behaves as if it was in a separate window!

var element = document.getElementById("out");

window.onblur = () => {
  element.innerHTML = "I lost focus"
}
window.onfocus = () => {
  element.innerHTML = "Focus"
}

<div id="out">Focus</div>

本文标签： domHow to detect if current window is behind another windowusing JavaScriptStack Overflow