Detailed explanation of how to change the title of a webpage when it loses focus

Said before: It must be based on a browser that supports H5

The API itself is very simple and consists of the following three parts.

document.hidden: A Boolean value indicating whether the page is hidden. Hiding the page includes the page being in a background tab or minimizing the browser (note that a page covered by other software does not count as hidden, such as an open sublime covering the browser).

document.visibilityState: Value representing the following 4 possible states

hidden: the page is in the background tab or the browser is minimized

visible: the page is in the foreground tab Medium

prerender: The page performs pre-rendering processing outside the screen. The value of document.hidden is true

unloaded: The page is being unloaded from memory

Visibilitychange event: When the document is unloaded from memory This event is triggered when visible becomes invisible or from invisible to visible.

In this way, we can listen to the Visibilitychange event. When the event is triggered, get the value of document.hidden and process some events on the page based on this value.

1 document.addEventListener('visibilitychange', function() { 
var isHidden = document.hidden;3   if (isHidden) {4     
document.title = '当焦点不在当前窗口时的网页标题';  } else {    
document.title = '再变回来或者做点其他的';   
}
 });

As long as you understand the principle, you can do whatever you want!~

The above is the detailed content of Detailed explanation of how to change the title of a webpage when it loses focus. For more information, please follow other related articles on the PHP Chinese website!