The hidden attribute is defined as follows:
Upon receipt, the hidden attribute MUST return true if the Document contained in the context of the top-level view (the root window in the browser view) does not appear at all. The attribute MUST return false if the Document containing the top-level viewing context is at least partially visible to at least one screen.
If the defaultView Document is null, when receiving hidden attribute MUST return true.
The hasFocus method hasFocus defined as follows
The hasFocus() method on Document objects should return true if the Document view context and all its ancestor view contexts are also concentrated, and the top-level view context has system focus. If the Document does not have a view context or if its view context does not have a top-level view context , then the method will always return false.
For example, if you open a page in the foreground tab, and then open another window, the tab (or maybe) will still be partially visible, so hidden returns false. However, the new window has focus, so hasFocus() returns false for the tab.
If you run the following snippet, the document inside the iframe will be visible, but will not have focus (this stackoverflow page is focused):
document.body.innerHTML = '<p>hidden: ' + document.hidden + '</p>' + '<p>hasFocus: ' + document.hasFocus() + '</p>';
But in this other one, since you click the button inside the iframe, it is visible and focused:
document.getElementsByTagName('input')[0].onclick = function() { document.body.innerHTML = '<p>hidden: ' + document.hidden + '</p>' + '<p>hasFocus: ' + document.hasFocus() + '</p>'; };
<input type="button" value="Click me!" />