You can easily see how it works by clicking the button Execute code () in our editor above.
As you can see, this method will change the heading from “not focus” to “has focus” whenever you click or focus to that page. However, this method doesn’t work in some smartphone browsers, such as Android. If you want to support all browsers, you should read the next solution instead.
In many old browsers, the previous method doesn’t work effectively. Instead, you can use the addEventListener() with two events namely focus and focusout.
- event: name of the event.
- function: the function that do the actions when the given event fires.
You can easily see how it works by clicking the button Execute code () in our editor above. However, you should use the document.visibilityState property in the next solution if you want to verify that the content of the page is visible and the user can see it, such as the window must not be minimized or the user doesn’t have another tab open in a same window.
LearnShareIT window is visible LearnShareIT window is invisible LearnShareIT window is visible
You can click execute the code and then open the console log and click another tab on your browser (or create a new tab), after 5 seconds go back here and you will find that the console prints out the “invisibility” keyword.
Maybe you are interested:
Name of the university: HCMUT